/* the gathering: one stylesheet. Tokens first (every size, space and colour
   below comes from them), then base, shell, components, pages. Shared markup
   lives in templates/_ui.html. */

:root {
  color-scheme: dark;

  /* neutrals: page, containers, raised, pressed; hairlines; four text levels */
  --bg: #0e1215;
  --surface: #151a1f;
  --surface-2: #1b2127;
  --surface-3: #242b32;
  --border: #252d35;
  --border-strong: #353f49;
  --text: #e8ecef;
  --text-2: #b3bdc5;
  --text-3: #8a96a0;
  --text-4: #5e6a74; /* decoration only: separators, idle icons */

  /* one accent, for actions, selection and focus */
  --accent: #e8a33d;
  --accent-hover: #f2b75e;
  --accent-ink: #1a1206;
  --accent-soft: rgb(232 163 61 / 0.12);
  --accent-line: rgb(232 163 61 / 0.5);

  /* data: a colour-blind-safe pair, used for win/loss only */
  --win: #5ba7e8;
  --loss: #e07b3c;

  /* status: always paired with a label */
  --success: #4cb782;
  --warning: #e2c040;
  --danger: #e5534b;
  --info: #5ba7e8;

  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;

  --s-0-5: 2px;
  --s-1: 4px;
  --s-1-5: 6px;
  --s-2: 8px;
  --s-2-5: 10px;
  --s-3: 12px;
  --s-3-5: 14px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;

  --control: 36px; /* buttons and inputs; 44px on touch screens */
  --content: 1280px;
  --gutter: var(--s-8);
}

@media (pointer: coarse) {
  :root { --control: 44px; }
}

@media (max-width: 640px) {
  :root { --gutter: var(--s-4); }
}

/* --- base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--text-md)/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; color: var(--text); font-weight: 600; }
h1 { font-size: var(--text-2xl); line-height: 1.25; letter-spacing: -0.01em; }
h2 { font-size: var(--text-lg); line-height: 1.4; }
h3 { font-size: var(--text-md); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ol, ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.link { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong);
        text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--accent); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 0.93em; }
.muted { color: var(--text-2); }
.subtle { color: var(--text-3); }
.small { font-size: var(--text-sm); }
.measure { max-width: 72ch; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 20; }
.skip-link:focus { top: var(--s-3); }

/* --- shell ----------------------------------------------------------------- */

.app-header { border-bottom: 1px solid var(--border); background: var(--bg); }
.app-header-inner, .app-main { max-width: var(--content); margin: 0 auto; padding-inline: var(--gutter); }
.app-header-inner { display: flex; align-items: stretch; gap: var(--s-8); height: 56px; }
.brand { display: flex; align-items: center; gap: var(--s-2-5); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.nav { display: flex; gap: var(--s-1); }
.nav a {
  display: flex; align-items: center; padding: 0 var(--s-3); margin-bottom: -1px;
  border-bottom: 2px solid transparent; color: var(--text-2); font-weight: 500;
}
.nav a:hover { color: var(--text); }
.nav a:focus-visible { outline-offset: -2px; }
.nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.env {
  align-self: center; margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-1-5);
  padding: var(--s-0-5) var(--s-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-2); font: 500 var(--text-xs) var(--mono); white-space: nowrap;
}
.env::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
.env-prod::before { background: var(--success); }
.app-main { padding-block: var(--s-8) var(--s-12); }
.account { align-self: center; display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.account-name { color: var(--text-2); font-size: var(--text-sm); }
.account-out {
  padding: var(--s-0-5) var(--s-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: none; color: var(--text-2); font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.account-out:hover { color: var(--text); border-color: var(--text-4); }
.login { max-width: 400px; margin: var(--s-12) auto 0; }
.login-title { font-size: var(--text-xl); font-weight: 600; }
.status-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.form-foot-hints { display: flex; flex-direction: column; gap: var(--s-1); }

@media (max-width: 640px) {
  .app-header-inner { gap: var(--s-4); }
  .brand-name, .env-version, .account-name, .env { display: none; }
  .account { margin-left: auto; }
  .nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
  .nav a { padding: 0 var(--s-2); }
}

/* --- page header ----------------------------------------------------------- */

.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4) var(--s-6);
}
.app-main > * + * { margin-top: var(--s-6); }
.app-main > * + .section { margin-top: var(--s-8); }
.page-head-main { min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-1-5); margin-bottom: var(--s-2); font-size: var(--text-sm); color: var(--text-3); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-1-5); color: var(--text-4); }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.page-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.page-desc { margin-top: var(--s-1-5); max-width: 70ch; color: var(--text-2); }
.meta { display: flex; flex-wrap: wrap; margin-top: var(--s-2); font-size: var(--text-sm); color: var(--text-3); }
.meta > :not(:last-child)::after { content: "·"; margin-inline: var(--s-2); color: var(--text-4); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }

