/* SCL V2 Hub — restyled onto the shared design system (PACKET SCL-G step 7).
   design-tokens.css + scl-components.css are linked before this file (see
   index.html) and own the base :root tokens and .scl-* component classes
   (nav, scoreboard phase strip, page-header, card, chip system, footer).
   This file keeps ONLY hub-specific layout: the base page reset, the bento
   grid + tool-card/team-list device (not lifted into the shared system —
   see docs/design/DESIGN_SYSTEM.md), and the commissioner admin drawer
   (restyled here with tokens; markup/behavior untouched, see index.html). */

/* ---------- Base reset (mirrors direction-9/hub.html's own reset) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--scl-page);
  color: var(--scl-ink);
  font-family: var(--scl-font-body);
  font-size: var(--scl-fs-15);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--scl-font-display); color: var(--scl-ink); margin: 0; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; margin: 0; padding: 0; }
svg { display: block; }
img { max-width: 100%; }

:focus-visible {
  outline: var(--scl-focus-width) solid var(--scl-focus-color);
  outline-offset: var(--scl-focus-offset);
  border-radius: var(--scl-focus-radius);
}
.scl-nav :focus-visible, .scl-scoreboard :focus-visible { outline-color: var(--scl-focus-color-chrome); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* nav icon-button hover cue (not present in direction-9's own CSS, kept
   minimal + token-only for a clickable-affordance nicety) */
.scl-icon-btn:hover { background: var(--scl-overlay-white-10); }

/* ---------- Page content wrap ---------- */
.wrap { max-width: var(--scl-content-max); margin: 0 auto; padding: 0 var(--scl-s5) var(--scl-s8); }

/* ---------- Bento grid (League Tools section) ----------
   Ported from direction-9/hub.html's .bento/.card span rules — hub-page-
   specific geometry, not part of the shared component set. */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--scl-s5); }

.teams-card { grid-column: span 6; display: flex; flex-direction: column; }

/* Right-hand tools column (Graham's step-8 gate feedback: the old flat
   6/4/2 bento split read too small/off for Rules & History). Contracts
   sits full-width on top; the remaining four cards form a flush 2x2 grid
   below it, sharing the same left/right edges as the Contracts card. */
.tools-col { grid-column: span 6; display: grid; grid-template-columns: 1fr 1fr; gap: var(--scl-s5); }
.tools-col .contracts { grid-column: 1 / -1; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--scl-s3); flex-wrap: wrap; }
.card-head h2 { font-size: var(--scl-fs-17); font-weight: var(--scl-fw-semibold); text-transform: uppercase; letter-spacing: var(--scl-ls-04); }
.teams-card .hint { color: var(--scl-ink-soft); font-size: var(--scl-fs-13); margin: 4px 0 0; }

.team-list { margin-top: var(--scl-s4); display: flex; flex-direction: column; }
.team-row {
  display: flex; align-items: center; gap: var(--scl-s3);
  padding: var(--scl-s2); border-radius: var(--scl-radius-md);
  border-bottom: var(--scl-border-hairline-soft);
  min-height: 44px;
  transition: background var(--scl-transition-fast);
}
.team-list li:last-child .team-row { border-bottom: none; }
.team-row:hover { background: var(--scl-hairline-soft); }
.team-name { flex: 1; font-weight: var(--scl-fw-medium); font-size: var(--scl-fs-14); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-chev { width: 16px; height: 16px; color: var(--scl-ink-soft); flex: none; }
.tr-chev svg { width: 100%; height: 100%; }

/* tool cards - grid placement now comes entirely from .tools-col's nested
   2-col grid above (Contracts full-width via `.tools-col .contracts`, the
   other four default to 1-of-2 columns, 2 per row). No align-self:start
   here so picks/rules and keeper/draft stretch to equal height per row. */
.tool-card { display: flex; flex-direction: column; gap: var(--scl-s3); }
.tool-top { display: flex; align-items: center; justify-content: space-between; }
.icon-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--scl-radius-md);
  background: var(--scl-green-soft); color: var(--scl-green);
}
.tool-card.soon .icon-wrap { background: var(--scl-hairline-soft); color: var(--scl-ink-soft); }
.icon-wrap svg { width: 19px; height: 19px; }
.tool-name { font-size: var(--scl-fs-16); font-weight: var(--scl-fw-semibold); text-transform: uppercase; letter-spacing: var(--scl-ls-02); }
.tool-desc { color: var(--scl-ink-soft); font-size: var(--scl-fs-135); line-height: 1.55; margin: 0; }
.tool-card.soon { opacity: .85; }
.tool-foot {
  margin-top: auto; display: flex; flex-direction: column; gap: var(--scl-s2);
  padding-top: var(--scl-s3); border-top: var(--scl-border-hairline);
}
.tool-meta { display: flex; flex-wrap: wrap; gap: 6px; }
/* .scl-cta hover + a.scl-card:hover border-color already come from
   scl-components.css (they key off .scl-card, which every tool-card has) */
