/* ==========================================================================
   Thirty & Five Fantasy — loads after tokens.css and styles.css.
   Same system as the flagship; this file swaps the accent to field mint and
   adds the fantasy-only pieces (status chips, scoring control, player rows).
   ========================================================================== */

:root {
  --t5-mint-400: #3ddc97;   /* field mint: fills and the board (ink on it: 10.5:1) */
  --t5-mint-800: #0b6b45;   /* mint as text on white: 6.6:1 */
  --accent: var(--t5-mint-400);
  --accent-text: var(--t5-mint-800);

  /* Player status. Always shown as a word; color is a second signal. */
  --st-out-bg: #b3261e;  --st-out-fg: #ffffff;   /* OUT, IR, SUSP: 6.5:1 */
  --st-q-bg: #fff3d3;    --st-q-fg: #7a4f00;     /* Q, D: 6.5:1 */
  --st-q-line: #8a5a00;
}

/* Fantasy tag next to the wordmark */
.ftag {
  font: 700 10px/1 var(--font-score); letter-spacing: .12em;
  background: var(--accent); color: var(--on-accent);
  padding: 4px 6px; border-radius: 3px; align-self: center;
}

/* Status chips: OUT · Q · BYE · ROLE */
.st {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 10px/1 var(--font-score); letter-spacing: .04em;
  padding: 4px 5px; border-radius: 3px; white-space: nowrap;
}
.st--out { background: var(--st-out-bg); color: var(--st-out-fg); }
.st--q { background: var(--st-q-bg); color: var(--st-q-fg); box-shadow: inset 0 0 0 1px var(--st-q-line); }
.st--bye { color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--text-muted); }
.st--role { background: var(--accent); color: var(--on-accent); }

/* Scoring format: a 3-way radio group that looks like a segmented control */
.fmt { border: 0; padding: 0; margin: 0; min-width: 0; }
.fmt legend { padding: 0; font-weight: 700; font-size: var(--fs-small); margin-bottom: var(--s-2); }
.fmt__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--line-input); border-radius: var(--r-2); overflow: hidden; }
.fmt__opt { position: relative; }
.fmt__opt + .fmt__opt { border-left: 1.5px solid var(--line-input); }
.fmt__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fmt__opt span { min-height: var(--tap); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .9375rem; color: var(--text-muted); }
.fmt__opt input:checked + span { background: var(--btn-bg); color: var(--btn-text); }
.fmt__opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }

/* Player picker */
.ppicker { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.pos-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); border-bottom: 1px solid var(--line); }
.pos-tab {
  min-height: 40px; padding: 0 2px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font: 800 1.125rem/1 var(--font-display); letter-spacing: .04em; color: var(--text-muted); cursor: pointer;
}
.pos-tab:hover { color: var(--text); }
.pos-tab[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--accent); }

.plist { display: flex; flex-direction: column; gap: var(--s-2); max-height: 336px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.plist--all { max-height: none; overflow: visible; }
.plist__note { font-size: var(--fs-small); color: var(--text-muted); padding: var(--s-3) 0; }
.pl {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 24px; gap: var(--s-3); align-items: center;
  width: 100%; min-height: 56px; padding: 6px 12px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r-2); background: var(--surface);
  transition: border-color var(--dur) var(--ease);
}
.pl:hover { border-color: var(--text-muted); }
.pl.is-top { box-shadow: 0 0 0 1px var(--text-muted); }
.pl__pos { font: 700 11px/1 var(--font-score); text-align: center; padding: 4px 0; border: 1px solid var(--text-muted); color: var(--text-muted); border-radius: 3px; }
.pl__name { display: block; font-weight: 600; font-size: .9375rem; line-height: 1.2; overflow-wrap: anywhere; }
.pl__sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; color: var(--text-muted); min-height: 16px; }
.pl__meta { font: 12px/1.2 var(--font-score); color: var(--text-muted); text-align: right; white-space: nowrap; }
.pl__tick { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-input); display: grid; place-items: center; justify-self: end; }
.pl__tick svg { width: 12px; height: 12px; opacity: 0; }
.pl[aria-pressed="true"] { border-color: var(--line-strong); background: var(--surface-2); }
.pl[aria-pressed="true"] .pl__tick { background: var(--accent); border-color: var(--line-strong); color: var(--on-accent); }
.pl[aria-pressed="true"] .pl__tick svg { opacity: 1; }
@media (max-width: 479px) {
  .pl { grid-template-columns: 40px minmax(0, 1fr) 24px; }
  .pl__meta { display: none; }
}
.pick__pos { font: 700 10px/1 var(--font-score); color: var(--accent); }

.pos-head {
  margin-top: var(--s-6); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line);
  font: 800 1.75rem/1 var(--font-display); letter-spacing: .02em; display: flex; align-items: baseline; gap: var(--s-2);
  scroll-margin-top: 140px;
}
.pos-head:first-child { margin-top: var(--s-3); }
.pos-head .num { font-size: var(--fs-small); font-weight: 400; color: var(--text-muted); }

/* Hero board: big points readout instead of the 0:30 clock */
.board-clock { width: min(300px, 80%); }
@media (min-width: 960px) { .board-clock { width: min(540px, 88%); } }
.board-caption {
  position: absolute; left: 50%; transform: translateX(-50%); top: 190px; margin: 0;
  font: 700 12px/1 var(--font-score); letter-spacing: .14em; color: var(--board-muted); white-space: nowrap;
}
@media (min-width: 960px) { .board-caption { top: 330px; } .phone { top: 380px; } }
@media (max-width: 959px) { .phone { top: 220px; } .split__board { height: 520px; } }
.pm-st { font: 700 7.5px/1 var(--font-score); padding: 3px; border-radius: 2px; text-align: center; align-self: start; }
.pm-row { grid-template-columns: 16px 36px minmax(0, 1fr); }

/* Signup preview: a mini lineup on the phone, filled from the picks */
.pm-lu { background: var(--t5-ink-900); border-radius: 8px; overflow: hidden; margin-top: 8px; }
.pm-lu__h, .pm-lu__r { display: grid; grid-template-columns: 30px minmax(0, 1fr) 34px; gap: 6px; align-items: center; padding: 7px 10px; }
.pm-lu__h { font: 700 7px/1 var(--font-score); letter-spacing: .8px; color: var(--t5-ink-300); }
.pm-lu__r { border-top: 1px solid #23272e; }
.pm-lu__p { font: 700 7.5px/1 var(--font-score); color: var(--t5-ink-300); border: 1px solid #5a5e66; border-radius: 2px; text-align: center; padding: 2px 0; }
.pm-lu__n { font-size: 11px; font-weight: 600; color: #f2f1ec; display: flex; gap: 5px; align-items: center; min-width: 0; }
.pm-lu__t { font: 700 8px/1 var(--font-score); color: var(--t5-ink-300); text-align: right; }
.pm-lu__st { font: 700 7px/1 var(--font-score); padding: 2px 3px; border-radius: 2px; }
.pm-lu__st--out { background: var(--st-out-bg); color: var(--st-out-fg); }
.pm-lu__st--q { background: var(--st-q-bg); color: var(--st-q-fg); }

/* From the kit's copy of styles.css, which is otherwise older than the site's. */
.pick__league { font: 700 10px/1 var(--font-score); opacity: .65; }