/* ============================================================================
   hubs.css — per-hub layout regions.

   OWNERSHIP: each hub agent appends ONE region below, delimited exactly like
   the Overview region. Rules:
     • Region header comment: /* ===== HUB: <id> ===== *(slash)/
     • Prefix every selector with the hub's namespace class `.hub-<id>`
       (the hub root element carries this class — see DESIGN.md).
     • Layout only (grids, gaps, hub-specific composition). NEVER restyle a
       shared component from components.css; consume tokens from tokens.css.
     • Do not edit another hub's region or this header block.

   Region order (append yours at the bottom, keep this list current):
     overview · the-duo · players · maps · fights · economy · action-plan
   ========================================================================== */

/* ===== HUB: overview ===== (builder-1, reference implementation) ===== */
.hub-overview { display: flex; flex-direction: column; }

/* Hero verdict block */
.ov-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s5);
  align-items: start;
}
.ov-hero__lede { display: flex; flex-direction: column; gap: var(--s4); }
.ov-hero__title { font-size: var(--fs-hero); line-height: 1.05; }
.ov-hero__title .u { color: var(--player-a); }
.ov-hero__title .k { color: var(--player-b); }
.ov-hero__blurb { color: var(--ink-muted); max-width: 52ch; font-size: var(--fs-body); }
.ov-hero__players { display: flex; gap: var(--s3); flex-wrap: wrap; }
.ov-id {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-1);
  background: var(--surface-2); border: 1px solid var(--border);
}
.ov-id__name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-body); }
.ov-id__name.u { color: var(--player-a); }
.ov-id__name.k { color: var(--player-b); }
.ov-id__meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); }
.ov-id__agents { font-size: var(--fs-xs); color: var(--ink-muted); }

/* Form strip (fills the lede column with scope-sensitive reads) */
.ov-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.ov-form__cell {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s4); border-radius: var(--r-1);
  background: var(--surface-2); border: 1px solid var(--border);
}

/* Percentile ladder (the climb) */
.ov-climb { display: flex; flex-direction: column; gap: var(--s4); }
.ov-climb__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.ov-climb__bar { position: relative; height: 12px; border-radius: var(--r-pill); background: var(--surface-sunken); border: 1px solid var(--border); overflow: hidden; }
.ov-climb__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill); }
.ov-climb__marks { position: relative; height: 44px; margin-top: var(--s2); }
.ov-climb__mark { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.ov-climb__mark::before { content: ""; width: 1px; height: 10px; background: var(--border-strong); }
.ov-climb__mark-tier { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-semi); white-space: nowrap; }
.ov-climb__mark-pct { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); white-space: nowrap; }
.ov-climb__mark--now .ov-climb__mark-tier { color: var(--player-a); }
.ov-climb__mark--goal .ov-climb__mark-tier { color: var(--gold-ink); }
.ov-climb__mark--goal::before { background: var(--gold-line); }

/* Trajectory chart */
.ov-traj { position: relative; }
.ov-traj__wrap { position: relative; }

/* Coverage block */
.ov-cov { display: grid; grid-template-columns: repeat(3, 1fr) 1.4fr; gap: 0; align-items: stretch; }
.ov-cov__stat { padding: var(--s4) var(--s5); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.ov-cov__stat:first-child { padding-left: 0; }
.ov-cov__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.65rem; font-weight: var(--fw-med); color: var(--ink); letter-spacing: -0.01em; }
.ov-cov__lbl { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint); }
.ov-cov__scopes { padding: var(--s4) 0 var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s2); font-size: var(--fs-sm); color: var(--ink-muted); }
.ov-cov__scope { display: flex; align-items: center; gap: var(--s3); }
.ov-cov__scope .mono { color: var(--ink); }
.ov-cov__scope-tag { font-family: var(--font-mono); font-size: var(--fs-xs); min-width: 88px; color: var(--ink-faint); }

/* Verdict grid */
.ov-verdicts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }

/* Footnotes (confidence sources) */
.ov-notes { display: flex; flex-direction: column; gap: var(--s2); font-size: var(--fs-sm); color: var(--ink-faint); }
.ov-notes__item { display: flex; gap: var(--s3); align-items: baseline; }
.ov-notes__item .mono { color: var(--ink-muted); flex: none; }

@media (max-width: 860px) {
  .ov-hero { grid-template-columns: 1fr; }
  .ov-verdicts { grid-template-columns: 1fr; }
  .ov-cov { grid-template-columns: repeat(3, 1fr); }
  .ov-cov__scopes { grid-column: 1 / -1; padding-left: 0; padding-top: var(--s4); border-top: 1px solid var(--border); }
  .ov-cov__stat:nth-child(3) { border-right: none; }
}

/* ===== HUB: players ===== (players agent — Casual ⇆ Kolerocks profiles) ===== */
.hub-players { display: flex; flex-direction: column; }

/* header + player toggle */
.hub-players .pl-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6); }
.hub-players .pl-head__id { display: flex; align-items: center; gap: var(--s3); }
.hub-players .pl-head__name { font-size: var(--fs-h1); line-height: 1.05; }
.hub-players .pl-head__name.u { color: var(--player-a); }
.hub-players .pl-head__name.k { color: var(--player-b); }
.hub-players .pl-head__handle { font-size: var(--fs-xs); color: var(--ink-faint); }

