/* =========================================================================
   Rungs — Admin Command Center (prototype)
   Same broadcast/acid-green system as the player app, but desktop-dense.
   ========================================================================= */

/* Tokens live in static/tokens.css, which every page loads before this file.
   This copy was missing --chal, --tile, --divider-2, --t-dim-3 and --maxw
   outright, so any component moved here from climb.css lost them silently. */

* { box-sizing: border-box; margin: 0; padding: 0; }
/* The `hidden` attribute must always win, even over class rules that set
   display (e.g. .field{display:flex}) — used for show/hide in the demo screens. */
[hidden] { display: none !important; }
html, body { background: var(--screen); }
body.admin { font-family: var(--sans); color: var(--t-hi); -webkit-font-smoothing: antialiased; min-height: 100vh; }

/* ---- top chrome ---- */
.ah {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--screen); border-bottom: 1px solid var(--divider);
}
.ah-brand { display: flex; align-items: center; gap: 10px; }
.ah-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--acc); box-shadow: inset -5px -5px 0 -3px rgba(0,0,0,.18); }
.ah-word { font: 800 20px var(--cond); letter-spacing: .16em; text-transform: uppercase; }
.ah-tag { font: 700 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-acc); background: var(--acc); padding: 3px 7px; border-radius: var(--r-xs); }
.ah-right { display: flex; align-items: center; gap: 14px; }
.ah-asof { font: 500 10px var(--mono); letter-spacing: .04em; color: var(--t-muted); }
.ah-link {
  font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--acc); white-space: nowrap;
  border: 1px solid var(--acc-line);
  border-radius: var(--r-full); padding: 5px 11px; transition: background 150ms ease;
}
.ah-link:hover { background: var(--acc-container); }
.ah-back { cursor: pointer; }
.ah-back:hover { color: var(--acc); }

.admin-main { max-width: 1200px; margin: 0 auto; padding: 18px 16px 50px; }
/* A single-column page — sign in, sign up, join a club, revise settings, and the
   mid-onboarding token pages. Twelve templates wanted this and expressed it five
   ways: `.narrow`, which was defined NOWHERE so those four rendered at the full
   1200px with a lone form floating in the middle, plus inline max-widths of 420,
   460, 520 and 560px. One measure, comfortable for a form and for short prose. */
.admin-main.narrow { max-width: 480px; }

/* The sign-out control is a form button, because signing out must be a POST.
   It carried background:none;border:0;cursor:pointer as an inline style on
   every page that used it. */
.ah-signout { background: none; border: 0; cursor: pointer; font: inherit; }

/* ---- season header band ---- */
.season-band {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 18px;
  background: radial-gradient(120% 120% at 0% 0%, var(--surface) 0%, var(--screen) 72%);
  border: 1px solid var(--divider); border-radius: var(--r-l); padding: 20px 22px;
}
.season-name { font: 800 30px var(--cond); letter-spacing: .02em; text-transform: uppercase; color: var(--t-hi); }
.season-dates { font: 500 12px var(--mono); color: var(--t-muted-2); margin-top: 4px; }
.season-stats { font: 600 13px var(--sans); color: var(--t-body); margin-top: 10px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.health-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.health-dot--good { background: var(--acc); }
.health-dot--warn { background: var(--amb); }
.health-dot--bad { background: var(--danger); }
.health-dot--neutral { background: var(--t-dim); }
.season-actions { display: flex; gap: 10px; flex: none; }

/* .abtn and the .abtn--* modifiers moved to shared.css — a button in the score
   dialog is the same button on either shell. */

/* ---- consolidated action bar ---- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 4px; }
.act-btn {
  font: 700 12px var(--sans); letter-spacing: .02em; cursor: pointer;
  color: var(--t-hi); background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-s); padding: 9px 15px; transition: border-color 150ms ease, background 150ms ease;
}
.act-btn:hover { border-color: var(--t-dim); background: var(--surface-2); }
.act-more { position: relative; }
.act-more-btn { color: var(--t-muted); }
.act-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 180px; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-m); padding: 6px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.7);
  display: flex; flex-direction: column;
}
.act-menu[hidden] { display: none; }
.act-menu-item { font: 600 12.5px var(--sans); color: var(--t-body); padding: 9px 11px; border-radius: var(--r-s); }
.act-menu-item:hover { background: var(--surface-2); color: var(--t-hi); }

/* ---- body grid ---- */
.admin-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 18px; align-items: start; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); padding: 18px 18px 20px; margin-bottom: 18px; }
.panel--alert { border-color: var(--amb-line); }
/* .panel-title moved to shared.css — the score dialog's heading uses it. */