/* --- sections and containers ----------------------------------------------- */

.section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-2) var(--s-4); margin-bottom: var(--s-3);
}
.section-note { font-size: var(--text-sm); color: var(--text-3); }
.box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.box-body { padding: var(--s-5); }
.box-foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); }
.stack { display: grid; gap: var(--s-4); }
.footnote { margin-top: var(--s-3); max-width: 80ch; font-size: var(--text-sm); color: var(--text-3); }
.footnote b { color: var(--text-2); font-weight: 500; }

/* --- key numbers ------------------------------------------------------------ */

.kpis {
  display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden;
}
.kpi { min-width: 0; padding: var(--s-4) var(--s-5); background: var(--surface); }
.kpi-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-2); }
.kpi-value {
  margin-top: var(--s-1); font-size: var(--text-3xl); font-weight: 600; line-height: 1.2;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.kpi-value small { margin-left: var(--s-1); font-size: var(--text-md); font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.kpi-value.is-text { font-size: var(--text-xl); letter-spacing: -0.01em; }
.kpi-sub { margin-top: var(--s-0-5); font-size: var(--text-sm); color: var(--text-3); }
.nowrap { white-space: nowrap; }
@media (max-width: 760px) {
  .kpis { --cols: 2; }
  .kpi:last-child:nth-child(odd) { grid-column: span 2; }
  .kpi { padding: var(--s-3) var(--s-4); }
  .kpi-value { font-size: var(--text-2xl); }
  .kpi-value.is-text { font-size: var(--text-lg); }
}

/* --- tables ---------------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; }
.table th {
  padding: var(--s-2-5) var(--s-3); border-bottom: 1px solid var(--border); text-align: left;
  font-size: var(--text-xs); font-weight: 500; color: var(--text-3); white-space: nowrap;
}
.table td { padding: var(--s-2-5) var(--s-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table :is(th, td):first-child { padding-left: var(--s-5); }
.table :is(th, td):last-child { padding-right: var(--s-5); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .go { width: 1%; text-align: right; color: var(--text-4); }
.table tbody tr.is-link { position: relative; }
.table tbody tr.is-link:hover { background: var(--surface-2); }
.table tbody tr.is-link:hover .go { color: var(--text-2); }
.table tbody tr.is-link:has(.row-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.row-link { font-weight: 500; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:focus-visible { outline: none; }
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .table :is(th, td):first-child { padding-left: var(--s-4); }
  .table :is(th, td):last-child { padding-right: var(--s-4); }
}

/* --- badges ------------------------------------------------------------------ */

.badge {
  display: inline-flex; align-items: center; gap: var(--s-1-5); height: 22px; padding: 0 var(--s-2);
  border-radius: var(--radius-sm); background: var(--surface-3); color: var(--text-2);
  font-size: var(--text-xs); font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: middle;
}
.badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dot, var(--text-3)); }
.badge.is-plain::before { content: none; }
.badge.is-live::before { animation: pulse 1.6s ease-in-out infinite; }
.tone-success { --dot: var(--success); }
.tone-warning { --dot: var(--warning); }
.tone-danger { --dot: var(--danger); }
.tone-info { --dot: var(--info); }
.tone-win { --dot: var(--win); }
.tone-loss { --dot: var(--loss); }
.tone-neutral { --dot: var(--text-3); }
@keyframes pulse { 50% { opacity: 0.35; } }

/* --- buttons and controls ---------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--control); padding: 0 var(--s-3-5); border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--surface-2); color: var(--text);
  font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover { background: var(--surface-3); border-color: var(--text-4); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.is-disabled { opacity: 0.45; pointer-events: none; }
.btn .key { color: var(--text-3); font-size: var(--text-xs); }
.htmx-request .btn-primary, .btn-primary.htmx-request { opacity: 0.7; pointer-events: none; }

.segmented { display: inline-flex; gap: var(--s-0-5); padding: var(--s-0-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.segmented a {
  display: inline-flex; align-items: center; height: calc(var(--control) - var(--s-1-5)); padding: 0 var(--s-3);
  border-radius: var(--radius-sm); color: var(--text-2); font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
}
.segmented a:hover { color: var(--text); }
.segmented a[aria-current="true"] { background: var(--surface-3); color: var(--text); }

/* --- forms ------------------------------------------------------------------- */

