/* Rift Table — admin panel (#viewAdmin, admin.js) and the public site banner / moderator notices.
   Uses the tokens of style.css (docs/design.md). Phone (< 720 px): one column, rows wrap, 44 px touch targets. */

/* ------------------------------------------------------------------ site banner + notices (everyone) */
/* one line per message (maintenance, features switched off, site messages), each with its own colour and close */
.site-banner{font-size:var(--fs-2)}
.sb-lines{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.sb-line{display:flex;align-items:flex-start;gap:var(--s3);padding:6px var(--s5);border-bottom:1px solid rgba(143,184,232,.35);
  background:var(--info-deep);color:#d6e8fb}
.sb-line.warning{border-bottom-color:rgba(212,178,106,.45);background:var(--gold-deep);color:var(--gold-hi)}
.sb-line.update{border-bottom-color:rgba(143,204,160,.4);background:#1a2f24;color:#d3f0dc}
.sb-txt{flex:1;min-width:0;padding-top:6px;line-height:1.45}
.sb-tag{display:inline-block;margin-right:8px;padding:0 7px;border-radius:999px;border:1px solid currentColor;font:600 var(--fs-0)/18px var(--ui);
  text-transform:uppercase;letter-spacing:.06em;vertical-align:1px}
.sb-title{margin-right:8px}
.sb-body{white-space:pre-line}
.sb-body.long:not(.open){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.sb-body.long{cursor:pointer}
.sb-x{flex:none;width:32px;height:32px;border-radius:var(--r);color:inherit;opacity:.8;font-size:var(--fs-2)}
.sb-x:hover{opacity:1;background:rgba(255,255,255,.08)}
.adm-notice{position:fixed;left:50%;top:calc(var(--head) + 12px);transform:translateX(-50%);z-index:95;display:flex;align-items:flex-start;gap:var(--s3);
  width:min(560px,calc(100% - 32px));padding:var(--s3) var(--s4);border-radius:var(--r-lg);border:1px solid rgba(212,178,106,.5);
  background:var(--surface-2);color:var(--ink);box-shadow:var(--shadow-lg);font-size:var(--fs-2)}
.adm-notice b{color:var(--gold-hi);flex:none}
.adm-notice span{flex:1;min-width:0;overflow-wrap:anywhere}
.adm-ban-notice{padding:var(--s3) var(--s4)}

/* ------------------------------------------------------------------ panel frame */
.adm{display:flex;flex-direction:column;gap:var(--s4);max-width:1240px;margin:0 auto;padding:var(--s6) var(--s5) var(--s7);min-width:0}
.adm-head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.adm-head h1{margin:0;font:600 var(--fs-5)/1 var(--display);letter-spacing:.005em}
.adm-head .grow{flex:1}
.adm-sub{color:var(--ink-3);font-size:var(--fs-1)}
.adm-tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--hair);overflow-x:auto;scrollbar-width:none}
.adm-tabs::-webkit-scrollbar{display:none}
.adm-tabs button{position:relative;flex:0 0 auto;min-height:44px;padding:0 var(--s3);color:var(--ink-2);font-weight:500;white-space:nowrap}
.adm-tabs button:hover{color:var(--ink)}
.adm-tabs button.on{color:var(--ink)}
.adm-tabs button.on::after{content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:-1px;height:2px;border-radius:2px;background:var(--gold)}
.adm-pane{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.adm-pane .none{color:var(--ink-2);font-size:var(--fs-2);padding:var(--s3) var(--s4)}
.adm-card{min-width:0;display:flex;flex-direction:column}
.adm-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:var(--s4);min-width:0}
.adm-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s4);align-items:start}
.adm-hint{margin:0;color:var(--ink-2);font-size:var(--fs-1);line-height:1.5;padding:0 var(--s4) var(--s4)}
.adm-form .adm-hint{padding:0}
.adm-hint code,.adm-kv code,.adm-meta code{font:var(--fs-0) var(--mono);color:var(--ink-2)}
.adm-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;border:1px solid var(--hair-2);background:rgba(0,0,0,.2);
  color:var(--ink-2);font-size:var(--fs-0);font-weight:500;line-height:16px;white-space:nowrap;vertical-align:1px}