/* ---- needs attention ---- */
.needs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
.need {
  position: relative; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--t-dim-2);
  border-radius: var(--r-m); padding: 14px 14px 13px;
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color 150ms ease, transform 120ms ease;
}
.need:hover { transform: translateY(-1px); border-color: var(--t-dim); }
.need--dispute, .need--overdue { border-left-color: var(--amb); }
.need--dispute:hover, .need--overdue:hover { border-color: var(--amb-line); }
.need-count { font: 800 30px/1 var(--cond); color: var(--t-hi); }
.need--dispute .need-count, .need--overdue .need-count { color: var(--amb); }
.need-label { font: 600 11.5px var(--sans); color: var(--t-muted); line-height: 1.3; }
.need-btn {
  align-self: flex-start; margin-top: 10px; cursor: pointer;
  font: 700 10px var(--sans); letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 13px; border-radius: var(--r-s); background: var(--acc); color: var(--on-acc);
  transition: filter 150ms ease;
}
.need-btn:hover { filter: brightness(1.08); }
.need--dispute .need-btn, .need--overdue .need-btn { background: var(--amb); color: var(--on-amb); }
.allclear { font: 600 14px var(--sans); color: var(--acc); padding: 8px 0; }

/* ---- ladder health ---- */
.health { display: flex; align-items: center; gap: 22px; }
.health-ring {
  --pct: 0;
  flex: none; width: 116px; height: 116px; border-radius: 50%;
  background: conic-gradient(var(--acc) calc(var(--pct) * 1%), var(--border) 0);
  display: flex; align-items: center; justify-content: center;
}
.health-ring-inner {
  width: 88px; height: 88px; border-radius: 50%; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.health-ring-num { font: 800 34px/1 var(--cond); color: var(--t-hi); }
.health-ring-pct { font-size: 16px; color: var(--t-dim); }
.health-meta { flex: 1; min-width: 0; }
.health-band { font: 800 14px var(--cond); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.health-band--good { color: var(--acc); }
.health-band--warn { color: var(--amb); }
.health-band--bad { color: var(--danger); }
.health-band--neutral { color: var(--t-muted-2); }
.health-metrics { display: flex; flex-direction: column; }
.hm { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--divider); }
.hm:first-child { border-top: none; }
.hm-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.hm-dot--good { background: var(--acc); }
.hm-dot--warn { background: var(--amb); }
.hm-dot--bad { background: var(--danger); }
.hm-dot--neutral { background: var(--t-dim); }
.hm-label { flex: 1; font: 500 12.5px var(--sans); color: var(--t-body); }
.hm-val { font: 700 12.5px var(--mono); color: var(--t-hi); }

/* ---- insights ---- */
.ins-group { margin-top: 14px; }
.ins-group:first-of-type { margin-top: 0; }
.ins-group-title { font: 700 10px var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--t-dim); margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid var(--divider); }
.insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 11px; }
.ins { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-m); padding: 13px 14px; }
.ins-label { font: 700 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted); }
.ins-unit { color: var(--t-dim); font-weight: 500; letter-spacing: .06em; }
.ins-big { font: 800 26px/1 var(--cond); color: var(--t-hi); margin-top: 8px; display: flex; align-items: baseline; gap: 8px; }
.ins-delta { font: 700 12px var(--mono); }
.ins-delta--up { color: var(--acc); }
.ins-delta--down { color: var(--neg); }
.ins-delta--flat { color: var(--t-dim); }
.ins-sub { font: 500 11px var(--sans); color: var(--t-muted-2); margin-top: 6px; line-height: 1.4; }
.ins-list { list-style: none; margin-top: 8px; display: flex; flex-direction: column; }
.ins-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--divider); font: 500 12.5px var(--sans); color: var(--t-body); }
.ins-list li:first-child { border-top: none; }
.ins-list b { font: 700 12.5px var(--mono); color: var(--acc); }
.ins-list b.dim { color: var(--t-muted); }

/* ---- highlights ---- */
.panel--feed { padding-bottom: 14px; }
.highlights { display: flex; flex-direction: column; }
.hl { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-top: 1px solid var(--divider); }
.hl:first-child { border-top: none; }
.hl-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 5px; background: var(--t-dim); }
.hl--urgent .hl-dot { background: var(--danger); }
.hl--warn .hl-dot { background: var(--amb); }
.hl--good .hl-dot { background: var(--acc); }
.hl-text { font: 600 13px/1.4 var(--sans); color: var(--t-body); }
.hl--urgent .hl-text, .hl--warn .hl-text { color: var(--t-hi); }
.hl-empty { font: 500 13px/1.5 var(--sans); color: var(--t-dim); padding: 11px 0; }