.field { display: grid; gap: var(--s-1-5); }
.label { font-size: var(--text-sm); font-weight: 500; color: var(--text); }
.hint { font-size: var(--text-sm); color: var(--text-3); }
.input, .textarea {
  width: 100%; min-width: 0; height: var(--control); padding: 0 var(--s-2-5);
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg); color: var(--text);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.textarea { height: auto; padding: var(--s-2) var(--s-2-5); line-height: 1.6; resize: vertical; }
.textarea.is-code { font: 400 var(--text-sm)/1.7 var(--mono); }
.input:hover, .textarea:hover { border-color: var(--text-4); }
.input:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.fieldset legend { margin-bottom: var(--s-1-5); padding: 0; }

.choices { display: grid; gap: var(--s-2); }
.choice {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-0-5) var(--s-2-5); padding: var(--s-2-5) var(--s-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg); cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}
.choice input { margin: 3px 0 0; accent-color: var(--accent); }
.choice-title { font-weight: 500; }
.choice-desc { grid-column: 2 / 4; font-size: var(--text-sm); color: var(--text-3); }
.choice-meta { grid-row: 1; grid-column: 3; font-size: var(--text-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.choice:hover { border-color: var(--text-4); }
.choice:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pill {
  display: inline-flex; align-items: center; gap: var(--s-2); height: var(--control); padding: 0 var(--s-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg); cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}
.pill input { margin: 0; accent-color: var(--accent); }
.pill:hover { border-color: var(--text-4); }
.pill:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.pill:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- feedback messages --------------------------------------------------------- */

.alert {
  display: grid; gap: var(--s-1); padding: var(--s-2-5) var(--s-3-5); border: 1px solid; border-radius: var(--radius);
  font-size: var(--text-md);
}
.alert-title { font-weight: 600; color: var(--text); }
.alert ul { padding-left: 18px; list-style: disc; }
.alert-danger { border-color: rgb(229 83 75 / 0.4); background: rgb(229 83 75 / 0.08); color: #f3b8b3; }
.alert-warning { border-color: rgb(226 192 64 / 0.4); background: rgb(226 192 64 / 0.07); color: #ecdca0; }
.alert-success { border-color: rgb(76 183 130 / 0.4); background: rgb(76 183 130 / 0.08); color: #b5e3c9; }
.alert a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.empty { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-12) var(--s-6); text-align: center; }
.empty p { max-width: 48ch; color: var(--text-2); }
.empty .btn { margin-top: var(--s-2); }

.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.status-pct { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.progress { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.progress > span { display: block; width: var(--p, 0%); height: 100%; background: var(--info); transition: width 0.4s ease; }

/* --- the win-rate plot: a dot, its 95% range, the 50% line ---------------------- */

.plot { position: relative; height: 20px; min-width: 140px; }
.plot::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--border); }
.plot::after { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1px; background: var(--text-4); }
.plot-range {
  position: absolute; top: calc(50% - 1.5px); left: var(--low); width: calc(var(--high) - var(--low));
  height: 3px; border-radius: 2px; background: var(--tone); opacity: 0.45;
}
.plot-dot {
  position: absolute; z-index: 1; top: 50%; left: var(--mid); width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 2px var(--surface);
}
.plot.is-win { --tone: var(--win); }
.plot.is-loss { --tone: var(--loss); }
.plot-axis { position: relative; display: block; min-width: 140px; height: 1.5em; font-weight: 400; color: var(--text-3); }
.plot-axis span { position: absolute; top: 0; }
.plot-axis span:nth-child(1) { left: 0; }
.plot-axis span:nth-child(2) { left: 50%; transform: translateX(-50%); }
.plot-axis span:nth-child(3) { right: 0; }
.c-plot, .c-plot-head { width: 32%; }
.rate-win { color: var(--win); }
.rate-loss { color: var(--loss); }
.legend { display: inline-flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--text-sm); color: var(--text-3); }
.legend span { display: inline-flex; align-items: center; gap: var(--s-1-5); }
.legend i { display: inline-block; flex: none; }
.legend .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); }
.legend .range { width: 16px; height: 3px; border-radius: 2px; background: var(--text-3); }
.legend .mid { width: 1px; height: 12px; background: var(--text-4); }

/* --- Deck Doctor ----------------------------------------------------------------- */

.doctor { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.doctor .box-body + .box-body { border-top: 1px solid var(--border); }
.step-title { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.decklist { min-height: 300px; }
@media (max-width: 1024px) {
  .doctor { grid-template-columns: minmax(0, 1fr); }
}

/* --- report: matchups stack on small screens --------------------------------------- */

@media (max-width: 760px) {
  .matchups thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .matchups tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas:
      "opp win" "plot plot" "trust games"; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border);
  }
  .matchups tbody tr:last-child { border-bottom: 0; }
  .table.matchups tbody td { padding: 0; border: 0; width: auto; }
  .matchups .c-opp { grid-area: opp; }
  .matchups .c-win { grid-area: win; }
  .matchups .c-plot { grid-area: plot; }
  .matchups .c-trust { grid-area: trust; }
  .matchups .c-games { grid-area: games; align-self: center; font-size: var(--text-sm); color: var(--text-3); }
  .matchups .c-share, .matchups .go { display: none; }
}
.c-games .unit { display: none; }
@media (max-width: 760px) { .c-games .unit { display: inline; } }

/* --- matchup: the games by seed, a cell a game ------------------------------------------ */

.pairs td.game-cell { padding: 0; }
.game-link { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2-5) var(--s-3); }
.game-link:hover { background: var(--surface-2); }
.game-link .go { margin-left: auto; color: var(--text-4); }
.game-link:hover .go { color: var(--text-2); }
.game-link:focus-visible { outline-offset: -2px; }
.pairs .seed { width: 1%; white-space: nowrap; color: var(--text-3); }
@media (max-width: 640px) {
  .game-link { gap: var(--s-2); padding-inline: var(--s-2); }
}