.hub-players .pl-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-2); background: var(--surface-1); border: 1px solid var(--border); }
.hub-players .pl-toggle__opt { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px var(--s4); border-radius: var(--r-1); background: transparent; border: 1px solid transparent; color: var(--ink-muted); cursor: pointer; font-family: var(--font-display); font-weight: var(--fw-med); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.hub-players .pl-toggle__opt:hover { background: var(--surface-3); color: var(--ink); }
.hub-players .pl-toggle__opt[aria-pressed="true"] { background: var(--surface-2); border-color: var(--border-strong); color: var(--ink); }
.hub-players .pl-toggle__opt--u[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--player-a); }
.hub-players .pl-toggle__opt--k[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--player-b); }
.hub-players .pl-toggle__sw { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.hub-players .pl-toggle__role { font-size: var(--fs-xs); color: var(--ink-faint); }

/* stat tile (shared little unit) */
.hub-players .pl-stat { display: flex; flex-direction: column; gap: 3px; padding: var(--s4); border-radius: var(--r-1); background: var(--surface-2); border: 1px solid var(--border); }
.hub-players .pl-stat__val { font-size: 1.5rem; font-weight: var(--fw-med); color: var(--ink); letter-spacing: -0.01em; }
.hub-players .pl-stat__lbl { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; }
.hub-players .pl-stat__note { font-size: var(--fs-xs); color: var(--ink-muted); }

/* 2 — aim profile */
.hub-players .pl-aim__top { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s5); align-items: stretch; }
.hub-players .pl-aim__compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: center; padding: var(--s5); border-radius: var(--r-2); background: var(--surface-2); border: 1px solid var(--border); }
.hub-players .pl-aim__side { display: flex; flex-direction: column; gap: 6px; }
.hub-players .pl-aim__side--k { text-align: right; align-items: flex-end; }
.hub-players .pl-aim__vs { color: var(--ink-faint); font-size: var(--fs-sm); text-align: center; }
.hub-players .pl-aim__caveat { padding: var(--s4); display: flex; flex-direction: column; justify-content: center; }
.hub-players .pl-aim__context { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.hub-players .pl-aim__agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: var(--s3); }
.hub-players .pl-aim__agent { display: flex; flex-direction: column; gap: 8px; padding: var(--s3) var(--s4); border-radius: var(--r-1); background: var(--surface-2); border: 1px solid var(--border); }
.hub-players .pl-aim__agent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hub-players .pl-aim__agent-name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-body); }
.hub-players .pl-aim__agent-role { font-size: 10px; color: var(--ink-faint); }

/* 3 — the climb */
.hub-players .pl-climb-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s4); align-items: start; }
.hub-players .pl-flat__rows { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.hub-players .pl-flat__row { display: flex; justify-content: space-between; gap: var(--s3); padding: 8px 0; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.hub-players .pl-flat__metric { color: var(--ink); }
.hub-players .pl-flat__ext { color: var(--ink-muted); text-align: right; }

/* 4 — agent pool */
.hub-players .pl-sig { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-bottom: var(--s5); }
.hub-players .pl-sig__card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border-radius: var(--r-2); background: var(--surface-2); border: 1px solid var(--border-strong); }
.hub-players .pl-sig__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hub-players .pl-sig__agent { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-h3); }
.hub-players .pl-sig__role { font-size: var(--fs-xs); color: var(--ink-faint); }
.hub-players .pl-sig__foot { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); }
.hub-players .pl-sig__foot .mono { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-muted); }

.hub-players .pl-pool { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.hub-players .pl-slot { padding: var(--s4); border-radius: var(--r-2); background: var(--surface-1); border: 1px solid var(--border); }
.hub-players .pl-slot__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--border); }
.hub-players .pl-slot__label { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-body); }
.hub-players .pl-slot__count { font-size: var(--fs-xs); }
.hub-players .pl-slot__rows { display: flex; flex-direction: column; gap: 2px; }
.hub-players .pl-agent { display: grid; grid-template-columns: 1.1fr auto; grid-template-areas: "name chip" "meta meta"; gap: 4px var(--s3); align-items: center; padding: 8px; border-radius: var(--r-xs); }
.hub-players .pl-agent--lead { background: var(--surface-3); }
.hub-players .pl-agent__name { grid-area: name; font-weight: var(--fw-med); display: inline-flex; align-items: center; gap: 8px; }
.hub-players .pl-agent__lead-tag { font-size: 9px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint); }
.hub-players .pl-agent .ratechip { grid-area: chip; justify-self: end; }
.hub-players .pl-agent__shrunk { grid-area: meta; font-size: var(--fs-xs); color: var(--ink-muted); }
.hub-players .pl-agent__meta { justify-self: end; grid-area: meta; grid-column: 2; font-size: var(--fs-xs); text-align: right; }

/* 5 — utility */
.hub-players .pl-util__note, .hub-players .pl-clutch__note { padding: var(--s4); }
.hub-players .pl-ak { display: flex; flex-direction: column; gap: 2px; }
.hub-players .pl-ak__row { display: grid; grid-template-columns: 1.2fr auto 1fr auto; gap: var(--s3); align-items: center; padding: 10px var(--s3); border-radius: var(--r-xs); }
.hub-players .pl-ak__row:nth-child(odd) { background: var(--surface-2); }
.hub-players .pl-ak__agent { display: flex; flex-direction: column; gap: 1px; }
.hub-players .pl-ak__agent > span:first-child { font-weight: var(--fw-med); }
.hub-players .pl-ak__agent .mono { font-size: 10px; }
.hub-players .pl-ak__base { font-size: var(--fs-xs); text-align: right; }
.hub-players .pl-ak__delta { font-size: var(--fs-sm); font-weight: var(--fw-med); text-align: right; min-width: 56px; }
.hub-players .pl-ak__delta--up { color: var(--ink); }
.hub-players .pl-ak__delta--down { color: var(--ink-muted); }
.hub-players .pl-ak__delta--flat { color: var(--ink-faint); }
.hub-players .pl-util__casts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }

/* 6 — clutch */
.hub-players .pl-clutch__ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); }
.hub-players .pl-clutch__rung { display: flex; flex-direction: column; gap: 8px; padding: var(--s4); border-radius: var(--r-1); background: var(--surface-2); border: 1px solid var(--border); }
.hub-players .pl-clutch__scn { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-h3); color: var(--ink); }
.hub-players .pl-clutch__wl { font-size: var(--fs-xs); }
.hub-players .pl-clutch__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }

/* responsive */
@media (max-width: 900px) {
  .hub-players .pl-aim__top,
  .hub-players .pl-climb-grid { grid-template-columns: 1fr; }
  .hub-players .pl-pool { grid-template-columns: 1fr; }
  .hub-players .pl-sig,
  .hub-players .pl-clutch__meta { grid-template-columns: 1fr; }
  .hub-players .pl-aim__context,
  .hub-players .pl-util__casts { grid-template-columns: repeat(2, 1fr); }
  .hub-players .pl-clutch__ladder { grid-template-columns: repeat(2, 1fr); }
  .hub-players .pl-ak__row { grid-template-columns: 1fr auto; grid-template-areas: "agent chip" "base delta"; }
}

