/*
 * THE KILLER SCREEN — styling.
 *
 * Token names (--panel*, --mono, --display) match the "app-screen"
 * palette already established in public/readme.html: the marketing page
 * commits its embedded screen mockup to dark in both themes because it's
 * previewing this exact surface. This page IS that surface, so it
 * inherits the same tokens and commits the whole body to it rather than
 * nesting a card-within-a-page — on a phone, on a mat, this should read
 * as the app, not a screenshot of one.
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --panel:      #101216;
  --panel-2:    #191c22;
  --panel-ink:  #eceae5;
  --panel-mute: #8d939c;
  --panel-rule: #2b3038;
  --panel-acc:  #ff5a4d;
  --good:       #4ade80;
  --bad:        #f87171;

  --display: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--panel);
  color: var(--panel-ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--panel-acc); outline-offset: 2px; }

noscript {
  display: block; padding: 40px 20px; text-align: center;
  font-family: var(--body); color: var(--panel-mute);
}

/* ── shell ────────────────────────────────────────────────────────── */

.head, .board { max-width: 760px; margin: 0 auto; }
.head  { padding: 22px 16px 6px; }
.board { padding: 0 16px 64px; }

.wordmark { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; font-size: 18px; margin: 0; }
.tag { font-family: var(--mono); font-size: 10.5px; color: var(--panel-mute); margin: 4px 0 0; letter-spacing: .03em; }

/* ── position picker ──────────────────────────────────────────────── */

.picker { position: relative; margin-top: 16px; }
.picker-label {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--panel-mute); margin-bottom: 6px;
}
.combobox { position: relative; }
#picker-input {
  width: 100%; font-family: var(--display); font-size: 16px;
  background: var(--panel-2); border: 1px solid var(--panel-rule); border-radius: 4px;
  padding: 13px 14px;
}
#picker-input::placeholder { color: var(--panel-mute); }
.picker-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 320px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--panel-2); border: 1px solid var(--panel-rule); border-radius: 4px;
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
}
.picker-list li { padding: 10px 12px; border-radius: 3px; cursor: pointer; font-size: 14.5px; }
.picker-list li[aria-selected="true"], .picker-list li:hover { background: var(--panel-acc); color: #14161a; }

/* ── board head + ruleset toggle ──────────────────────────────────── */

.board-head {
  padding: 22px 0 6px; display: flex; flex-wrap: wrap; gap: 14px;
  align-items: flex-end; justify-content: space-between;
}
.state-name {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; font-size: clamp(19px, 4.4vw, 25px); margin: 0; line-height: 1.15;
}
.state-sub { font-family: var(--mono); font-size: 11.5px; color: var(--panel-mute); margin: 7px 0 0; }

.toggle { display: flex; gap: 6px; flex: 1 1 260px; }
.toggle button {
  flex: 1 1 auto; font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; cursor: pointer; background: transparent; color: var(--panel-mute);
  border: 1px solid var(--panel-rule); border-radius: 4px; padding: 11px 8px;
  transition: background .15s, color .15s, border-color .15s;
}
.toggle button:hover { color: var(--panel-ink); border-color: #454d59; }
.toggle button[aria-pressed="true"] {
  background: var(--panel-acc); border-color: var(--panel-acc); color: #14161a; font-weight: 700;
}

/* ── segmentation filters ─────────────────────────────────────────── */

.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 18px 0 20px; }
.filters label {
  display: flex; flex-direction: column; gap: 5px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--panel-mute);
}
.filters select {
  font-family: var(--display); font-size: 14px; background: var(--panel-2);
  border: 1px solid var(--panel-rule); border-radius: 4px; padding: 9px 10px; min-width: 122px;
}

/* ── divergence card: the shareable screenshot ────────────────────── */