/* shareable invite link banner */
.invite-banner { background: linear-gradient(180deg, var(--acc-wash) 0%, var(--surface) 100%);
  border: 1px solid var(--acc-line); border-radius: var(--r-m); padding: 16px 18px; margin-bottom: 18px; }
.invite-banner-eyebrow { font: 700 10px var(--mono); letter-spacing: .16em; color: var(--acc); }
.invite-banner-sub { display: block; font: 500 13px/1.5 var(--sans); color: var(--t-muted); margin-top: 6px; }
.invite-banner-sub b { color: var(--t-hi); }
.invite-banner-row { display: flex; gap: 10px; margin-top: 13px; }
.invite-link { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-s);
  color: var(--t-body); font: 500 13px var(--mono); padding: 11px 12px; outline: none; text-overflow: ellipsis; }
.invite-link:focus { border-color: var(--acc); }
.invite-copy { flex: none; background: var(--acc); color: var(--on-acc); border: none; border-radius: var(--r-s); padding: 0 18px;
  font: 800 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: filter 120ms ease, background 120ms ease; }
.invite-copy:hover { filter: brightness(1.05); }
.invite-copy.copied { background: var(--acc); }
/* Demo ladder's invite link sits at the bottom of the Command Center */
.invite-banner--bottom { margin-bottom: 0; margin-top: 20px; }
.invite-open { flex: none; display: inline-flex; align-items: center; background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: var(--r-s); padding: 0 16px; color: var(--t-hi);
  font: 800 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease; }
.invite-open:hover { border-color: var(--acc); color: var(--acc); }

/* ---- stub pages ---- */
.stub { max-width: 560px; margin: 40px auto; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); padding: 36px 28px; }
.stub-eyebrow { font: 700 10px var(--mono); letter-spacing: .18em; color: var(--t-muted); }
.stub-title { font: 800 30px var(--cond); letter-spacing: .03em; text-transform: uppercase; color: var(--t-hi); margin-top: 8px; }
.stub-filter { font: 600 12px var(--mono); color: var(--acc); margin-top: 8px; }
.stub-note { font: 400 13.5px/1.6 var(--sans); color: var(--t-muted); margin: 14px 0 20px; }

/* ---- workflow screens (pitch demo: registrations / challenges / disputes) ---- */
.wf { max-width: 780px; margin: 6px auto 0; }
.wf-head { margin-bottom: 16px; }
.wf-eyebrow { font: 700 10px var(--mono); letter-spacing: .18em; color: var(--t-muted); }
.wf-title { font: 800 30px var(--cond); letter-spacing: .03em; text-transform: uppercase; color: var(--t-hi); margin-top: 6px; }
.wf-sub { font: 600 13px var(--sans); color: var(--t-muted); margin-top: 6px; }
.wf-sub b { color: var(--acc); font: 800 13px var(--mono); }

.wf-group-title { font: 800 12px var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted-2); margin: 22px 0 10px; }