/* ===== HUB: the-duo ===== (duo agent) ===== */
.hub-duo { display: flex; flex-direction: column; }

/* verdict movement — 3-card opener */
.hub-duo .duo-verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }

/* record */
.hub-duo .duo-rec { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s6); align-items: center; }
.hub-duo .duo-rec__left { border-right: 1px solid var(--border); padding-right: var(--s6); }
.hub-duo .duo-rec__stats { display: flex; gap: var(--s6); margin-bottom: var(--s4); }
.hub-duo .duo-rec__stat { display: flex; flex-direction: column; gap: 2px; }
.hub-duo .duo-rec__num { font-size: 2rem; font-weight: var(--fw-med); color: var(--ink); letter-spacing: -0.02em; }
.hub-duo .duo-rec__num.u { color: var(--player-a); }
.hub-duo .duo-rec__lbl { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint); }
.hub-duo .duo-rec__bar { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; gap: 2px; background: var(--surface-sunken); }
.hub-duo .duo-rec__seg { display: block; }
.hub-duo .duo-rec__seg--w { background: var(--player-a); }
.hub-duo .duo-rec__seg--l { background: var(--surface-3); }
.hub-duo .duo-rec__seg--t { background: var(--ink-faint); }

/* spacing — chart + side */
.hub-duo .duo-spacing { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s4); align-items: start; }
.hub-duo .duo-spacing__side { display: flex; flex-direction: column; gap: var(--s4); }
.hub-duo .duo-band-lbl { fill: var(--ink); font-weight: var(--fw-med); }
.hub-duo .duo-band-share { fill: var(--ink-muted); font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums; }
.hub-duo .duo-band-n { fill: var(--ink-faint); font-family: var(--font-mono); font-size: 9px; font-variant-numeric: tabular-nums; }
.hub-duo .duo-insight { display: flex; flex-direction: column; }

/* spacing receipts table */
.hub-duo .duo-tbl { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-2); overflow: hidden; background: var(--surface-2); }
.hub-duo .duo-tbl__head, .hub-duo .duo-tbl__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); }
.hub-duo .duo-tbl__head { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--border); }
.hub-duo .duo-tbl__row { border-top: 1px solid var(--border-faint); }
.hub-duo .duo-tbl__row:first-of-type { border-top: none; }
.hub-duo .duo-tbl__band { display: inline-flex; align-items: center; gap: var(--s3); font-size: var(--fs-sm); color: var(--ink); }
.hub-duo .duo-tbl__dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.hub-duo .duo-tbl__dot.is-trade { background: var(--ink); }
.hub-duo .duo-tbl__dot.is-notrade { background: transparent; border: 1px dashed var(--border-strong); }
.hub-duo .duo-tbl__cell { display: flex; }

/* trades */
.hub-duo .duo-trades { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start; }
.hub-duo .duo-partner__frac { font-size: 1.4rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.hub-duo .duo-net__stat { display: flex; flex-direction: column; gap: var(--s2); align-items: center; }
.hub-duo .duo-h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--ink); }

/* openings */
.hub-duo .duo-open { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--s4); align-items: start; }
.hub-duo .duo-crit { display: flex; flex-direction: column; gap: var(--s3); }
.hub-duo .duo-crit__row { display: grid; grid-template-columns: minmax(0,1fr) 90px auto; gap: var(--s3); align-items: center; }
.hub-duo .duo-crit__lbl { font-size: var(--fs-sm); color: var(--ink-muted); }
.hub-duo .duo-crit__track { height: 8px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; }
.hub-duo .duo-crit__fill { display: block; height: 100%; background: var(--ink-muted); border-radius: var(--r-pill); }
.hub-duo .duo-crit__n { font-size: var(--fs-sm); color: var(--ink); text-align: right; }
.hub-duo .duo-open__anchor { margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-1); }

/* economy */
.hub-duo .duo-econ { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s4); align-items: start; }
.hub-duo .duo-warn { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border-radius: var(--r-1); background: var(--surface-sunken); border: 1px solid var(--border); }
.hub-duo .duo-warn__tag { font-size: 0.625rem; letter-spacing: 0.1em; color: var(--attack-ink); }
.hub-duo .duo-warn p { font-size: var(--fs-sm); color: var(--ink-muted); line-height: var(--lh-snug); }

/* context */
.hub-duo .duo-context { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start; }
.hub-duo .duo-la__cell { display: flex; flex-direction: column; gap: var(--s2); }
.hub-duo .duo-stacks__list { display: flex; flex-direction: column; gap: var(--s3); }
.hub-duo .duo-stacks__row { display: grid; grid-template-columns: minmax(0,1fr) 110px auto; gap: var(--s3); align-items: center; }
.hub-duo .duo-stacks__lbl { font-size: var(--fs-sm); color: var(--ink-muted); }
.hub-duo .duo-stacks__track { height: 8px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; }
.hub-duo .duo-stacks__fill { display: block; height: 100%; background: var(--ink-muted); border-radius: var(--r-pill); opacity: 0.85; }
.hub-duo .duo-stacks__n { font-size: var(--fs-sm); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 960px) {
  .hub-duo .duo-verdicts { grid-template-columns: 1fr; }
  .hub-duo .duo-rec,
  .hub-duo .duo-spacing,
  .hub-duo .duo-trades,
  .hub-duo .duo-open,
  .hub-duo .duo-econ,
  .hub-duo .duo-context { grid-template-columns: 1fr; }
  .hub-duo .duo-rec__left { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: var(--s4); }
}

/* ===== HUB: economy ===== (economy agent — the buy autopsy) ===== */
.hub-economy { display: flex; flex-direction: column; }