/* --- game viewer ------------------------------------------------------------------- */

.game { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-6); align-items: start; }
.game-main { display: grid; gap: var(--s-6); min-width: 0; }
.game-aside { position: sticky; top: var(--s-4); display: flex; flex-direction: column; max-height: calc(100vh - var(--s-8)); }
@media (max-width: 1024px) {
  .game { grid-template-columns: minmax(0, 1fr); }
  .game-aside { position: static; max-height: none; }
}

.timeline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-6); }
.turns {
  position: relative; display: flex; flex: 1 1 480px; gap: var(--s-0-5); min-width: 0; padding: 3px;
  overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.turn {
  flex: none; display: grid; justify-items: center; align-content: center; width: 58px; height: 46px;
  border: 1px solid transparent; border-radius: var(--radius); color: var(--text-2);
}
.turn b { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.turn span { font-size: var(--text-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.turn:hover { background: var(--surface-2); }
.turn[aria-current="step"] { border-color: var(--accent-line); background: var(--accent-soft); }
.turn-key { position: sticky; left: -3px; z-index: 1; width: 72px; background: var(--surface); box-shadow: 1px 0 0 var(--border); border-radius: 0; }
.turn-key b { font-size: var(--text-xs); font-weight: 500; color: var(--text-3); }
.turn-key:hover { background: var(--surface); }

.board-side { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); }
.player { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.player-name { font-weight: 600; }
.player-role { margin-right: var(--s-2); font-size: var(--text-xs); font-weight: 500; color: var(--text-3); }
.counts { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4); font-size: var(--text-sm); color: var(--text-3); }
.counts b { margin-left: var(--s-1); color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.counts .life b { font-size: var(--text-xl); }
.phase {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-4);
  padding: var(--s-2) var(--s-5); border-block: 1px solid var(--border); background: var(--surface-2);
  font-size: var(--text-sm); color: var(--text-2);
}
.phase b { color: var(--text); font-weight: 600; }
.zone { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.zone-empty { font-size: var(--text-sm); color: var(--text-3); }
.card {
  position: relative; display: grid; align-content: start; gap: var(--s-0-5); width: 136px; min-height: 60px;
  padding: var(--s-2) var(--s-2-5); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2);
}
.card-name { padding-right: 28px; font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.card-type { font-size: var(--text-xs); color: var(--text-3); }
.card-pt { position: absolute; right: var(--s-2); top: var(--s-2); font: 600 var(--text-xs) var(--mono); color: var(--text); }
.card.is-tapped { opacity: 0.6; }
.card.is-attacking { border-color: var(--danger); }
.card.is-blocking { border-color: var(--info); }
.card-state { font-size: var(--text-xs); font-weight: 500; color: var(--text-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-1-5); height: 28px; padding: 0 var(--s-2-5);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
  font-size: var(--text-sm); white-space: nowrap;
}
.chip .count { color: var(--text-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.chip.is-tapped { border-style: dashed; color: var(--text-3); }
.hand { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); }
.zone-label { font-size: var(--text-xs); font-weight: 500; color: var(--text-3); }

.decision-head { display: grid; gap: var(--s-0-5); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.decision-kicker { font-size: var(--text-xs); font-weight: 500; color: var(--text-3); }
.options { display: grid; gap: var(--s-1-5); }
.option {
  display: flex; align-items: center; gap: var(--s-2-5); min-height: 38px; padding: var(--s-1-5) var(--s-3);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
}
.option .count { font-size: var(--text-xs); color: var(--text-3); }
.option.is-chosen { border-color: var(--accent-line); background: var(--accent-soft); }
.chosen-tag { margin-left: auto; font-size: var(--text-xs); font-weight: 600; color: var(--accent); }

.log-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); }
.log { position: relative; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.log-turn {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-1-5) var(--s-4); border-bottom: 1px solid var(--border); background: var(--surface);
  font-size: var(--text-xs); font-weight: 600; color: var(--text-2);
}
.log-turn span { font-weight: 400; color: var(--text-3); font-variant-numeric: tabular-nums; }
.log a {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-2); padding: var(--s-1-5) var(--s-4);
  border-left: 2px solid transparent; font-size: var(--text-sm); color: var(--text);
}
.log a:hover { background: var(--surface-2); }
.log a[aria-current="step"] { border-left-color: var(--accent); background: var(--accent-soft); }
.log .when { color: var(--text-3); }
.log .is-pass { color: var(--text-3); }
.log .who { color: var(--text-3); }
@media (max-width: 1024px) {
  .log { max-height: 420px; }
}
@media (pointer: coarse) {
  .log a { padding-block: var(--s-2-5); }
}

/* --- feedback ------------------------------------------------------------------------ */

.flag {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); grid-template-areas: "title status" "body status";
  gap: var(--s-2) var(--s-8); padding: var(--s-4) var(--s-5);
}
.flag + .flag { border-top: 1px solid var(--border); }
.flag-title { grid-area: title; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--text-md); font-weight: 600; }
.flag-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.flag-status { grid-area: status; padding-top: var(--s-0-5); }
.flag-body { grid-area: body; min-width: 0; }
.quote { margin-top: var(--s-2); padding-left: var(--s-3); border-left: 2px solid var(--border-strong); color: var(--text-2); }
.reply { margin-top: var(--s-3); padding: var(--s-2-5) var(--s-3); border-radius: var(--radius); background: var(--surface-2); font-size: var(--text-sm); }
.reply b { display: block; margin-bottom: var(--s-0-5); font-size: var(--text-xs); font-weight: 600; color: var(--text-3); }
.flag .meta { margin-top: var(--s-3); }
.flag-body > :first-child { margin-top: 0; }
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1); }
.stepper li { display: grid; gap: var(--s-1-5); font-size: var(--text-xs); color: var(--text-3); }
.stepper li::before { content: ""; height: 3px; border-radius: 2px; background: var(--surface-3); }
.stepper li.is-done { color: var(--text-2); }
.stepper li.is-done::before { background: var(--success); }
.stepper li[aria-current="step"] { color: var(--text); font-weight: 600; }
@media (max-width: 760px) {
  .flag { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "status" "body"; gap: var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* --- meters: a share as a bar ------------------------------------------------------- */
.meter { display: flex; align-items: center; gap: var(--s-3); min-width: 120px; }
.meter-bar { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.meter-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 3px; background: var(--info); }
.meter-value { min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
.c-meter { width: 40%; }
.table .num-left { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tr.is-break td { border-top: 1px solid var(--border-strong); }
/* --- goldfish ----------------------------------------------------------------------- */
.odds { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.odds .box-foot { margin: 0; }
@media (max-width: 1024px) {
  .odds { grid-template-columns: minmax(0, 1fr); }
}
.odds.is-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .odds.is-even { grid-template-columns: minmax(0, 1fr); }
}
/* --- metagame ------------------------------------------------------------------------ */
.trend { font-size: var(--text-xs); }
.trend.is-up { color: var(--success); }
.trend.is-down { color: var(--text-3); }
.cardlist { columns: 3 220px; column-gap: var(--s-8); }
.cardlist-group { break-inside: avoid; margin-bottom: var(--s-5); }
.cardlist-group .count { margin-left: var(--s-1); color: var(--text-4); }
.cardlist-group ul { margin-top: var(--s-2); display: grid; gap: var(--s-1); }
.cardlist-group li .num { display: inline-block; min-width: 2ch; color: var(--text-3); }
/* --- report: a tested change ------------------------------------------------------- */
.change { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-8); }
.change-main { display: grid; gap: var(--s-0-5); }
.change-value { font-size: var(--text-3xl); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.change-verdict { max-width: 40ch; }
.swap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 640px) {
  .swap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .matchups .c-delta { display: none; }
}
/* --- shell: four sections fit a phone ---------------------------------------------- */
.nav a { white-space: nowrap; }
@media (max-width: 640px) {
  .nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .nav a { padding: 0 var(--s-1-5); }
  .env { display: none; }
  .meter { min-width: 0; gap: var(--s-2); }
  .meter-bar { min-width: 24px; }
  .curve th { white-space: normal; }
}
/* --- deck profile ------------------------------------------------------------------- */
:root {
  /* mana symbols: the brand mark's five colours */
  --mana-white: #e9edf0;
  --mana-blue: #6cb4ee;
  --mana-black: #8c96a0;
  --mana-red: #e8733d;
  --mana-green: #5fb37a;
}
.kpis.is-six { --cols: 6; }
@media (max-width: 1100px) { .kpis.is-six { --cols: 3; } }
@media (max-width: 760px) { .kpis.is-six { --cols: 2; } }
.flag-dot { display: inline-block; width: 8px; height: 8px; margin-left: var(--s-1); border-radius: 50%; vertical-align: middle; background: var(--warning); }
.kpi-value .flag-dot { width: 10px; height: 10px; vertical-align: 0.35em; }

.summary { display: grid; gap: var(--s-2); }
.summary-text { max-width: 90ch; font-size: var(--text-lg); line-height: 1.55; color: var(--text); }
.summary b { color: var(--text-2); font-weight: 500; }

.box-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3);
            padding: var(--s-3-5) var(--s-5); border-bottom: 1px solid var(--border); }
.box-head h3 { font-size: var(--text-md); }
.table.is-compact td, .table.is-compact th { padding-block: var(--s-2); }
.table tr.is-warn td:first-child { box-shadow: inset 2px 0 0 var(--warning); }

.issues { display: grid; }
.issue { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-1) var(--s-4); padding: var(--s-3-5) var(--s-5); }
.issue + .issue { border-top: 1px solid var(--border); }
.issue-title { font-weight: 600; }
.issue-detail { margin-top: var(--s-0-5); color: var(--text-2); max-width: 90ch; }
@media (max-width: 640px) {
  .issue { grid-template-columns: minmax(0, 1fr); padding: var(--s-3) var(--s-4); }
}

