/* picks.css — the NFL pick'em surface.
   theme.css owns the page chrome; this file owns only what is specific to
   picking: the lobby gate, the code bar, the game rows and their states. The
   shared components (.panel, .btn, .field, .formrow, .note, .cite) are reused
   as-is, and all page chrome reads theme tokens.

   Colour is the one thing theme.css does not name for pick states, so it lives
   in exactly two token blocks below — the .picks scope and its plain-theme
   override — following the --cf-* precedent in castlefall/game.css. No literal
   colour appears outside those two blocks, and every selector here is a class
   because an id selector would put a colour literal in the component layer.

   The site is light-only with two skins, portal and plain. There is
   deliberately no dark mode and no prefers-color-scheme block. */

.picks {
  --pk-picked: #ffff99;        /* a team you have chosen */
  --pk-picked-ink: #333300;
  --pk-locked: #888888;        /* a team in a game that has kicked off */
  --pk-correct: #006600;
  --pk-missed: #aa0000;
  --pk-differs: #ffeecc;       /* a game where the two picks disagree */
  --pk-pending: #e6e6ff;       /* a change waiting on someone's answer */
}

[data-theme="plain"] .picks {
  --pk-picked: #efece0;
  --pk-picked-ink: #1a1a1a;
  --pk-locked: #9a9a95;
  --pk-correct: #1c6b3a;
  --pk-missed: #8c2a2a;
  --pk-differs: #f5f2e9;
  --pk-pending: #eef0f5;
}

/* ---------- shared chrome ---------- */

.picks .lede { margin: 0 0 var(--stack); color: var(--fg-muted); }
.picks .note { margin: 0 0 6px; color: var(--fg-muted); font: var(--size-ui)/1.5 var(--font-ui); }

/* The site button is a 2px-tall portal control; these are thumb targets. */
.picks .btn { min-height: 34px; padding: 5px 12px; }
.picks .btn[disabled] { color: var(--fg-muted); cursor: default; }

/* The inline failure message. Hidden unless something is actually wrong, so a
   page with a dead API still looks like a page. */
.pk-conn {
  border: var(--field-border);
  border-radius: var(--radius);
  background: var(--panel-bg);
  color: var(--pk-missed);
  font: var(--size-ui)/1.45 var(--font-ui);
  padding: 5px 7px;
  margin-bottom: var(--stack);
}

.pk-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: var(--stack); }
.pk-callout .pk-actions { margin-top: 6px; }
.pk-parity .btn { display: block; margin-top: 6px; }

/* ---------- gate: no lobby yet ---------- */

.pk-gate-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.pk-gate-cols .panel { margin-bottom: 0; }

fieldset.pk-policy { border: 0; margin: 0 0 var(--stack); padding: 0; }
.pk-policy legend { padding: 0; margin-bottom: 5px; color: var(--fg-muted); font: var(--size-ui)/1.4 var(--font-ui); }
.pk-radio { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 6px;
            font: var(--size-ui)/1.45 var(--font-ui); cursor: pointer; }
.pk-radio input { flex: none; margin: 2px 0 0; }
.pk-radio strong { font-weight: 700; }

/* ---------- the code bar ---------- */

.pk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
          border-bottom: var(--rule); padding-bottom: 6px; margin-bottom: var(--stack); }
.pk-code-label { color: var(--fg-muted); font: var(--size-ui)/1.4 var(--font-ui); }
.pk-code { font: 700 calc(var(--size-body) * 1.3) var(--font-mono); letter-spacing: 3px; }
/* Nobody has joined yet: the code is the only thing worth reading. */
.pk-bar.is-waiting .pk-code { font-size: calc(var(--size-body) * 1.9); letter-spacing: 6px; }
.pk-who { margin-left: auto; color: var(--fg-muted); font: var(--size-ui)/1.45 var(--font-ui); }

.pk-week { display: flex; gap: 6px; align-items: center; margin-bottom: var(--stack);
           font: var(--size-ui)/1.4 var(--font-ui); }
.pk-week .field { width: auto; }

/* ---------- parity and callouts ---------- */