/* 1 — verdict movement + confound lesson */
.eco-verdict { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s4); align-items: stretch; }
.eco-lesson { display: flex; flex-direction: column; gap: var(--s4); }
.eco-lesson__head { display: flex; align-items: center; gap: var(--s2); }
.eco-lesson__icon { width: 15px; height: 15px; color: var(--ink-faint); flex: none; }
.eco-lesson__rates { display: flex; gap: var(--s6); }
.eco-lesson__body { font-size: var(--fs-sm); line-height: var(--lh-body); }

/* 2 — within-tier sync table */
.eco-syncard { display: flex; flex-direction: column; }
.eco-synhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.eco-syngrid { display: flex; flex-direction: column; }
.eco-synrow { display: grid; grid-template-columns: 160px 1fr 1fr; gap: var(--s4); align-items: center; padding: var(--s4) 0; border-top: 1px solid var(--border); }
.eco-synrow:first-child { border-top: none; }
.eco-synrow__tier { color: var(--ink); font-size: var(--fs-sm); }
.eco-synrow__cell { display: flex; flex-direction: column; gap: 6px; }
.eco-synrow__lbl { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint); }

/* 3 — enemy-eco chart uses shared .chart primitives */
.eco-bar { transition: fill var(--dur-1) var(--ease); }
.eco-bar:hover { fill: var(--surface-3); stroke: var(--gold-line); }

/* 4 — discipline grid */
.eco-discgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.eco-disc { display: flex; flex-direction: column; gap: var(--s3); }
.eco-disc__chips { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: flex-end; }
.eco-disc__note { font-size: var(--fs-sm); line-height: var(--lh-snug); margin-top: auto; }

/* 5 — per-player buy tiers */
.eco-ppgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.eco-pp { display: flex; flex-direction: column; gap: var(--s3); }
.eco-pp__head { display: flex; align-items: center; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--border); }
.eco-pp__swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.eco-pp__name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-body); }
.eco-pp__cols, .eco-pp__row { display: grid; grid-template-columns: 64px 1fr 1fr 1.2fr; gap: var(--s3); align-items: center; }
.eco-pp__colh { font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 5px; }
.eco-pp__colh:nth-child(2), .eco-pp__colh:nth-child(3), .eco-pp__colh:nth-child(4) { justify-content: flex-end; }
.eco-pp__rows { display: flex; flex-direction: column; }
.eco-pp__row { padding: var(--s3) 0; border-top: 1px solid var(--border-faint); }
.eco-pp__tier { color: var(--ink); font-size: var(--fs-sm); }
.eco-pp__kpr { text-align: right; color: var(--ink); font-size: var(--fs-data); }
.eco-pp__kprd { text-align: right; font-size: var(--fs-sm); }
.eco-pp__surv { display: flex; justify-content: flex-end; }

@media (max-width: 900px) {
  .eco-verdict, .eco-discgrid, .eco-ppgrid { grid-template-columns: 1fr; }
  .eco-synrow { grid-template-columns: 120px 1fr 1fr; gap: var(--s3); }
  .eco-lesson__rates { gap: var(--s5); }
}

/* ===== HUB: action-plan ===== (action-plan agent — the coach's plan) ===== */
.hub-action-plan { display: flex; flex-direction: column; }

.ap-thesis { display: block; }

/* ranked levers */
.ap-levers { display: flex; flex-direction: column; gap: var(--s4); }
.ap-lever {
  position: relative;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s4);
}
.ap-lever--directive { border-color: var(--gold-line); }
.ap-lever--directive::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 0% 0%, var(--gold-soft), transparent 55%);
}
.ap-lever__head { display: grid; grid-template-columns: 56px 1fr; gap: var(--s4); align-items: start; }
.ap-lever__rank { font-family: var(--font-mono); font-size: 2rem; font-weight: var(--fw-med); color: var(--ink-faint); line-height: 1; letter-spacing: -0.02em; }
.ap-lever--directive .ap-lever__rank { color: var(--gold-ink); }
.ap-lever__headmain { display: flex; flex-direction: column; gap: var(--s2); }
.ap-lever__tagrow { display: flex; align-items: center; gap: var(--s3); }
.ap-lever__kicker { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--fw-med); color: var(--ink-muted); }
.ap-lever--directive .ap-lever__kicker { color: var(--gold-ink); }
.ap-lever__claim { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-med); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--ink); }
.ap-lever__evlabel { margin-bottom: calc(-1 * var(--s2)); }
.ap-lever__ext { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s4); border-radius: var(--r-1); background: var(--surface-sunken); border: 1px solid var(--border-faint); }
.ap-lever__extbody { font-size: var(--fs-sm); line-height: var(--lh-body); }
.ap-lever__ext .conftag { flex: none; margin-top: 2px; }
.ap-lever__action { display: flex; gap: var(--s4); align-items: baseline; padding-left: var(--s3); border-left: 2px solid var(--gold-line); }
.ap-lever__actiontag { font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); color: var(--gold-ink); flex: none; padding-top: 2px; }
.ap-lever__actionbody { font-size: var(--fs-body); color: var(--ink); line-height: var(--lh-snug); }

.ap-chiprow { display: flex; flex-wrap: wrap; gap: var(--s6); align-items: flex-end; }
.ap-chart { margin: var(--s2) 0; }

/* map-priority table */
.ap-map__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.ap-map__rows { display: flex; flex-direction: column; }
.ap-map__row { display: grid; grid-template-columns: 92px 84px 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--border-faint); }
.ap-map__row:first-child { border-top: none; }
.ap-map__name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-body); color: var(--ink); }
.ap-map__tag { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; padding: 3px 8px; border-radius: var(--r-xs); border: 1px solid var(--border); }
.ap-map__tag--lean { color: var(--defense-ink); border-color: color-mix(in srgb, var(--defense) 40%, transparent); background: var(--defense-soft); }
.ap-map__tag--learn { color: var(--gold-ink); border-color: var(--gold-line); background: var(--gold-soft); }
.ap-map__tag--caution { color: var(--attack-ink); border-color: color-mix(in srgb, var(--attack) 40%, transparent); background: var(--attack-soft); }
.ap-map__tag--neutral { color: var(--ink-muted); }
.ap-map__reason { font-size: var(--fs-sm); }