.vs-form { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.select { width: auto; max-width: 100%; padding-right: var(--s-2); }
.compare .feature { font-weight: 500; }
.c-band { width: 34%; }
.band { position: relative; height: 22px; min-width: 120px; }
.band::before { content: ""; position: absolute; inset: 50% 0 auto; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--surface-3); }
.band-range { position: absolute; top: 50%; height: 10px; margin-top: -5px; left: var(--lo); width: max(calc(var(--hi) - var(--lo)), 3px);
              border-radius: 3px; background: var(--info); opacity: 0.35; }
.band-mid { position: absolute; top: 3px; bottom: 3px; left: var(--mid); width: 2px; margin-left: -1px; background: var(--text-2); }
.band-dot { position: absolute; z-index: 1; top: 50%; left: var(--v); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
            border-radius: 50%; background: var(--text); box-shadow: 0 0 0 2px var(--surface); }
.band.is-off .band-dot { background: var(--warning); }
.band-legend { display: inline-flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-weight: 400; }
.band-legend span { display: inline-flex; align-items: center; gap: var(--s-1-5); }
.band-legend i { display: inline-block; }
.band-legend .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text); }
.band-legend .range { width: 14px; height: 8px; border-radius: 2px; background: var(--info); opacity: 0.5; }
.band-legend .mid { width: 2px; height: 10px; background: var(--text-2); }