/* WORKAROUND (not a hub-only choice - flagging for scl-components.css):
   .scl-cta svg only gets `flex:none` from the shared file, no width/height.
   direction-9's own markup hardcoded width="14" height="14" on that <svg>
   tag; our app.js svg() helper doesn't set size attributes, so the browser
   falls back to its ~300x150 default intrinsic SVG size and blows out the
   card / causes page-level horizontal overflow. Sizing it here per
   DESIGN_SYSTEM.md's own rule that intrinsic one-off geometry stays a
   literal value, not a token. */
.scl-cta svg { width: 14px; height: 14px; }

/* ---------- Admin drawer (commissioner launchpad) ----------
   Markup/ids/classes are unchanged from the pre-restyle hub (see index.html
   comment + app.js) — appearance only, restyled onto scl-* tokens. */
.admin-overlay { position: fixed; inset: 0; background: rgba(3,8,16,0.55); backdrop-filter: blur(3px); z-index: 90; display: none; }
.admin-overlay.show { display: block; }
.admin-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw;
  background: var(--scl-card); border-left: var(--scl-border-hairline); z-index: 100;
  transform: translateX(100%); transition: transform 0.26s cubic-bezier(0.16,1,0.3,1);
  display: flex; flex-direction: column; box-shadow: -20px 0 60px -20px rgba(0,0,0,0.35);
}
.admin-drawer.show { transform: translateX(0); }
.admin-head { display: flex; align-items: center; justify-content: space-between; padding: var(--scl-s5) var(--scl-s5); border-bottom: var(--scl-border-hairline); }
.admin-head-title { display: flex; align-items: center; gap: var(--scl-s3); }
.admin-head-title .minibadge { background: var(--scl-green); color: var(--scl-white); }
.admin-head h3 { margin: 0; font-size: var(--scl-fs-15); font-weight: var(--scl-fw-semibold); text-transform: uppercase; letter-spacing: var(--scl-ls-02); }
.admin-close { background: none; border: none; color: var(--scl-ink-soft); cursor: pointer; font-size: 22px; line-height: 1; }
.admin-close:hover { color: var(--scl-ink); }
.admin-body { padding: var(--scl-s4) var(--scl-s5); overflow-y: auto; }
.admin-section-label { font-family: var(--scl-font-display); font-size: var(--scl-fs-13); font-weight: var(--scl-fw-semibold); text-transform: uppercase; letter-spacing: var(--scl-ls-10); color: var(--scl-green); margin: 4px 0 var(--scl-s3); }

.minibadge {
  font-size: var(--scl-fs-105); font-weight: var(--scl-fw-bold); letter-spacing: var(--scl-ls-03);
  color: var(--scl-green); background: var(--scl-green-soft);
  padding: 2px 6px; border-radius: var(--scl-radius-xs); text-transform: uppercase;
}

.admin-link {
  display: flex; align-items: center; gap: var(--scl-s3); padding: var(--scl-s3) var(--scl-s3); border-radius: var(--scl-radius-md);
  border: var(--scl-border-hairline); background: var(--scl-page); margin-bottom: var(--scl-s2);
  text-decoration: none; color: var(--scl-ink); transition: background var(--scl-transition-fast), border-color var(--scl-transition-fast);
}
.admin-link:hover { border-color: var(--scl-green); background: var(--scl-hairline-soft); }
.admin-link .al-icon { width: 36px; height: 36px; border-radius: var(--scl-radius-md); background: var(--scl-green-soft); display: grid; place-items: center; color: var(--scl-green); flex-shrink: 0; }
.admin-link .al-icon svg { width: 17px; height: 17px; }
.admin-link .al-text { flex: 1; min-width: 0; }
.admin-link .al-name { font-size: var(--scl-fs-135); font-weight: var(--scl-fw-semibold); }
.admin-link .al-desc { font-size: var(--scl-fs-11); color: var(--scl-ink-soft); margin-top: 2px; }
.admin-link .al-chev { color: var(--scl-ink-soft); }
.admin-status-row { display: flex; align-items: center; justify-content: space-between; padding: var(--scl-s3) 0; border-bottom: var(--scl-border-hairline-soft); font-size: var(--scl-fs-125); }
.admin-status-row:last-child { border-bottom: none; }
.admin-status-row .asr-k { color: var(--scl-ink-soft); }
.admin-status-row .asr-v { font-family: var(--scl-font-mono); color: var(--scl-ink); font-size: var(--scl-fs-12); }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; }
  .teams-card, .tools-col { grid-column: span 1; grid-row: auto; }
  .tools-col { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .scl-nav-inner { padding: var(--scl-s3) var(--scl-s4); }
  .scl-brand-name { font-size: var(--scl-fs-13); }
  .scl-season-badge { padding: 0 var(--scl-s3); font-size: var(--scl-fs-105); }
  .scl-scoreboard-outer { padding: var(--scl-s3) var(--scl-s4); }
  .wrap { padding: 0 var(--scl-s4) var(--scl-s7); }
  .bento { gap: var(--scl-s4); }
}