.divergence-stack { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 18px; }
.divcard {
  border: 1px solid var(--panel-acc); border-radius: 6px; padding: 16px 18px;
  background: linear-gradient(180deg, rgba(255,90,77,.16), rgba(255,90,77,.04));
}
.divcard-eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--panel-acc); margin: 0 0 7px;
}
.divcard-text { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.35; margin: 0; }
.divcard-more { font-family: var(--mono); font-size: 11px; color: var(--panel-mute); margin: 0 2px; }

/* ── gym-diversity honesty note ───────────────────────────────────── */

.diversity-note {
  font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--panel-mute);
  border: 1px solid var(--panel-rule); border-left: 3px solid var(--panel-acc);
  padding: 10px 14px; border-radius: 3px; margin: 0 0 18px;
}

/* ── rows ──────────────────────────────────────────────────────────── */

.rows { border-top: 1px solid var(--panel-rule); }
.board.is-loading .rows { opacity: .5; transition: opacity .15s ease; }

.row {
  display: grid; grid-template-columns: 26px 1fr auto; column-gap: 12px; row-gap: 5px;
  align-items: start; padding: 14px 2px; border-bottom: 1px solid var(--panel-rule);
}
.row-rank {
  grid-column: 1; grid-row: 1; font-family: var(--mono); font-size: 12.5px;
  color: var(--panel-mute); font-variant-numeric: tabular-nums; padding-top: 3px;
}
.row-main { grid-column: 2; grid-row: 1; min-width: 0; }
.row-name { font-family: var(--display); font-size: 15px; font-weight: 600; }
.row-kind {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--panel-mute); margin-left: 8px;
}
.row-to { font-family: var(--mono); font-size: 11.5px; color: var(--panel-mute); margin-top: 2px; }
.row-flags { margin-top: 5px; }
.flag {
  display: inline-block; font-family: var(--mono); font-size: 10px; line-height: 1.4;
  color: var(--panel-mute); background: var(--panel-2); border: 1px solid var(--panel-rule);
  border-radius: 3px; padding: 3px 7px; max-width: 100%;
}

.row-stat { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; }
.row-pct { font-family: var(--mono); font-size: 18px; font-variant-numeric: tabular-nums; }
.row-pct.insufficient { font-size: 12px; font-style: italic; color: var(--panel-mute); white-space: normal; text-align: right; }
.row-pct.low { color: var(--panel-mute); font-weight: 500; }
.row-pct.confident { color: var(--panel-ink); font-weight: 700; }
.row-interval { font-family: var(--mono); font-size: 10.5px; color: var(--panel-mute); margin-top: 2px; }
.row-trend { font-family: var(--mono); font-size: 11px; margin-top: 3px; }
.row-trend.up { color: var(--good); }
.row-trend.down { color: var(--bad); }

.row-n {
  grid-column: 2 / -1; grid-row: 2; font-family: var(--mono); font-size: 11px;
  color: var(--panel-mute); font-variant-numeric: tabular-nums;
}
.row-bar { grid-column: 1 / -1; grid-row: 3; height: 3px; background: var(--panel-rule); border-radius: 2px; overflow: hidden; margin-top: 5px; }
.row-bar i { display: block; height: 100%; background: var(--panel-acc); border-radius: 2px; transition: width .3s ease; width: 0; }
.row.conf-insufficient { opacity: .5; }
.row.conf-insufficient .row-bar { display: none; }

/* ── empty / landing / error state ────────────────────────────────── */

.empty-state { padding: 52px 12px; text-align: center; }
.empty-state .empty-title { font-family: var(--display); font-weight: 700; font-size: 18px; margin: 0 0 8px; }
.empty-state .empty-body { font-family: var(--body); color: var(--panel-mute); font-size: 15px; margin: 0; max-width: 44ch; margin-inline: auto; }
.empty-state.error .empty-title { color: var(--panel-acc); }

/* ── footer ────────────────────────────────────────────────────────── */

.board-foot {
  padding: 16px 2px 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.7; color: var(--panel-mute);
}
.board-foot p { margin: 0 0 6px; }
.board-foot a { color: var(--panel-acc); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 420px) {
  .row-pct { font-size: 16px; }
  .state-name { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}