.chips { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
.chip.is-small { height: 24px; padding: 0 var(--s-2); font-size: var(--text-xs); }

.mana { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px;
        font: 600 11px/1 var(--mono); color: #10151a; background: var(--mana-generic, #b9c2ca); }
.mana-white { background: var(--mana-white); }
.mana-blue { background: var(--mana-blue); }
.mana-black { background: var(--mana-black); }
.mana-red { background: var(--mana-red); }
.mana-green { background: var(--mana-green); }
.mana-generic { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
td .mana:empty { width: 12px; height: 12px; vertical-align: -1px; }
.cost { display: inline-flex; gap: 2px; white-space: nowrap; }

.curve-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-2); height: 190px; padding: var(--s-4) var(--s-5) var(--s-3); }
.curve-col { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: var(--s-1); min-width: 0; }
.curve-n { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.curve-stack { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 44px; height: 100%; }
.seg { display: block; height: var(--h); }
.seg-other { background: var(--text-3); border-radius: 3px 3px 0 0; }
.seg-creature { background: var(--accent); }
.seg-other + .seg-creature { border-radius: 0; }
.curve-stack .seg:only-child, .seg-other[style*="--h: 0.0%"] + .seg-creature { border-radius: 3px 3px 0 0; }
.curve-label { font-size: var(--text-xs); color: var(--text-3); }
.legend .sw { width: 10px; height: 10px; border-radius: 2px; }
.sw-creature { background: var(--accent); }
.sw-other { background: var(--text-3); }

.facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; }
.facts div { display: flex; gap: var(--s-2); align-items: baseline; }
.facts dt { font-size: var(--text-sm); color: var(--text-3); }
.facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.facts.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-5); }
.facts.is-grid div { display: grid; gap: 0; }
@media (max-width: 640px) { .facts.is-grid { grid-template-columns: minmax(0, 1fr); } }