.wf-list { display: flex; flex-direction: column; gap: 10px; }
.wf-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--t-dim-2);
  border-radius: var(--r-m); padding: 14px 16px;
  transition: opacity 200ms ease, border-color 150ms ease;
}
.wf-row--warn { border-left-color: var(--amb); }
.wf-row--dispute { border-left-color: var(--amb); align-items: flex-start; }
.wf-row--static { border-left-color: var(--border-2); }
.wf-main { flex: 1; min-width: 0; }
.wf-name { font: 700 15px var(--sans); color: var(--t-hi); }
.wf-vs { font: 500 12px var(--sans); color: var(--t-dim); }
.wf-meta { font: 500 12px var(--sans); color: var(--t-muted-2); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.wf-actions { display: flex; gap: 8px; flex: none; }
.wf-actions--col { flex-direction: column; align-items: stretch; }
.wf-actions[hidden] { display: none; }

.wbtn {
  cursor: pointer; white-space: nowrap;
  font: 700 11px var(--sans); letter-spacing: .03em;
  padding: 9px 14px; border-radius: var(--r-s); border: 1px solid transparent;
  transition: filter 150ms ease, background 150ms ease, border-color 150ms ease;
}
.wbtn--ok { background: var(--acc); color: var(--on-acc); }
.wbtn--ok:hover { filter: brightness(1.08); }
.wbtn--warn { background: var(--amb); color: var(--on-amb); }
.wbtn--warn:hover { filter: brightness(1.06); }
.wbtn--ghost { background: var(--surface-2); color: var(--t-muted); border-color: var(--border-2); }
.wbtn--ghost:hover { color: var(--t-hi); border-color: var(--t-dim); }

.wf-done[hidden] { display: none; }
.done-pill {
  font: 700 11px var(--sans); letter-spacing: .03em; white-space: nowrap;
  padding: 7px 12px; border-radius: var(--r-full);
  background: var(--acc-container); color: var(--acc);
  border: 1px solid var(--acc-line);
}
.wf-row.is-done { opacity: .55; }
.wf-row.neg .done-pill { background: var(--danger-container); color: var(--danger); border-color: var(--danger-line); }
.wf-row.warn .done-pill { background: var(--amb-container); color: var(--amb); border-color: var(--amb-line); }

/* status pills */
.pill { font: 700 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-full); flex: none; }
.pill--overdue { background: var(--danger-container); color: var(--danger); }
.pill--pending { background: var(--amb-container); color: var(--amb); }
.pill--scheduled { background: var(--acc-container); color: var(--acc); }
/* Import-preview verdicts: what this row will do to the database. Same
   container roles as the pills above, no new hex. */
.pill--new { background: var(--acc-container); color: var(--acc); }
.pill--upd { background: var(--amb-container); color: var(--amb); }
.pill--arch { background: var(--neutral-container); color: var(--t-muted); }

/* dispute claims */
.dispute-claims { display: flex; gap: 26px; margin-top: 11px; flex-wrap: wrap; }
.claim { display: flex; flex-direction: column; gap: 3px; }
.claim-who { font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted-2); }
.claim-score { font: 700 16px var(--mono); color: var(--t-hi); }

/* reset control */
.demo-reset {
  cursor: pointer; font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--t-muted); background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-full); padding: 5px 12px; transition: color 150ms ease, border-color 150ms ease;
}
.demo-reset:hover { color: var(--t-hi); border-color: var(--t-dim); }

/* toast */
.demo-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 60;
  transform: translateX(-50%) translateY(12px);
  background: var(--acc); color: var(--on-acc); font: 700 13px var(--sans);
  padding: 11px 18px; border-radius: var(--r-s); box-shadow: 0 14px 30px -10px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease;
}
.demo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- send announcement (compose) ---- */
.compose { margin-top: 4px; }
.chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.chips-label { font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted-2); }
.chip {
  cursor: pointer; font: 600 11.5px var(--sans); color: var(--t-body);
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-full);
  padding: 6px 12px; transition: color 140ms ease, border-color 140ms ease;
}
.chip:hover { color: var(--acc); border-color: var(--acc-line); }
.char-count { font: 500 11px var(--mono); color: var(--t-muted-2); margin-top: 7px; text-align: right; }
.sent-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sent-actions .wbtn { text-decoration: none; padding: 11px 18px; }

/* ---- player info (roster management) ---- */
.plist { display: flex; flex-direction: column; gap: 6px; }
.prow {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-s);
  padding: 10px 14px; transition: border-color 150ms ease;
}
.prow:hover { border-color: var(--border-2); }
/* A .prow nested in a .panel would be --surface on --surface. Recede it to
   --surface-2, exactly as .need and .ins tiles do inside a panel. */
.panel .prow { background: var(--surface-2); }
.p-rank { font: 800 15px var(--mono); color: var(--acc); width: 46px; flex: none; }
.p-id { flex: 1; min-width: 0; }
.p-name { font: 700 14px var(--sans); color: var(--t-hi); }
/* Emails, member ids and phone numbers land here and have no spaces to break
   at, so a long one would otherwise widen the row past the viewport. */
.p-meta { font: 500 11.5px var(--sans); color: var(--t-muted); margin-top: 2px; overflow-wrap: anywhere; }
.p-controls { display: flex; align-items: center; gap: 6px; flex: none; }

/* Import preview: a row you can untick. The whole row is the label, so the hit
   area is the row rather than an 18px box — the same reasoning as .prow being
   the touch target elsewhere. An unticked row dims rather than disappearing, so
   the admin can see what they are excluding and change their mind. */