.adm-badge.ok{border-color:rgba(143,204,160,.45);color:var(--good)} .adm-badge.warn,.adm-badge.warning{border-color:rgba(212,178,106,.5);color:var(--gold-hi)}
.adm-badge.bad{border-color:rgba(232,131,111,.5);color:var(--bad)} .adm-badge.gold{border-color:rgba(212,178,106,.5);color:var(--gold-hi)}
.adm-badge.info{border-color:rgba(143,184,232,.45);color:var(--info)}
.adm-alert{margin:0 var(--s4) var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r);border:1px solid var(--hair-2);background:rgba(0,0,0,.2);font-size:var(--fs-2);overflow-wrap:anywhere}
.adm-alert.bad{border-color:rgba(232,131,111,.5);background:var(--coral-deep);color:#ffd7cf}
.lobby > .adm-ban-notice{margin:0}

/* ------------------------------------------------------------------ overview tiles */
.adm-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s3)}
.adm-tile{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:var(--s3) var(--s4);min-width:0}
.adm-tile-l{font:600 var(--fs-1)/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.adm-tile-v{margin-top:var(--s1);font:600 30px/1.1 var(--display);font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.adm-tile-v small{font:400 var(--fs-1) var(--ui);color:var(--ink-2)}
.adm-tile-s{margin-top:2px;color:var(--ink-2);font-size:var(--fs-1);overflow-wrap:anywhere}
.adm-tile.warn{border-color:rgba(212,178,106,.5)} .adm-tile.warn .adm-tile-v{color:var(--gold-hi)}
.adm-tile.bad{border-color:rgba(232,131,111,.5)} .adm-tile.bad .adm-tile-v{color:var(--bad)}
.adm-kv{list-style:none;margin:0;padding:0 var(--s4) var(--s4);display:flex;flex-direction:column;gap:6px;font-size:var(--fs-2);overflow-wrap:anywhere}
.adm-kv b{color:var(--ink-2);font-weight:500}
.adm-errs{list-style:none;margin:0;padding:0 var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s2);font-size:var(--fs-1)}
.adm-err-msg{color:var(--ink-2);font:var(--fs-0)/1.45 var(--mono);overflow-wrap:anywhere}

/* ------------------------------------------------------------------ rows (rooms, games, reports) */
.adm-list{display:flex;flex-direction:column;padding:0 var(--s4) var(--s3);min-width:0}
.adm-row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) 0;border-bottom:1px solid var(--hair);min-width:0}
.adm-row:last-child{border-bottom:0}
.adm-row-main{flex:1 1 320px;display:flex;flex-direction:column;gap:4px;min-width:0}
.adm-row-acts{display:flex;gap:6px;flex-wrap:wrap;flex:none}
.adm-row .lb-vs{flex:none}
.adm-nm{font-weight:600} .adm-nm em{font-style:normal;font-weight:400;font-size:var(--fs-0);color:var(--ink-3);margin-left:2px}
.adm-row .lb-vs .linkbtn{font-size:inherit;font-weight:600;color:var(--ink);text-align:left}
.adm-meta{display:flex;flex-wrap:wrap;gap:4px var(--s3);align-items:center;color:var(--ink-2);font-size:var(--fs-1);min-width:0}
.adm-more{padding:0 var(--s4) var(--s4)}
.adm-report.handled{opacity:.7}
.adm-note{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-2);color:var(--ink);max-height:12em;overflow:auto}
.adm-note.empty{color:var(--ink-3);font-style:italic}
.adm-check{display:inline-flex;align-items:center;gap:6px;font:400 var(--fs-1)/1.2 var(--ui);color:var(--ink-2);text-transform:none;letter-spacing:0}
.adm-switch{font-size:var(--fs-2);color:var(--ink)}