/* what the data cannot see */
.ap-cant { display: flex; flex-direction: column; gap: var(--s4); }
.ap-cant__head { display: flex; gap: var(--s3); align-items: flex-start; }
.ap-cant__icon { width: 18px; height: 18px; color: var(--ink-faint); flex: none; margin-top: 2px; }
.ap-cant__lede { font-size: var(--fs-sm); line-height: var(--lh-body); margin-top: var(--s2); max-width: 68ch; }
.ap-cant__list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2) var(--s5); padding: 0; }
.ap-cant__item { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--ink-muted); }
.ap-cant__bullet { width: 12px; height: 12px; color: var(--ink-faint); flex: none; }

@media (max-width: 900px) {
  .ap-lever__ext { flex-direction: column; gap: var(--s3); }
  .ap-lever__action { flex-direction: column; gap: var(--s2); }
  .ap-map__row { grid-template-columns: 80px 76px 1fr; }
  .ap-map__row .conftag { grid-column: 1 / -1; justify-self: start; }
  .ap-cant__list { grid-template-columns: 1fr; }
}

/* ===== HUB: fights ===== (fights agent — Fight Planner v2) ===== */
.hub-fights { display: flex; flex-direction: column; }

/* shared segmented control (player / view toggle) */
.hub-fights .ft-seg { display: inline-flex; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.hub-fights .ft-seg__opt {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.03em; color: var(--ink-faint);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.hub-fights .ft-seg__opt[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); }
.hub-fights .ft-seg__opt:hover { color: var(--ink); }
.hub-fights .ft-seg__sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* svg text tokens */
.hub-fights .ft-bar__cat { font-family: var(--font-mono); font-size: 12px; fill: var(--ink-muted); }
.hub-fights .ft-bar__val { font-family: var(--font-mono); font-size: 12px; font-weight: 500; fill: var(--ink); font-variant-numeric: tabular-nums; }
.hub-fights .ft-compass__hub { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-faint); letter-spacing: 0.05em; }
.hub-fights .ft-compass__dir { font-family: var(--font-mono); font-size: 11px; font-weight: 500; fill: var(--ink-muted); }

/* side chips (attack rose / defense teal — convention) */
.hub-fights .ft-cell__side, .hub-fights .ft-tell__side {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 7px; border-radius: var(--r-pill);
}
.hub-fights .ft-side--attack  { color: var(--attack-ink);  background: var(--attack-soft); }
.hub-fights .ft-side--defense { color: var(--defense-ink); background: var(--defense-soft); }

/* A — verdicts */
.hub-fights .ft-verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }

/* B — opening duel */
.hub-fights .ft-opening { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s4); align-items: start; }
.hub-fights .ft-conv { display: flex; flex-direction: column; }
.hub-fights .ft-bench { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.hub-fights .ft-contact { display: flex; flex-direction: column; }
.hub-fights .ft-contact__grid { display: flex; flex-direction: column; gap: var(--s3); }
.hub-fights .ft-contact__player { padding: var(--s3) var(--s4); border-radius: var(--r-1); background: var(--surface-sunken); border: 1px solid var(--border); }
.hub-fights .ft-contact__id { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.hub-fights .ft-contact__sw { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.hub-fights .ft-contact__name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-body); }
.hub-fights .ft-contact__name.u { color: var(--player-a); }
.hub-fights .ft-contact__name.k { color: var(--player-b); }
.hub-fights .ft-contact__chips { display: flex; gap: var(--s5); flex-wrap: wrap; }

/* C — planner */
.hub-fights .ft-planner { display: flex; flex-direction: column; gap: var(--s4); }
.hub-fights .ft-planner__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.hub-fights .ft-planner__body { display: flex; flex-direction: column; gap: var(--s5); }
.hub-fights .ft-planner__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.hub-fights .ft-planner__col { padding: var(--s4); border-radius: var(--r-2); background: var(--surface-2); border: 1px solid var(--border); }
.hub-fights .ft-planner__col--lean { border-top: 2px solid var(--defense); }
.hub-fights .ft-planner__col--rework { border-top: 2px solid var(--attack); }
.hub-fights .ft-planner__col-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.hub-fights .ft-planner__col-title { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-h3); }
.hub-fights .ft-planner__col--lean .ft-planner__col-title { color: var(--defense-ink); }
.hub-fights .ft-planner__col--rework .ft-planner__col-title { color: var(--attack-ink); }
.hub-fights .ft-planner__cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s2); }
.hub-fights .ft-cell {
  display: flex; flex-direction: column; gap: 6px; padding: var(--s3);
  border-radius: var(--r-1); background: var(--surface-sunken); border: 1px solid var(--border);
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.hub-fights .ft-cell:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.hub-fights .ft-cell:hover .ft-cell__go { color: var(--ink-muted); }
.hub-fights .ft-cell__head { display: flex; align-items: center; gap: 6px; }
.hub-fights .ft-cell__map { font-family: var(--font-display); font-weight: var(--fw-med); font-size: var(--fs-sm); }
.hub-fights .ft-cell__go { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: transparent; transition: color var(--dur-1) var(--ease); }

/* map-priority table */
.hub-fights .ft-maptable { padding: var(--s2) var(--s4); }
.hub-fights .ft-maptable__head, .hub-fights .ft-maptable__row {
  display: grid; grid-template-columns: 1.5fr 1.3fr 1.3fr 64px; gap: var(--s3); align-items: center;
}
.hub-fights .ft-maptable__head { padding: var(--s3) 0; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint); }
.hub-fights .ft-maptable__row { padding: var(--s3) 0; border-top: 1px solid var(--border-faint); }
.hub-fights .ft-maptable__map { font-family: var(--font-display); font-weight: var(--fw-med); display: inline-flex; align-items: center; gap: var(--s2); }
.hub-fights .ft-retired { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 6px; }
.hub-fights .ft-maptable__link { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); justify-self: end; }
.hub-fights .ft-maptable__link:hover { color: var(--ink); }
.hub-fights .ft-maptable__go { justify-self: end; }