.prow--pick { cursor: pointer; }
.p-pick { flex: none; width: 18px; height: 18px; accent-color: var(--acc); cursor: pointer; }
.prow--pick:has(.p-pick:not(:checked)) { opacity: .45; }
.prow--pick:has(.p-pick:not(:checked)) .p-name { text-decoration: line-through; }
.icon-btn {
  cursor: pointer; width: 30px; height: 30px; border-radius: var(--r-xs);
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--t-muted);
  font-size: 11px; line-height: 1; transition: color 140ms ease, border-color 140ms ease;
}
.icon-btn:hover { color: var(--t-hi); border-color: var(--t-dim); }
.p-remove { padding: 7px 12px; }
.p-remove:hover { color: var(--danger); border-color: var(--danger-line); }

/* ---- new-season wizard ---- */
.wiz { max-width: 640px; margin: 6px auto 0; }
.wiz-steps { display: flex; align-items: center; gap: 10px; margin: 20px 0 22px; }
.wiz-step { display: flex; align-items: center; gap: 9px; flex: none; }
.wiz-num {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 800 12px var(--mono); color: var(--t-muted);
  background: var(--surface); border: 1px solid var(--border-2);
}
.wiz-slabel { display: none; font: 700 11px var(--sans); letter-spacing: .03em; color: var(--t-muted); white-space: nowrap; }
.wiz-step.is-active .wiz-num { background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
.wiz-step.is-active .wiz-slabel { color: var(--t-hi); }
.wiz-step.is-done .wiz-num { background: var(--acc-container); color: var(--acc); border-color: var(--acc-line); }
.wiz-bar { flex: 1; height: 1px; background: var(--border-2); }

.wiz-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-l); padding: 22px;
}
.wiz-panel[hidden] { display: none; }

/* The form primitives — .field, .field-row, .field-label, .field-hint,
   .field-input, .field-textarea, .field-err — moved to shared.css. A form field
   looks the same wherever it is and had no business living in an admin
   stylesheet; the score dialog is shared by an admin page and a player page.
   The .field-as-a-row trap (CLAUDE.md, HANDOFF §7a) moves with them: .field is
   still a COLUMN. */

.invite-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.invite-count { font: 600 12.5px var(--sans); color: var(--t-muted); }
.invite-count b { color: var(--acc); font: 800 13px var(--mono); }

.wiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }

/* skill range */
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row .field-input { flex: 1; }
.range-dash { font: 600 12px var(--sans); color: var(--t-muted); flex: none; }

/* segmented control */
.seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-s); flex-wrap: wrap; }
.seg-opt {
  font: 700 12px var(--sans); letter-spacing: .01em; color: var(--t-muted);
  background: transparent; border: none; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-xs); transition: background 140ms ease, color 140ms ease;
}
.seg-opt:not(.is-on):hover { color: var(--t-hi); }
.seg-opt.is-on { background: var(--acc); color: var(--on-acc); }

/* source panels */
.src-panel[hidden] { display: none; }
.invite-bar--total { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--divider); }
.invite-breakdown { font: 500 11.5px var(--sans); color: var(--t-muted-2); margin-top: 6px; line-height: 1.5; }
.invite-breakdown[hidden] { display: none; }
.invite-breakdown b { color: var(--t-hi); font-weight: 700; }
.invite-breakdown .dup { color: var(--acc); font-weight: 700; }
.invite-preview { margin-top: 10px; max-height: 190px; overflow-y: auto; display: flex; flex-wrap: wrap;
  gap: 6px; padding: 11px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2); }
.invite-preview[hidden] { display: none; }
.inv-name { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--sans);
  color: var(--t-body); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 4px 6px 4px 10px; white-space: nowrap; }
.inv-x { border: none; background: none; color: var(--t-dim); cursor: pointer; font: 700 13px var(--sans);
  line-height: 1; padding: 0 2px; border-radius: 50%; }
.inv-x:hover { color: var(--danger); }
.invite-reset { margin-top: 8px; font: 500 11.5px var(--sans); color: var(--t-muted-2); }
.invite-reset[hidden] { display: none; }
.invite-reset a { color: var(--acc); cursor: pointer; text-decoration: none; font-weight: 700; }
.invite-reset a:hover { text-decoration: underline; }
/* the "remove whole group" affordance on the group-selected confirmation */
.src-clear { border: none; background: none; color: var(--t-dim); cursor: pointer;
  font: 700 12px var(--sans); margin-left: 8px; }
.src-clear:hover { color: var(--danger); }
/* registration fee input */
.fee-row { display: flex; align-items: center; gap: 8px; }
.fee-currency { font: 700 15px var(--mono); color: var(--t-muted); flex: none; }
.fee-row .field-input { flex: 1; }