.land-dist { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s-1-5); height: 72px; margin: var(--s-2) 0; }
.land-bar { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: var(--s-1); }
.land-bar span { align-self: end; width: 100%; max-width: 36px; height: var(--h); min-height: 1px; border-radius: 3px 3px 0 0; background: var(--info); }
.land-bar.is-risk span { background: var(--text-4); }
.land-bar b { font-size: var(--text-xs); font-weight: 500; color: var(--text-3); }

.roles .group-row th { padding-top: var(--s-4); background: var(--surface); font-size: var(--text-xs); font-weight: 600;
                       letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.roles tbody + tbody .group-row th { border-top: 1px solid var(--border-strong); }

.axes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--s-4); }
.axis { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4) var(--s-5); }
.axis-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.axis-head h3 { font-size: var(--text-lg); }
.axis-verdict { font-weight: 500; }
.axis-part { display: grid; gap: var(--s-1); margin-top: var(--s-1); }
.packages { margin-top: var(--s-4); }
.side-roles { display: grid; gap: var(--s-3); }
.side-roles > div { display: grid; gap: var(--s-1); }

.reading summary { cursor: pointer; font-weight: 500; color: var(--text-2); }
.reading summary:hover { color: var(--text); }
.reading[open] summary { border-bottom: 1px solid var(--border); }

.change-panel { display: grid; gap: var(--s-3); border-color: var(--accent-line); }
.change-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.change-what { font-size: var(--text-xl); font-weight: 600; }
.change-panel .table :is(th, td):first-child { padding-left: 0; }
.change-panel .table :is(th, td):last-child { padding-right: 0; }
.change-issues { display: grid; gap: var(--s-1); color: var(--text-2); }

.explain-list { display: grid; }
.explain-list li { display: grid; gap: var(--s-0-5); padding: var(--s-3-5) var(--s-5); }
.explain-list li + li { border-top: 1px solid var(--border); }
.explain-list span { color: var(--text-2); font-size: var(--text-sm); }
.page-actions form { display: contents; }
@media (max-width: 640px) {
  .castable th { white-space: normal; }
  .c-band { width: 40%; }
  .band { min-width: 64px; }
}
@media (max-width: 640px) {
  .roles td.nowrap { white-space: normal; }
  .chip.is-small { height: auto; min-height: 24px; padding-block: var(--s-0-5); white-space: normal; }
}