/* D — tells */
.hub-fights .ft-tells { display: flex; flex-direction: column; gap: var(--s4); }
.hub-fights .ft-tells__legend { display: flex; flex-direction: column; gap: var(--s3); }
.hub-fights .ft-tell__lead { font-size: var(--fs-body); max-width: 78ch; line-height: var(--lh-body); }
.hub-fights .ft-tells__defs { display: flex; flex-wrap: wrap; gap: var(--s4); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); }
.hub-fights .ft-tells__defs > span { display: inline-flex; align-items: center; gap: 4px; }
.hub-fights .ft-tells__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.hub-fights .ft-tell__player { display: flex; flex-direction: column; gap: var(--s3); }
.hub-fights .ft-tell__phead { display: flex; align-items: center; gap: var(--s2); }
.hub-fights .ft-tell__cell { padding: var(--s3); border-radius: var(--r-1); background: var(--surface-sunken); border: 1px solid var(--border); }
.hub-fights .ft-tell__cell .ft-tell__side { align-self: flex-start; display: inline-block; margin-bottom: var(--s2); }
.hub-fights .ft-tell__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.hub-fights .ft-tell__metric { display: flex; flex-direction: column; gap: 4px; }
.hub-fights .ft-tell__metric-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }

/* E — trading & spacing */
.hub-fights .ft-trading { display: grid; grid-template-columns: 360px 1fr; gap: var(--s4); align-items: start; }
.hub-fights .ft-compass-card { display: flex; flex-direction: column; }
.hub-fights .ft-compass__body { display: flex; justify-content: center; }
.hub-fights .ft-compass { max-width: 320px; }
.hub-fights .ft-spacing { display: flex; flex-direction: column; }
.hub-fights .ft-spacing__foot { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border); display: grid; grid-template-columns: auto 1fr; gap: var(--s5); align-items: center; }
.hub-fights .ft-spacing__stat { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }

/* F — gun-duel */
.hub-fights .ft-gun-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.hub-fights .ft-gun { display: flex; flex-direction: column; gap: var(--s4); }
.hub-fights .ft-gun__head { display: flex; align-items: center; gap: var(--s2); }
.hub-fights .ft-gun__head .faint { margin-left: auto; }
.hub-fights .ft-gun__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.hub-fights .ft-gun__cell { display: flex; flex-direction: column; gap: 6px; }
.hub-fights .ft-gun__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.75rem; font-weight: var(--fw-med); color: var(--ink); letter-spacing: -0.01em; }
.hub-fights .ft-gun__hs { padding-top: var(--s3); border-top: 1px solid var(--border-faint); display: flex; flex-direction: column; gap: var(--s2); }

@media (max-width: 960px) {
  .hub-fights .ft-verdicts { grid-template-columns: 1fr; }
  .hub-fights .ft-opening { grid-template-columns: 1fr; }
  .hub-fights .ft-trading { grid-template-columns: 1fr; }
  .hub-fights .ft-compass { max-width: 300px; margin: 0 auto; }
}
@media (max-width: 680px) {
  .hub-fights .ft-planner__cols { grid-template-columns: 1fr; }
  .hub-fights .ft-tells__grid { grid-template-columns: 1fr; }
  .hub-fights .ft-gun-grid { grid-template-columns: 1fr; }
  .hub-fights .ft-tell__metrics { grid-template-columns: 1fr; }
  .hub-fights .ft-maptable__head, .hub-fights .ft-maptable__row { grid-template-columns: 1.3fr 1fr 1fr; }
  .hub-fights .ft-maptable__go, .hub-fights .ft-maptable__link { display: none; }
  .hub-fights .ft-spacing__foot { grid-template-columns: 1fr; }
}

/* ===== HUB: maps ===== (maps agent) ===== */
.hub-maps { display: flex; flex-direction: column; }

/* opening verdict band */
.maps-verdicts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }

/* ranked pool grid */
.maps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.map-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-2); overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-1); transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.map-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.map-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.map-card__banner { position: relative; height: 96px; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--surface-sunken); }
.map-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.34; filter: saturate(0.6) contrast(1.05); }
.map-card__banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,15,23,0.15), rgba(11,15,23,0.85)); }
.map-card__banner-top { position: absolute; inset: auto var(--s4) var(--s3) var(--s4); z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s2); }
.map-card__name { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-h2); letter-spacing: -0.01em; color: var(--ink); }
.map-card__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.map-card__n { font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.map-card__chips { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.map-card__chip { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; min-width: 0; }
.map-card__chip .ratechip { flex: none; }
.map-card__chip-lbl { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); min-width: 0; }
.map-card__chip-lbl.defense { color: var(--defense-ink); }
.map-card__chip-lbl.attack { color: var(--attack-ink); }
.map-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--border-faint); }
.map-card__meta { font-size: var(--fs-sm); color: var(--ink-muted); min-width: 0; }
.map-card__meta .mono { color: var(--ink); }
.map-card__go { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--ink-faint); font-family: var(--font-mono); flex: none; }
.map-card__go svg { width: 14px; height: 14px; }

/* stance chips (editorial priority — neutral styling, gold stays verdict-only) */
.map-stance { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); color: var(--ink-muted); white-space: nowrap; background: var(--surface-1); }
.map-stance--lean { color: var(--defense-ink); border-color: color-mix(in srgb, var(--defense) 40%, var(--border-strong)); }
.map-stance--caution { color: var(--attack-ink); border-color: color-mix(in srgb, var(--attack) 40%, var(--border-strong)); }
.map-stance--window { color: var(--player-b); border-color: color-mix(in srgb, var(--player-b) 40%, var(--border-strong)); }
.map-stance--neutral { color: var(--ink-muted); }

/* detail head */
.hub-maps--detail { display: flex; flex-direction: column; gap: var(--s2); }
.maps-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-muted); text-decoration: none; padding: 4px 0; }
.maps-back:hover { color: var(--ink); }
.maps-back__ic { width: 15px; height: 15px; transform: rotate(180deg); }
.maps-detail__head { display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s4); }
.maps-detail__hero { display: flex; align-items: center; gap: var(--s4); }
.maps-detail__img { border-radius: var(--r-1); border: 1px solid var(--border); opacity: 0.85; object-fit: cover; }
.maps-detail__name { font-size: var(--fs-hero); line-height: 1; letter-spacing: -0.02em; }
.maps-detail__sub { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); font-size: var(--fs-sm); flex-wrap: wrap; }
.maps-detail__sub .gloss-btn { vertical-align: baseline; }