/* added-source tags (one per ladder / group) above the invite list */
.src-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.src-tags[hidden] { display: none; }
.src-tags-lbl { font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--t-dim); align-self: center; margin-right: 2px; }
.src-tag { display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--sans);
  border-radius: var(--r-full); padding: 6px 8px 6px 12px;
  color: var(--acc); border: 1px solid var(--acc-line);
  background: var(--acc-wash); }
.src-tag--group { color: var(--t-body); border-color: var(--border-2); background: var(--surface-2); }
.src-tag-n { font: 700 11px var(--mono); opacity: .8; }
.src-tag-x { border: none; background: none; color: currentColor; opacity: .7; cursor: pointer;
  font: 700 14px var(--sans); line-height: 1; padding: 0 2px; }
.src-tag-x:hover { opacity: 1; color: var(--danger); }

/* Excel uploader */
.uploader {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  border: 1.5px dashed var(--border-2); border-radius: var(--r-m); padding: 28px 20px;
  cursor: pointer; background: var(--surface-2); transition: border-color 150ms ease, background 150ms ease;
}
.uploader:hover { border-color: var(--t-dim); background: var(--surface-2); }
.uploader-ico { font-size: 26px; color: var(--t-muted); }
.uploader-main { font: 600 13.5px var(--sans); color: var(--t-body); }
.uploader-main .link { color: var(--acc); }
.uploader-sub { font: 500 11px var(--sans); color: var(--t-muted-2); }
.upload-result {
  margin-top: 12px; font: 600 12.5px var(--sans); color: var(--acc); text-align: center;
  background: var(--acc-wash);
  border: 1px solid var(--acc-line);
  border-radius: var(--r-s); padding: 10px 12px;
}
.upload-result[hidden] { display: none; }

.wiz-review { display: flex; flex-direction: column; }
.rev-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--divider); }
.rev-row:first-child { border-top: none; }
.rev-k { font: 600 12px var(--sans); color: var(--t-muted); }
.rev-v { font: 700 13.5px var(--sans); color: var(--t-hi); text-align: right; }

.wiz-success {
  text-align: center; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-l); padding: 40px 28px;
}
.wiz-success[hidden] { display: none; }
.wiz-check {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  font: 800 32px var(--sans); color: var(--on-acc); background: var(--acc);
}
.wiz-done-title { font: 800 26px var(--cond); letter-spacing: .02em; text-transform: uppercase; color: var(--t-hi); }
.wiz-done-sub { font: 400 13.5px/1.6 var(--sans); color: var(--t-muted); max-width: 420px; margin: 12px auto 22px; }
.wiz-done-btn { display: inline-block; text-decoration: none; padding: 11px 20px; }

/* ---- DESKTOP (>= 880px) -----------------------------------------------------
   This file used to be desktop-first with a max-width override block, which is
   how it ended up "desktop-dense" with three media queries covering seven
   declarations while 37 templates grew on top of it: every new component had to
   be written twice and the phone half was the half that got forgotten.

   Now the base rules ARE the phone rules and this block ADDS desktop, the same
   polarity as climb.css and bracket.css. Every declaration here is the value the
   base rule used to carry, so at >= 880px the cascade resolves to exactly what
   it did before the inversion.

   The admin UX is unchanged: the five-step wizard and the drag-to-edit draw are
   still desktop jobs (HANDOFF §7). They simply no longer overflow.
   -------------------------------------------------------------------------- */
@media (min-width: 880px) {
  .ah { padding-left: 30px; padding-right: 30px; }
  .admin-main { padding: 22px 30px 60px; }
  .admin-grid { grid-template-columns: minmax(0, 760px); }
  .season-band { flex-direction: row; align-items: flex-start; }
  .wf-row { flex-wrap: nowrap; }
  /* .field-row's desktop direction moved to shared.css with the class. */
  .wiz-slabel { display: block; }
}

/* =========================================================================
   Tournaments
   Card grid mirrors the ladder cards on the site home (same .lgrid/.lcard
   recipe, lifted out of that page's inline styles) so a tournament card and
   a ladder card are visibly the same object.
   ========================================================================= */

.page-title { font: 800 30px var(--cond); letter-spacing: .03em; text-transform: uppercase; color: var(--t-hi); margin: 8px 0 4px; }
.page-sub { font: 400 13.5px/1.6 var(--sans); color: var(--t-muted); margin: 0 0 22px; }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-head .panel-title { margin-bottom: 0; }