.pk-parity { border: var(--hair); border-radius: var(--radius); padding: 6px 8px;
             margin-bottom: var(--stack); font: var(--size-ui)/1.5 var(--font-ui); }
.pk-parity p { margin: 0 0 6px; }
.pk-parity.is-quiet { color: var(--fg-muted); }
.pk-parity.is-even strong { font-weight: 700; }

.pk-callout { border: var(--hair); border-radius: var(--radius); padding: 6px 8px;
              margin-bottom: var(--stack); font: var(--size-ui)/1.5 var(--font-ui); }
.pk-callout p { margin: 0 0 6px; }
.pk-callout.is-pending { background: var(--pk-pending); }
.pk-callout .pk-policy { margin-bottom: 6px; }
.pk-callout .pk-radio { margin-bottom: 3px; }

.pk-parity > :last-child, .pk-callout > :last-child { margin-bottom: 0; }

/* ---------- game rows ---------- */

.pk-games { list-style: none; margin: 0; padding: 0; }
.pk-game { border-bottom: var(--hair); padding: 7px 0; }
.pk-game.is-differs { background: var(--pk-differs); }
.pk-game.is-target { box-shadow: inset 3px 0 0 var(--pk-picked); }

.pk-when { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
           margin-bottom: 4px; color: var(--fg-muted); font: var(--size-ui)/1.4 var(--font-ui); }
.pk-lock { text-transform: uppercase; letter-spacing: 1px; font-size: 0.9em; }

.pk-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.pk-team { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
           width: 100%; min-height: 40px; box-sizing: border-box;
           padding: 5px 8px; text-align: left; cursor: pointer;
           border: var(--btn-border); border-radius: var(--radius);
           background: var(--btn-bg); color: var(--fg);
           font: var(--size-ui)/1.3 var(--font-ui); }
.pk-team .pk-abbr { font-weight: 700; font-size: 1.2em; letter-spacing: 0.5px; }
.pk-team .pk-side { color: var(--fg-muted); font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.5px; }
.pk-team .pk-score { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.pk-team[disabled] { cursor: default; color: var(--pk-locked); border: var(--hair); }
.pk-team[aria-pressed="true"] { background: var(--pk-picked); color: var(--pk-picked-ink); border-color: var(--pk-picked-ink); }
.pk-team[aria-pressed="true"] .pk-side,
.pk-team[aria-pressed="true"] .pk-score { color: var(--pk-picked-ink); }
/* A pick in a started game stays legible: the lock quietens it, never hides it. */
.pk-team[aria-pressed="true"][disabled] { background: var(--pk-picked); color: var(--pk-picked-ink); border-color: var(--pk-picked-ink); }

.pk-show { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px;
           font: var(--size-ui)/1.4 var(--font-ui); }
.pk-cell { border: var(--hair); border-radius: var(--radius); padding: 1px 5px; color: var(--fg-muted); }
.pk-cell strong { color: var(--fg); }
.pk-cell.is-empty { font-style: italic; }
.pk-cell.is-hidden { font-style: italic; }
.pk-cell.is-correct { border-color: var(--pk-correct); color: var(--pk-correct); }
.pk-cell.is-correct strong { color: var(--pk-correct); }
.pk-cell.is-missed { border-color: var(--pk-missed); color: var(--pk-missed); }
.pk-cell.is-missed strong { color: var(--pk-missed); }
.pk-amended { margin: 4px 0 0; }

/* ---------- standings ---------- */

.pk-stat { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0;
           border-bottom: var(--hair); font: var(--size-ui)/1.6 var(--font-ui); }
.pk-stat:last-of-type { border-bottom: 0; }
.pk-stat-label { overflow-wrap: anywhere; }
.pk-num { font-variant-numeric: tabular-nums; }

/* ---------- the one breakpoint ---------- */

@media (max-width: 640px) {
  .pk-gate-cols { grid-template-columns: 1fr; }
  .pk-gate-cols .panel { margin-bottom: var(--stack); }
  /* Team buttons are the primary touch target on this page. */
  .pk-team { min-height: 48px; padding: 6px 9px; }
  .picks .btn { min-height: 44px; }
}