/* round-state chart */
.maps-rschart svg { max-width: 100%; }

/* plant sites */
.maps-psite { margin-top: var(--s4); }
.mpsite__list { display: flex; flex-direction: column; gap: var(--s2); }
.mpsite__row { display: grid; grid-template-columns: 84px 1fr 1fr; gap: var(--s4); align-items: center; padding: var(--s2) 0; border-top: 1px solid var(--border-faint); }
.mpsite__row:first-child { border-top: none; }
.mpsite__tag { font-size: var(--fs-sm); color: var(--ink); }
.mpsite__cell { display: flex; flex-direction: column; gap: 4px; }
.mpsite__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint); }

/* agent fit — own vs meta, side by side */
.maps-afit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.mfit__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.mfit__col { display: flex; flex-direction: column; gap: var(--s2); }
.mfit__head { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.mfit__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 6px 0; border-top: 1px solid var(--border-faint); }
.mfit__row:first-of-type { border-top: none; }
.mfit__agent { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--ink); }
.mfit__dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.mfit__role { font-family: var(--font-mono); font-size: 10px; }
.mfit__row--meta { align-items: center; }
.mfit__metawr { display: inline-flex; align-items: center; gap: var(--s2); }
.mfit__metawr .mono { font-size: var(--fs-data); color: var(--ink); }
.mfit__fit { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--ink-muted); }
.mfit__fit--strong { color: var(--defense-ink); border-color: color-mix(in srgb, var(--defense) 35%, var(--border)); }
.mfit__fit--avoid { color: var(--attack-ink); border-color: color-mix(in srgb, var(--attack) 35%, var(--border)); }
.mfit__fit--playable { color: var(--ink-muted); }
.maps-mfit__take { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border-faint); font-size: var(--fs-sm); color: var(--ink-muted); }

/* doctrine grid */
.maps-doc { margin-top: 0; }
.mdoc__grid { display: flex; flex-direction: column; }
.mdoc__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--s3); align-items: center; padding: 8px 0; border-top: 1px solid var(--border-faint); }
.mdoc__row--head { border-top: none; padding-bottom: var(--s2); }
.mdoc__row--head .mdoc__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 4px; }
.mdoc__who { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--ink); }
.mdoc__side { font-family: var(--font-mono); font-size: 10px; }
.mdoc__note { font-size: var(--fs-sm); margin-top: var(--s3); }

/* map lab */
.maps-lab { padding: var(--s4); }
.maps-lab__mount { min-height: 320px; border-radius: var(--r-1); background: var(--surface-sunken); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* footnotes */
.maps-notes { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.maps-notes__item { display: flex; gap: var(--s3); align-items: baseline; font-size: var(--fs-sm); color: var(--ink-muted); }
.maps-notes__item .conftag { flex: none; }

@media (max-width: 860px) {
  .maps-verdicts { grid-template-columns: 1fr; }
  .maps-grid { grid-template-columns: 1fr; }
  .maps-afit { grid-template-columns: 1fr; }
  .mfit__cols { grid-template-columns: 1fr; gap: var(--s4); }
  .mdoc__row { grid-template-columns: 1fr; gap: var(--s2); }
  .mdoc__row--head { display: none; }
  .maps-detail__name { font-size: var(--fs-h1); }
}

/* ===== MAP LAB (map-lab agent — the signature element) =====================
   Not a hub region: the Tactical Map Lab mounts inside the Maps hub's
   #map-lab-mount host. All selectors are namespaced `.lab` / `.lab__*` and are
   layout-only over shared tokens; no shared component is restyled. Canvas draw
   colours are read from the same tokens in lab.js. ========================== */
.lab { display: flex; flex-direction: column; gap: var(--s4); }

/* --- controls ------------------------------------------------------------ */
.lab__controls { display: flex; flex-direction: column; gap: var(--s3); }
.lab__bar, .lab__bar-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.lab__bar-group { row-gap: var(--s2); }
.lab__row-label {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.lab__chips { display: inline-flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.lab__chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s3);
  border-radius: var(--r-1); border: 1px solid var(--border); background: var(--surface-sunken);
  color: var(--ink-muted); font-size: var(--fs-sm); font-weight: var(--fw-med);
  font-family: var(--font-body); line-height: 1; white-space: nowrap;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.lab__chip:hover { color: var(--ink); border-color: var(--border-strong); }
.lab__chip.is-active { color: var(--ink); background: var(--surface-3); border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.lab__chip-n { margin-left: var(--s2); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.lab__filters {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s5);
  padding: var(--s4); border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-sunken);
}
.lab__row { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2) 0; }
.lab__row-head { display: flex; align-items: center; gap: var(--s1); }
.lab__filters-foot { display: flex; justify-content: flex-end; }
.lab__reset { min-height: 40px; }

/* --- body: stage + panel ------------------------------------------------- */
.lab__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--s5); align-items: start; }
.lab__stage { min-width: 0; }
.lab__canvas-wrap {
  position: relative; width: 100%; max-width: 720px; margin: 0 auto;
  aspect-ratio: 1 / 1; border-radius: var(--r-2); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-sunken);
}
.lab__canvas { display: block; width: 100%; height: 100%; }
.lab__count {
  position: absolute; top: var(--s3); left: var(--s3); z-index: 3;
  display: inline-flex; gap: 6px; align-items: baseline;
  padding: 4px 9px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-sunken) 82%, transparent);
  border: 1px solid var(--border);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xs);
}
.lab__count-main { color: var(--ink); }
.lab__count-sub { color: var(--ink-faint); }