.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.lcard {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: 15px 16px 16px;
  text-decoration: none; color: var(--t-body); cursor: pointer;
}
.lcard:hover { border-color: var(--t-dim); }
.lcard-name { font: 800 17px/1.1 var(--cond); letter-spacing: .02em; text-transform: uppercase; color: var(--t-hi); padding-right: 28px; }
.lcard-stats { font: 500 12px var(--mono); color: var(--t-muted); }
.lcard-health { display: flex; align-items: center; gap: 7px; font: 600 12.5px var(--sans); color: var(--t-body); }
.lcard-notif {
  position: absolute; top: 11px; right: 11px; min-width: 23px; height: 23px; padding: 0 6px;
  display: grid; place-items: center; border-radius: var(--r-full);
  background: var(--amb); color: var(--on-amb); font: 800 11.5px var(--mono);
}
.lcard--new {
  border-style: dashed; border-color: var(--border-2); background: transparent;
  align-items: center; justify-content: center; text-align: center; color: var(--t-muted); min-height: 108px;
}
.lcard--new:hover { color: var(--acc); border-color: var(--acc-line); }
.lcard-plus { font: 300 30px/1 var(--sans); }

/* ---- field list ---- */
.fld-group { margin-bottom: 16px; }
.fld-group:last-child { margin-bottom: 0; }
.fld-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 14px; }
.fld-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; border-bottom: 1px solid var(--divider); }
.fld-name { flex: 1; font: 600 13px var(--sans); color: var(--t-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fld-rank { font: 500 11px var(--mono); color: var(--t-muted); }
/* A player swapped out but not yet saved, or already withdrawn. */
.fld-row.is-out .fld-name { color: var(--t-dim); text-decoration: line-through; }
.fld-row.is-dirty { box-shadow: inset 2px 0 0 var(--amb); }
.fld-row.is-dirty .fld-name { color: var(--amb); }

/* ---- tournament wizard: the drag-and-drop picker ---- */
.draw-readout { font: 700 12px var(--mono); letter-spacing: .04em; color: var(--acc); margin-top: 9px; }
.draw-readout.is-warn { color: var(--amb); }

/* Bulk fill. Wraps by default because it is three buttons and a label on a
   375px column; the .abtn tap-target rule in the phone block covers the rest. */
.pick-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.pick-bulk .pick-hint { margin-right: 2px; }

.pick { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pick-col { min-width: 0; }
.pick-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; min-height: 34px; }
.pick-search { max-width: 140px; padding: 7px 10px; font-size: 12.5px; }
.pick-hint { font: 500 11px var(--sans); color: var(--t-muted-2); }

.pick-list {
  min-height: 260px; max-height: 420px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r-m);
  background: var(--surface-2); padding: 8px; display: flex;
  flex-direction: column; gap: 6px;
}
.pick-list--drop { border-style: dashed; border-color: var(--border-2); }
.pick-list.is-over { border-color: var(--acc); background: var(--acc-wash); }
.pick-empty { padding: 22px 12px; text-align: center; font: 500 12.5px/1.5 var(--sans); color: var(--t-dim); }

.pcard {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-s); padding: 8px 9px; cursor: grab;
}
.pcard:hover { border-color: var(--t-dim); }
.pcard.is-dragging { opacity: .4; cursor: grabbing; }
.pcard-seed { font: 700 11px var(--mono); color: var(--acc); min-width: 15px; text-align: right; }
.pcard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pcard-name { font: 600 13px var(--sans); color: var(--t-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-meta { font: 500 10.5px var(--mono); color: var(--t-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-btn {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--r-xs);
  border: 1px solid var(--border-2); background: transparent;
  color: var(--t-muted); font: 500 15px/1 var(--sans); cursor: pointer;
}
.pcard-btn:hover { color: var(--acc); border-color: var(--acc-line); }

.invite-note { border: 1px dashed var(--border-2); border-radius: var(--r-m); padding: 18px 20px; }

/* ---- action bar above a generated draw ---- */
.actbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 16px; }
.actbar form { margin: 0; }
.actbar-gap { flex: 1; }

/* ---- unsaved draw edits ---- */
.savebar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--amb);
  border-radius: var(--r-m); padding: 11px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  min-width: min(420px, calc(100vw - 32px));
}
.savebar-count { font: 600 13px var(--sans); color: var(--amb); }
.savebar-count b { font-family: var(--mono); }
.savebar-gap { flex: 1; }