/* ------------------------------------------------------------------ players */
.adm-search,.adm-filters{display:flex;gap:var(--s2);flex-wrap:wrap;padding:var(--s4)}
.adm-search input{flex:1 1 200px}
.adm-filters input{flex:2 1 200px} .adm-filters select{flex:1 1 130px}
.adm-plist{display:flex;flex-direction:column;gap:4px;padding:0 var(--s3) var(--s3);max-height:70vh;overflow:auto}
.adm-prow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s2);text-align:left;padding:var(--s2) var(--s3);border-radius:var(--r);border:1px solid var(--hair);background:rgba(0,0,0,.16)}
.adm-prow:hover{border-color:var(--hair-2)} .adm-prow.on{border-color:var(--gold);background:rgba(212,178,106,.07)}
.adm-prow-n{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-prow-b{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.adm-prow-m{grid-column:1 / -1;color:var(--ink-2);font-size:var(--fs-1)}
.adm-profile{position:sticky;top:calc(var(--head) + 12px)}
.adm-ph{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s4) var(--s4) var(--s2)}
.adm-ph h2{margin:0;font:600 var(--fs-4)/1.1 var(--display);overflow-wrap:anywhere}
.adm-uid{user-select:all;overflow-wrap:anywhere}
.adm-acts{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;padding:0 var(--s4) var(--s4)}
.adm-form .adm-acts{padding:0}
.adm-sub-t{padding-top:var(--s1)}
.adm-mini{display:flex;align-items:center;gap:4px var(--s3);flex-wrap:wrap;padding:var(--s2) 0;border-bottom:1px solid var(--hair);font-size:var(--fs-2)}
.adm-mini > span:first-child{flex:1 1 200px;font-weight:600}
.adm-mini .adm-meta{flex:1 1 220px}
.adm-mini.adm-ach > .ach-em{flex:0 0 auto;align-self:center}  /* the achievement's emblem (achievements.js) */
.adm-mini.adm-ach > .ach-em + span{flex:1 1 200px;font-weight:600}

/* ------------------------------------------------------------------ bots (Admin -> Bots, botreg.py) */
.adm-bots-top{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:start}
.adm-bots-top:has(.adm-bot-edit){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.adm-bot-edit{position:sticky;top:calc(var(--head) + 12px)}
.adm-bot-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.adm-bot-h .adm-nm{font-size:var(--fs-3);margin-right:2px}
.adm-bot.off .adm-bot-h .adm-nm,.adm-bot.off .adm-bot-blurb{color:var(--ink-3)}
.adm-bot-blurb{color:var(--ink-2);font-size:var(--fs-2);font-style:italic;overflow-wrap:anywhere}
.adm-bot-on{min-height:32px;padding-right:var(--s2)}
.adm-ro{padding:6px 0;color:var(--ink);font-size:var(--fs-2)}
.adm-ro small{color:var(--ink-3)}
.adm-file > span:first-child{flex:1 1 220px;font-weight:400}
.adm-file code{color:var(--ink)}
.ptitle .hbtn.small{margin-left:var(--s2)}
.adm-path{overflow-wrap:anywhere;word-break:break-all}

/* ------------------------------------------------------------------ announcements, dialog, audit */
.adm-form{display:flex;flex-direction:column;gap:var(--s3);padding:0 var(--s4) var(--s4)}
.adm-field{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-1);color:var(--ink-2)}
.adm-field small{color:var(--ink-3)}
.adm-field textarea,.adm-field input,.adm-field select{width:100%}
.adm textarea,.adm-dlg textarea{font:var(--fs-2)/1.5 var(--ui);resize:vertical}
.adm-dlg{width:min(480px,100%)}
.adm-dlg .adm-dlg-fields{display:flex;flex-direction:column;gap:var(--s3);margin:var(--s2) 0 4px}
.adm-dlg-err{color:var(--bad);font-size:var(--fs-1)}
.hbtn.primary.danger{background:linear-gradient(180deg,#e89a87,#d97e6b);border-color:#efab9a;color:#2a0f0a}
.adm-audit{display:flex;flex-direction:column;padding:0 var(--s4) var(--s3);font-size:var(--fs-1)}
.adm-arow{display:grid;grid-template-columns:120px 140px 150px minmax(0,1fr);gap:2px var(--s3);padding:var(--s2) 0;border-top:1px solid var(--hair);align-items:baseline}
.adm-arow:first-child{border-top:0}
.adm-a-when{color:var(--ink-2)} .adm-a-who{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-a-what{color:var(--gold-hi)}
.adm-a-target{font:var(--fs-0) var(--mono);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-a-det{grid-column:2 / -1;color:var(--ink-2);overflow-wrap:anywhere}

@media (max-width:900px){
  .adm-split{grid-template-columns:minmax(0,1fr)}
  .adm-profile{position:static}
  .adm-bots-top,.adm-bots-top:has(.adm-bot-edit){grid-template-columns:minmax(0,1fr)}
  .adm-bot-edit{position:static}
}
@media (max-width:720px){
  .adm{padding:var(--s3) var(--s3) var(--s5);gap:var(--s3)}
  .adm-head h1{font-size:30px}
  .adm-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
  .adm-tile{padding:var(--s2) var(--s3)} .adm-tile-v{font-size:24px}
  .adm-list,.adm-plist,.adm-audit{padding:0 var(--s3) var(--s2)}
  .adm-row-main{flex-basis:100%}
  .adm-row-acts{width:100%} .adm-row-acts .hbtn{flex:1}
  .adm-bots-cnt{display:none}
  .adm-arow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .adm-a-target{grid-column:1 / -1} .adm-a-det{grid-column:1 / -1}
  .site-banner{font-size:var(--fs-1)}
  .sb-line{padding:4px 6px 4px var(--s3)}
}

/* ------------------------------------------------------------------ features (flags.py) + messages tabs */
.adm-lede{padding:0 0 var(--s4)}
.adm-list{display:flex;flex-direction:column;padding:0 var(--s4) var(--s2)}
.adm-flag .adm-flag-msg{width:100%;margin-top:4px}
.adm-flag.off .adm-row-main > div:first-child b{color:var(--bad)}
.adm-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s3)}
.adm-msg-text{white-space:pre-line;overflow-wrap:anywhere;color:var(--ink);font-size:var(--fs-2);line-height:1.45;
  max-height:9em;overflow:auto}
.lb-signup-note{padding:var(--s2) var(--s3);border-radius:var(--r);background:var(--gold-deep);color:var(--gold-hi);font-size:var(--fs-1);line-height:1.45}