.lab__legend {
  position: absolute; left: var(--s3); bottom: var(--s3); z-index: 3;
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); max-width: calc(100% - 2 * var(--s3));
  padding: 6px 10px; border-radius: var(--r-1);
  background: color-mix(in srgb, var(--surface-sunken) 82%, transparent); border: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--ink-muted);
}
.lab__legend-item, .lab__legend-shape { display: inline-flex; align-items: center; gap: 6px; }
.lab__legend-sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.lab__legend-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--ink-muted); flex: none; }
.lab__legend-x { font-family: var(--font-mono); color: var(--ink-muted); line-height: 1; }
.lab__legend-diamond { width: 8px; height: 8px; background: var(--surface-3); border: 1px solid var(--ink-muted); transform: rotate(45deg); flex: none; }
.lab__legend-heat { display: inline-flex; align-items: center; gap: var(--s2); }
/* fallback ramp; lab.js sets the exact stops inline from the shared heat ramp */
.lab__legend-heat-bar { width: 84px; height: 8px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--surface-3), var(--gold)); }
.lab__legend-heat-lab { font-size: var(--fs-xs); color: var(--ink-faint); }

.lab__stage-loader { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: var(--surface-sunken); z-index: 4; }
.lab__canvas-wrap[data-loading] .lab__stage-loader { display: flex; }

/* hover / pinned detail popover */
.lab__hovercard {
  position: absolute; z-index: 6; pointer-events: none; min-width: 176px; max-width: 232px;
  background: var(--surface-3); border: 1px solid var(--border-strong);
  border-radius: var(--r-1); box-shadow: var(--shadow-2); padding: var(--s3);
  opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
.lab__hovercard[data-show="1"] { opacity: 1; }
.lab__hovercard[data-pinned="1"] { pointer-events: auto; }
.lab__hover-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.lab__hover-role { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-sm); }
/* kill/death is an OUTCOME, not a side — keep neutral so the side legend keeps its meaning */
.lab__hover-role--death { color: var(--ink); }
.lab__hover-role--kill { color: var(--ink); }
.lab__hover-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px var(--s3); font-size: var(--fs-xs); }
.lab__hover-k { color: var(--ink-faint); }
.lab__hover-v { color: var(--ink); text-align: right; }
.lab__hover-close {
  position: absolute; top: 4px; right: 6px; width: 20px; height: 20px; border-radius: var(--r-pill);
  color: var(--ink-faint); font-size: 15px; line-height: 1; border: 1px solid transparent;
}
.lab__hover-close:hover { color: var(--ink); border-color: var(--border-strong); }

/* --- panel: default read + zone report ----------------------------------- */
.lab__panel {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-2);
  padding: var(--s5); box-shadow: var(--shadow-1); position: sticky; top: var(--s4);
  max-height: calc(100vh - var(--s7)); overflow: auto;
}
.lab__panel-inner { display: flex; flex-direction: column; gap: var(--s3); }
.lab__panel-eyebrow { color: var(--ink-faint); }
.lab__panel-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-semi); letter-spacing: var(--ls-tight); }
.lab__hint { color: var(--ink-muted); font-size: var(--fs-sm); line-height: var(--lh-body); }
.lab__notes { font-size: var(--fs-sm); line-height: var(--lh-snug); }

.lab__stat { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); font-size: var(--fs-sm); }
.lab__stat-k { color: var(--ink-muted); display: inline-flex; align-items: center; gap: 4px; }
.lab__stat-sub { font-size: var(--fs-xs); }
.lab__stat .mono { color: var(--ink); font-variant-numeric: tabular-nums; }

.lab__lowconf, .lab__smallnote {
  display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s3);
  border-radius: var(--r-1); background: var(--surface-sunken); border: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--ink-muted);
}
.lab__lowconf-icon { width: 15px; height: 15px; flex: none; color: var(--ink-faint); margin-top: 1px; }

.lab__zonelist { display: flex; flex-direction: column; gap: var(--s2); }
.lab__zone-btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 40px; padding: var(--s2) var(--s3); text-align: left;
  border: 1px solid var(--border); border-radius: var(--r-1); background: var(--surface-sunken);
  color: var(--ink-muted); transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.lab__zone-btn:hover { color: var(--ink); border-color: var(--border-strong); background: var(--surface-3); }
.lab__zone-btn-label { font-size: var(--fs-sm); font-weight: var(--fw-med); }
.lab__zone-btn-meta { display: inline-flex; align-items: center; gap: var(--s2); flex: none; }
/* phase is a neutral time label (EARLY/MID/LATE) — no side/verdict hue; the word carries it */
.lab__zone-phase { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.06em; }
.lab__phase--early,
.lab__phase--mid,
.lab__phase--late,
.lab__phase--post-plant { color: var(--ink-muted); }

/* zone report */
.lab__report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.lab__clear { min-height: 40px; flex: none; }
.lab__clear svg { width: 13px; height: 13px; }
.lab__report-tags { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.lab__tag {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--ink-muted); background: var(--surface-sunken);
}
.lab__report-count { font-size: var(--fs-sm); color: var(--ink-muted); }
.lab__report-n { font-size: var(--fs-h3); color: var(--ink); }

.lab__headline { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border-radius: var(--r-1); background: var(--surface-sunken); border: 1px solid var(--border); }
.lab__kd { font-size: var(--fs-sm); }
/* kill/death counts are an outcome split, not sides — neutral; the words carry it */
.lab__kd-k { color: var(--ink); }
.lab__kd-d { color: var(--ink-muted); }

.lab__section { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--border-faint); }
.lab__section-head { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-faint); }

.lab__bars { display: flex; flex-direction: column; gap: 5px; }
.lab__bar-row { display: grid; grid-template-columns: 74px 1fr 34px; align-items: center; gap: var(--s2); font-size: var(--fs-xs); }
.lab__bar-lab { color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab__bar-track { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.lab__bar-fill { height: 100%; border-radius: var(--r-pill); min-width: 2px; }
.lab__bar-v { color: var(--ink-muted); text-align: right; }

.lab__doctrine { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border-radius: var(--r-1); background: var(--surface-sunken); border: 1px solid var(--gold-line); }
.lab__doctrine-tell { font-family: var(--font-display); font-size: var(--fs-body); line-height: var(--lh-snug); color: var(--ink); }
.lab__report .compchip { align-self: flex-start; }

@media (max-width: 920px) {
  .lab__body { grid-template-columns: 1fr; }
  .lab__panel { position: static; max-height: none; }
  .lab__filters { grid-template-columns: 1fr; }
}