/* ---- replacement picker ---- */
.pick-dlg {
  border: 1px solid var(--border-2); border-radius: var(--r-l);
  background: var(--surface); color: var(--t-body);
  padding: 20px; width: min(460px, calc(100vw - 32px));
}
.pick-dlg::backdrop { background: rgba(0, 0, 0, .6); }
.pick-dlg .pick-list { min-height: 180px; max-height: 300px; margin-top: 10px; }

/* ---- per-round scoring ---- */
.rnd-list { display: flex; flex-direction: column; gap: 7px; }
.rnd-row {
  display: grid; grid-template-columns: 1fr; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-s); padding: 9px 12px;
}
.rnd-name { font: 800 13px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--t-hi); }
.rnd-sub { font: 500 11px var(--mono); color: var(--t-dim); }
.rnd-sel { padding: 8px 10px; font-size: 12.5px; }
.rnd-row.is-locked { opacity: .55; }
.rnd-locked { font: 500 11px var(--mono); color: var(--amb); }

/* ---- a stated rule, not a control ---- */
.rule-card { border: 1px solid var(--border); border-radius: var(--r-m); background: var(--surface-2); padding: 15px 17px; }
.rule-title { font: 700 12px var(--sans); color: var(--t-hi); margin-bottom: 9px; }
.rule-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.rule-list li { font: 500 12.5px/1.5 var(--sans); color: var(--t-body); }
.rule-list b { color: var(--acc); font-weight: 700; }
.rule-note { font: 500 11.5px/1.5 var(--sans); color: var(--t-muted-2); margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--divider); }

/* The round-settings row is three columns once there is room for three. */
@media (min-width: 720px) {
  .rnd-row { grid-template-columns: 60px 1fr 260px; gap: 12px; }
}

/* ---- wizard review ---- */
.rev-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--divider); }
.rev-k { font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-muted-2); }
.rev-v { font: 600 13.5px var(--sans); color: var(--t-hi); text-align: right; }

/* The field picker is two side-by-side columns only when they fit. */
@media (min-width: 720px) {
  .pick { grid-template-columns: 1fr 1fr; }
  .pick-search { max-width: 190px; }
}

/* ---- result dialog ----
   .report-dlg, .radio-row and .dlg-actions moved to shared.css, with the score
   control itself. The dialog is included by an admin page AND a player page,
   so its own styling cannot live in the admin sheet. */


/* =========================================================================
   Phone affordances

   None of this existed at any width before: the file had no rule below 720px,
   no touch-target sizing and no (hover: none) handling at all.
   ========================================================================= */

/* `.field-input { min-width: 0 }` and `.field-hint`'s overflow-wrap moved to
   shared.css WITH their classes. Both are §7d fixes, and a fix left behind here
   would be a phone bug that only appears on the player shell. */

/* Emails, member ids and raw CSV lines have no break opportunity, so without
   this they widen their container past the viewport instead of wrapping. */
.page-sub, .wf-meta, .rev-v, .ins-sub, .hl-text, .invite-breakdown { overflow-wrap: anywhere; }
code { overflow-wrap: anywhere; }

/* A row with controls beside it cannot keep both legible on a phone: .p-id was
   being squeezed to 78px of 303px on the administrators list. Below this width
   the controls wrap under the name and take the full row. */
@media (max-width: 560px) {
  .prow { flex-wrap: wrap; }
  .p-controls { width: 100%; justify-content: flex-end; }
  .actbar { gap: 8px; }
  .actbar .abtn { flex: 1 1 auto; text-align: center; }
}

/* Touch. Reasoned exactly as bracket.css:157 already does for the bracket's own
   controls: there is no hover to reveal anything, and a 24-30px target is far
   below the ~44px a finger needs. Keyed on (hover: none) rather than on width,
   because the input device is the actual question — a small window on a desktop
   still has a mouse. */
@media (hover: none) {
  .icon-btn { width: 44px; height: 44px; font-size: 14px; }
  .inv-x, .src-tag-x, .src-clear { min-width: 44px; min-height: 44px; padding: 0 10px; }
  /* .abtn's 44px moved to shared.css with the class — the player shell does
     not load this file, so leaving it here loses the touch target there. */
  .demo-reset, .p-remove, .act-btn, .wbtn { min-height: 44px; }
  .ah-link, .ah-back { padding: 10px 12px; }
  /* Hover styling is a lie on touch — it sticks after a tap until you tap
     elsewhere, so a "hovered" row stays highlighted and reads as selected. */
  .prow:hover, .need:hover, .wf-row:hover { border-color: var(--border); }
  .need:hover { transform: none; }
}