/* ==========================================================================
   Tenfold — house stylesheet
   Grotesque sans for headlines and micro-furniture, serif for body prose,
   mono for every figure without exception. One accent. Green and red are
   reserved strictly for gain and loss.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Ground and ink */
  --ground:       #F7F6F2;
  --ground-sunk:  #EDEBE2;  /* benchmark rows, quiet bands */
  --ink:          #191814;
  --ink-2:        #3D3A32;  /* secondary text: dark, never faint */
  --ink-3:        #6A6555;  /* tertiary, used sparingly */
  --ink-ghost:    #8E8877;  /* placeholder text only, never real content */
  --rule:         #D8D4C7;
  --rule-strong:  #B4AF9D;

  /* The single accent */
  --accent:       #1A3D6D;
  --accent-sunk:  #E7EAF0;

  /* Reserved for gain and loss only */
  --gain:         #2E6B4B;
  --loss:         #A23A30;

  /* Type */
  --sans:  'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', Times, serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;

  /* Strict scale */
  --t-10: 0.6875rem;  /* 11 */
  --t-20: 0.75rem;    /* 12 */
  --t-30: 0.8125rem;  /* 13 */
  --t-40: 0.9375rem;  /* 15 */
  --t-50: 1.0625rem;  /* 17 */
  --t-60: 1.3125rem;  /* 21 */
  --t-70: 1.6875rem;  /* 27 */
  --t-80: 2.125rem;   /* 34 */
  --t-90: 2.75rem;    /* 44 */
  --t-100: 3.625rem;  /* 58 */

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
}

/* --- Reset ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-50);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

img, svg { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- Layout --------------------------------------------------------------- */

.wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}

.wrap--prose { max-width: 900px; }

/* Asymmetric two-column header: the story on the left, the state on the right */
.masthead-spacer { height: var(--s-7); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

/* --- Typographic primitives ----------------------------------------------- */

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-10);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 0 var(--s-3);
}

.eyebrow--quiet { color: var(--ink-2); }

/* Hairline rule with a small accent label above it. The only section
   furniture on the site — no boxes, no dashed borders, no cards. */
.section-head {
  margin-top: var(--s-8);
  margin-bottom: var(--s-5);
}
.section-head .eyebrow { margin-bottom: var(--s-2); }
.section-head hr {
  border: 0;
  border-top: 1px solid var(--rule-strong);
  margin: 0;
}

h1, .h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.125rem, 5.2vw, 3.625rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0;
}

h2, .h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.6875rem, 3.4vw, 2.125rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h3, .h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-60);
  line-height: 1.15;
  letter-spacing: -0.012em;
}

h4, .h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-50);
  line-height: 1.2;
}

/* Body prose — serif, and only here */
.prose {
  font-family: var(--serif);
  font-size: var(--t-50);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 64ch;
}
.prose p + p { margin-top: var(--s-4); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.standfirst {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin-top: var(--s-5);
}
.standfirst strong { color: var(--ink); font-weight: 600; }

/* Micro-furniture — labels, table headers, meta. Sans, always. */
.label {
  font-family: var(--sans);
  font-size: var(--t-10);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}

/* Figures — mono, always */
.fig {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}

.gain { color: var(--gain); }
.loss { color: var(--loss); }
.flat { color: var(--ink-2); }

/* --- Masthead ------------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule-strong);
  background: var(--ground);
}

.masthead__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-4);
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-60);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-3);
}

.wordmark__season {
  font-family: var(--sans);
  font-size: var(--t-20);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-2);
  border-left: 1px solid var(--rule-strong);
  padding-left: var(--s-3);
}

.nav {
  display: flex;
  gap: clamp(0.9rem, 2.2vw, 1.9rem);
  flex-wrap: wrap;
}

.nav a {
  font-family: var(--sans);
  font-size: var(--t-20);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--ink-2);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.nav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.nav a[aria-current='page'] { color: var(--accent); border-bottom-color: var(--accent); }

/* --- Season state block (right column of the page header) ------------------ */

.state { border-top: 1px solid var(--rule-strong); padding-top: var(--s-3); }

.state__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--rule);
}

.state__value {
  font-family: var(--mono);
  font-size: var(--t-40);
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Quarter progress — a hairline, not a widget */
.progress { margin-top: var(--s-4); }
.progress__track {
  height: 3px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
}
.progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
}
.progress__note {
  font-family: var(--mono);
  font-size: var(--t-20);
  color: var(--ink-2);
  margin-top: var(--s-2);
}

/* --- Standings table ------------------------------------------------------ */

.table-scroll { overflow-x: auto; }

.standings {
  width: 100%;
  border-collapse: collapse;
  min-width: 940px;
}

.standings thead th {
  font-family: var(--sans);
  font-size: var(--t-10);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  text-align: left;
  padding: 0 var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}

.standings th.num, .standings td.num { text-align: right; }

.standings tbody td {
  padding: var(--s-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}

.standings tbody tr:hover { background: rgba(26, 61, 109, 0.035); }

/* First cell carries a transparent rule so benchmark rows can light it up
   without shifting any other row's alignment. */
.standings tbody td:first-child {
  border-left: 2px solid transparent;
  padding-left: var(--s-4);
  width: 1%;
  white-space: nowrap;
}

.rank {
  font-family: var(--mono);
  font-size: var(--t-50);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.entry-name {
  font-family: var(--sans);
  font-size: var(--t-50);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.008em;
}
a.entry-name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.entry-meta {
  font-family: var(--sans);
  font-size: var(--t-30);
  font-weight: 400;
  color: var(--ink-2);
  margin-top: 3px;
  line-height: 1.35;
}

.ret {
  font-family: var(--mono);
  font-size: var(--t-70);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.022em;
  white-space: nowrap;
}

.value {
  font-family: var(--mono);
  font-size: var(--t-50);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pick-cell { white-space: nowrap; }
.pick-cell .tk {
  font-family: var(--mono);
  font-size: var(--t-30);
  font-weight: 500;
  color: var(--ink);
}
.pick-cell .pc {
  font-family: var(--mono);
  font-size: var(--t-30);
  margin-left: var(--s-2);
  font-variant-numeric: tabular-nums;
}

.move {
  font-family: var(--mono);
  font-size: var(--t-40);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.move__caret { font-size: 0.72em; margin-right: 3px; color: var(--ink-3); }

/* Benchmark rows — tinted, accent-ruled, and labelled. A human sitting
   below one of these should be unmissable. */
.standings tr.is-benchmark td { background: var(--ground-sunk); }
.standings tr.is-benchmark td:first-child { border-left-color: var(--accent); }
.standings tr.is-benchmark .entry-name { color: var(--accent); }
.standings tr.is-benchmark .rank { color: var(--accent); }
.standings tr.is-benchmark .entry-meta { color: var(--accent); font-weight: 500; }

/* --- Table on small screens: same data, stacked, still no card chrome ----- */

/* Stacks at the point the table would otherwise need horizontal scroll */
@media (max-width: 940px) {
  .standings { min-width: 0; }
  .standings thead { display: none; }
  .standings, .standings tbody, .standings tr, .standings td { display: block; }

  .standings tbody tr {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'rank  entry entry'
      'rank  ret   ret'
      'blank value move'
      'blank best  worst';
    column-gap: var(--s-4);
    row-gap: var(--s-3);
    padding: var(--s-5) 0 var(--s-6) var(--s-3);
    border-bottom: 1px solid var(--rule);
    border-left: 2px solid transparent;
  }
  .standings tbody tr:hover { background: none; }
  .standings tbody tr.is-benchmark { border-left-color: var(--accent); background: var(--ground-sunk); }
  .standings tbody tr.is-benchmark td { background: none; }

  .standings tbody td { padding: 0; border: 0; }
  .standings tbody td:first-child { border-left: 0; padding-left: 0; }
  .standings th.num, .standings td.num { text-align: left; }

  td[data-cell='rank']  { grid-area: rank; }
  td[data-cell='entry'] { grid-area: entry; }
  td[data-cell='ret']   { grid-area: ret; margin-bottom: var(--s-2); }
  td[data-cell='value'] { grid-area: value; }
  td[data-cell='move']  { grid-area: move; }
  td[data-cell='best']  { grid-area: best; }
  td[data-cell='worst'] { grid-area: worst; }

  /* The column headings become per-figure labels — same micro-furniture,
     same sans, just relocated. */
  td[data-cell='value']::before,
  td[data-cell='move']::before,
  td[data-cell='best']::before,
  td[data-cell='worst']::before {
    content: attr(data-label);
    display: block;
    font-family: var(--sans);
    font-size: var(--t-10);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-2);
    margin-bottom: 3px;
  }
  .standings tr.is-benchmark td[data-cell='value']::before,
  .standings tr.is-benchmark td[data-cell='move']::before,
  .standings tr.is-benchmark td[data-cell='best']::before,
  .standings tr.is-benchmark td[data-cell='worst']::before { color: var(--accent); }

  .ret { font-size: var(--t-70); }
  .value { font-size: var(--t-50); }
}

@media (max-width: 400px) {
  .standings tbody tr {
    grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-3);
  }
  .ret { font-size: var(--t-60); }
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  margin-top: var(--s-9);
  border-top: 1px solid var(--rule-strong);
  padding-block: var(--s-6) var(--s-8);
}

.site-footer .disclaimer {
  font-family: var(--serif);
  font-size: var(--t-40);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 68ch;
}

.site-footer__meta {
  font-family: var(--sans);
  font-size: var(--t-20);
  color: var(--ink-3);
  margin-top: var(--s-4);
}

/* --- Roster (shown while picks are still sealed) --------------------------- */

.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0 clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--rule);
}
.roster__item {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
}

/* --- Utilities ------------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- States --------------------------------------------------------------- */

.loading, .error {
  font-family: var(--sans);
  font-size: var(--t-40);
  color: var(--ink-2);
  padding-block: var(--s-7);
}
.error strong { color: var(--loss); font-weight: 600; }
.error code {
  font-family: var(--mono);
  font-size: var(--t-30);
  background: var(--ground-sunk);
  padding: 2px 5px;
}

/* ==========================================================================
   Draft page (draft.html)
   Public page on the main site shell. Hairline rules, no boxes, sans for
   furniture, serif for prose, mono for every figure.
   ========================================================================== */

/* --- Standing notice ------------------------------------------------------ */

.notice {
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--rule-strong);
  padding-block: var(--s-4) var(--s-5);
  margin-top: var(--s-6);
}
.notice ul { margin-top: var(--s-3); max-width: 74ch; }
.notice li {
  font-family: var(--serif);
  font-size: var(--t-40);
  line-height: 1.55;
  color: var(--ink-2);
  padding-left: var(--s-4);
  position: relative;
  padding-block: 3px;
}
.notice li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 5px; height: 1px;
  background: var(--ink-3);
}
.notice li strong { color: var(--ink); font-weight: 600; }

/* --- Two-column builder --------------------------------------------------- */

.draft-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  grid-template-areas: 'main rail';
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: var(--s-7);
}
.draft-main { grid-area: main; min-width: 0; }

/* Sticky, and capped to the viewport so it cannot scroll away on a long
   list of picks — by pick seven the counter and rules had gone. */
.draft-rail {
  grid-area: rail;
  position: sticky;
  top: var(--s-4);
  align-self: start;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-bottom: var(--s-4);
}

@media (max-width: 940px) {
  .draft-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'progress' 'main' 'rules';
    gap: var(--s-6);
  }
  /* The rail dissolves so the counter sits above the builder on a phone */
  .draft-rail {
    display: contents;
    position: static;
    max-height: none;
    overflow: visible;
  }
  .rail-progress { grid-area: progress; }
  .rail-rules { grid-area: rules; }
}

/* --- Form furniture ------------------------------------------------------- */

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-6);
}
@media (max-width: 560px) {
  .fields { grid-template-columns: minmax(0, 1fr); }
}

.field { display: block; }
.field > .label { display: block; margin-bottom: var(--s-2); }
.field__hint {
  font-family: var(--sans);
  font-size: var(--t-20);
  color: var(--ink-2);
  margin-top: var(--s-2);
  display: block;
  max-width: 52ch;
}

.input {
  font-family: var(--sans);
  font-size: var(--t-50);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: var(--s-2) 0;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: var(--ink-ghost); }
.input:focus { border-bottom-color: var(--accent); }
.input:disabled { color: var(--ink-3); border-bottom-style: dotted; }

/* --- League code ---------------------------------------------------------- */

.league-field { max-width: 26rem; }
.code-input {
  font-family: var(--mono);
  font-size: var(--t-60);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.code-input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--sans); }

.code-state {
  font-family: var(--sans);
  font-size: var(--t-40);
  font-weight: 500;
  margin-top: var(--s-3);
  min-height: 1.4em;
}
.code-state--ok { color: var(--accent); }
.code-state--none { color: var(--ink-2); font-weight: 400; }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  font-family: var(--sans);
  font-size: var(--t-20);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--accent);
  border-radius: 0;
  background: var(--accent);
  color: var(--ground);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn:hover:not(:disabled) { background: #16345C; border-color: #16345C; }
.btn:disabled {
  background: transparent;
  color: var(--ink-3);
  border-color: var(--rule-strong);
  cursor: not-allowed;
}
.btn--ghost { background: transparent; color: var(--accent); }
.btn--ghost:hover { background: var(--accent-sunk); border-color: var(--accent); color: var(--accent); }

.btn-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; margin-top: var(--s-5); }

/* --- Search --------------------------------------------------------------- */

.search-input { font-size: var(--t-60); }

.results { border-top: 1px solid var(--rule-strong); margin-top: var(--s-4); }

.result {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: baseline;
  width: 100%;
  text-align: left;
  padding: var(--s-3) var(--s-2);
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  cursor: pointer;
  font: inherit;
}
.result:hover:not(:disabled), .result.is-active { background: var(--accent-sunk); }
.result__tk { font-family: var(--mono); font-size: var(--t-40); font-weight: 500; color: var(--ink); }
.result__name { font-family: var(--sans); font-size: var(--t-40); color: var(--ink); }
/* Between the name and its details, at the details' size, so it reads as the
   first of their separators rather than as part of the name. */
.result__sep { font-family: var(--sans); font-size: var(--t-20); color: var(--ink-3); white-space: pre; }
.result__meta { font-family: var(--sans); font-size: var(--t-20); color: var(--ink-2); margin-top: 2px; }
.result__cap { font-family: var(--mono); font-size: var(--t-30); color: var(--ink-2); white-space: nowrap; }
.result:disabled { cursor: default; }
.result:disabled .result__tk,
.result:disabled .result__name { color: var(--ink-3); }
.result__added {
  font-family: var(--sans);
  font-size: var(--t-10);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  white-space: nowrap;
}

.search-empty, .search-hint {
  font-family: var(--sans);
  font-size: var(--t-30);
  color: var(--ink-2);
  padding-block: var(--s-4);
}

@media (max-width: 560px) {
  .result { grid-template-columns: 4.75rem minmax(0, 1fr); }
  .result__cap { grid-column: 2; font-size: var(--t-20); }
}

/* --- The picks ------------------------------------------------------------ */

/* One standing line about reference prices, rather than the full caveat
   repeated on all ten rows. Each row still carries "reference only". */
.price-caveat {
  font-family: var(--serif);
  font-size: var(--t-40);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 68ch;
  margin-bottom: var(--s-5);
}
.price-caveat strong { color: var(--ink); font-weight: 600; }

.picks { border-top: 1px solid var(--rule-strong); }

.pick {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0 var(--s-4);
  padding-block: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.pick__n {
  font-family: var(--mono);
  font-size: var(--t-50);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}

.pick__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  flex-wrap: wrap;
}
.pick__id { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; min-width: 0; }
.pick__tk { font-family: var(--mono); font-size: var(--t-50); font-weight: 500; color: var(--ink); }
.pick__name { font-family: var(--sans); font-size: var(--t-50); font-weight: 600; color: var(--ink); }

.pick__controls { display: flex; align-items: center; gap: var(--s-4); flex-shrink: 0; }

/* Destructive, so it stays quiet: no underline, no accent, no red. */
.pick__remove {
  font-family: var(--sans);
  font-size: var(--t-20);
  font-weight: 500;
  color: var(--ink-3);
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  text-decoration: none;
}
.pick__remove:hover { color: var(--ink); }

.pick__meta {
  font-family: var(--sans);
  font-size: var(--t-30);
  color: var(--ink-2);
  margin-top: 5px;
  line-height: 1.45;
}
.pick__meta .fig { color: var(--ink); }
.pick__ref { white-space: nowrap; }

/* --- Held: two-state segmented control ------------------------------------ */

.held { display: flex; align-items: center; gap: var(--s-3); }
.held__label {
  font-family: var(--sans);
  font-size: var(--t-10);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  white-space: nowrap;
}

.seg { display: inline-flex; border: 1px solid var(--rule-strong); }
.seg__opt { position: relative; display: block; margin: 0; }
.seg__opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.seg__opt span {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-20);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  padding: 5px 13px;
  cursor: pointer;
  user-select: none;
}
.seg__opt + .seg__opt span { border-left: 1px solid var(--rule-strong); }
.seg__opt input:checked + span { background: var(--accent); color: var(--ground); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg__opt:hover input:not(:checked) + span { background: var(--accent-sunk); color: var(--accent); }

/* --- Thesis --------------------------------------------------------------- */

.thesis-wrap { position: relative; margin-top: var(--s-4); }

.thesis {
  font-family: var(--serif);
  font-size: var(--t-50);
  line-height: 1.5;
  color: var(--ink);
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: var(--s-2) 4.75rem var(--s-2) 0;
  resize: none;
  overflow: hidden;
  display: block;
}
.thesis::placeholder { color: var(--ink-ghost); }
.thesis:focus { border-bottom-color: var(--accent); }

/* Sits at the right end of the field itself, on the last line */
.charcount {
  position: absolute;
  right: 0;
  bottom: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-20);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.charcount.is-full { color: var(--accent); }

.pick-missing {
  font-family: var(--sans);
  font-size: var(--t-20);
  font-weight: 500;
  color: var(--accent);
  margin-top: var(--s-3);
}

.picks-empty {
  font-family: var(--serif);
  font-size: var(--t-40);
  color: var(--ink-2);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
}

/* --- Rail: counter, allocation, rules -------------------------------------- */

.counter { border-top: 1px solid var(--rule-strong); padding-top: var(--s-3); }
.counter__figure {
  font-family: var(--mono);
  font-size: var(--t-100);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.counter__of { font-size: var(--t-60); color: var(--ink-2); letter-spacing: -0.02em; }
.counter__note { font-family: var(--sans); font-size: var(--t-30); color: var(--ink-2); margin-top: var(--s-2); }

.concentration {
  font-family: var(--mono);
  font-size: var(--t-30);
  color: var(--ink);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.concentration:empty { display: none; }

/* Hairline outlines that fill, rather than ten solid blocks of accent */
.slots {
  display: grid;
  grid-template-columns: repeat(var(--slot-count, 10), 1fr);
  gap: 2px;
  margin-top: var(--s-5);
}
.slot {
  height: 30px;
  border: 1px solid var(--rule-strong);
  background: transparent;
}
.slot.is-filled {
  border-color: var(--accent);
  background: var(--accent-sunk);
}
.slots-note {
  font-family: var(--mono);
  font-size: var(--t-20);
  color: var(--ink-2);
  margin-top: var(--s-2);
  font-variant-numeric: tabular-nums;
}

.rail-rules { margin-top: var(--s-7); }
.rules-list { border-top: 1px solid var(--rule); }
.rules-list li {
  font-family: var(--serif);
  font-size: var(--t-40);
  line-height: 1.5;
  color: var(--ink-2);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.rules-list .fig { color: var(--ink); }
.rules-list strong { color: var(--ink); font-weight: 600; }

/* --- Export ---------------------------------------------------------------- */

.gate { margin-top: var(--s-4); }
.gate li {
  font-family: var(--sans);
  font-size: var(--t-30);
  color: var(--ink-2);
  padding-block: 3px;
  padding-left: var(--s-4);
  position: relative;
}
.gate li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 1px;
  background: var(--accent);
}
.gate .fig { color: var(--ink); }

.gate-ready {
  font-family: var(--serif);
  font-size: var(--t-50);
  color: var(--ink);
  margin-top: var(--s-4);
  max-width: 60ch;
}

.export-kind {
  font-family: var(--sans);
  font-size: var(--t-20);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-top: var(--s-5);
}

.export-json {
  font-family: var(--mono);
  font-size: var(--t-30);
  line-height: 1.55;
  color: var(--ink);
  background: var(--ground-sunk);
  padding: var(--s-4);
  margin-top: var(--s-3);
  max-height: 30rem;
  overflow: auto;
  white-space: pre;
  -moz-tab-size: 2;
  tab-size: 2;
}

.copy-state {
  font-family: var(--sans);
  font-size: var(--t-30);
  color: var(--ink-2);
}

.mailto-note {
  font-family: var(--sans);
  font-size: var(--t-20);
  color: var(--ink-2);
  margin-top: var(--s-3);
  max-width: 60ch;
}

/* --- League banner -------------------------------------------------------- */

.league-banner {
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--rule-strong);
  padding-block: var(--s-4) var(--s-5);
  margin-top: var(--s-6);
}
.league-banner--none { border-top-color: var(--rule-strong); }

.league-banner__name {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-60);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.league-banner--none .league-banner__name { color: var(--ink); }

.league-banner__meta {
  font-family: var(--sans);
  font-size: var(--t-30);
  color: var(--ink-2);
  margin-top: var(--s-2);
  max-width: 64ch;
  line-height: 1.5;
}
.league-banner__warn {
  font-family: var(--serif);
  font-size: var(--t-40);
  line-height: 1.5;
  color: var(--ink);
  margin-top: var(--s-3);
  max-width: 64ch;
}
/* An open league offered from a personal portfolio: its name and close, then
   the button to enter it, close under the line that explains why. */
.league-banner__invite { margin-top: var(--s-4); }
.league-banner__invite .btn-row { margin-top: var(--s-3); }

/* --- Submit result -------------------------------------------------------- */

.result-panel {
  border-top: 2px solid var(--accent);
  padding-top: var(--s-4);
  margin-top: var(--s-5);
}
.result-panel--error { border-top-color: var(--ink); }

.result-lede {
  font-family: var(--sans);
  font-size: var(--t-60);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: var(--s-4);
  max-width: 46ch;
}
.result-panel .prose { margin-bottom: var(--s-5); }
.result-panel .gate { margin-bottom: var(--s-4); }
.result-panel .state { margin-top: var(--s-4); max-width: 26rem; }

/* A pick the server objected to. Accent, not red: red is reserved for loss. */
.pick-missing.is-error {
  color: var(--accent);
  font-weight: 600;
  padding-left: var(--s-3);
  border-left: 2px solid var(--accent);
}

/* --- Empty and partial leaderboard states --------------------------------- */

.empty-state { padding-block: var(--s-6) var(--s-8); max-width: 62ch; }

.empty-state__lede {
  font-family: var(--sans);
  font-size: clamp(1.3125rem, 3vw, 1.6875rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--s-4);
}
.empty-state .prose + .prose { margin-top: var(--s-4); }

/* ==========================================================================
   Creator, head-to-head, consensus and rules pages
   ========================================================================== */

/* --- picks table (creator page) ------------------------------------------- */

.standings--picks { min-width: 760px; }

.pick-thesis {
  font-family: var(--serif);
  font-size: var(--t-40);
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: var(--s-3);
  max-width: 60ch;
}

.disclosure {
  font-family: var(--sans);
  font-size: var(--t-20);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.disclosure.is-held { color: var(--accent); font-weight: 600; }

/* --- chart ----------------------------------------------------------------
   Single scale, gridlines, a marked zero line, labels outside the plot so no
   axis ever runs through them. */

.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; }

.chart__grid { stroke: var(--rule); stroke-width: 1; }
.chart__zero { stroke: var(--ink-2); stroke-width: 1.5; }
.chart__bar  { fill: currentColor; }
.chart__bar.gain { fill: var(--gain); }
.chart__bar.loss { fill: var(--loss); }
.chart__bar.flat { fill: var(--rule-strong); }

.chart__label {
  font-family: var(--mono);
  font-size: 13px;
  fill: var(--ink);
}
.chart__value {
  font-family: var(--mono);
  font-size: 12px;
  fill: var(--ink-2);
}
.chart__value.gain { fill: var(--gain); }
.chart__value.loss { fill: var(--loss); }
.chart__tick {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--ink-2);
}

/* --- head to head ---------------------------------------------------------- */

.choose-select {
  font-family: var(--sans);
  font-size: var(--t-40);
  padding-right: var(--s-4);
}

.h2h { table-layout: fixed; min-width: 680px; }
.h2h td { vertical-align: top; width: 50%; }
.h2h tr.is-shared td { background: var(--accent-sunk); }
.h2h__empty { color: var(--ink-3); }

@media (max-width: 940px) {
  .h2h { min-width: 0; }
  .h2h, .h2h tbody, .h2h tr, .h2h td { display: block; width: auto; }
  .h2h thead { display: none; }
  .h2h tr { border-bottom: 1px solid var(--rule-strong); padding-block: var(--s-4); }
  .h2h td { border: 0; padding: var(--s-3) 0; }
  .h2h td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--sans);
    font-size: var(--t-10);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-2);
    margin-bottom: var(--s-2);
  }
}

/* --- consensus: lone picks ------------------------------------------------
   Given real prominence. A share one person backed is the more interesting
   story, so it gets a block rather than a table row. */

.lone {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0 clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--rule-strong);
}

.lone__item {
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
}

.lone__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.lone__tk {
  font-family: var(--mono);
  font-size: var(--t-60);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.lone__name {
  font-family: var(--sans);
  font-size: var(--t-40);
  color: var(--ink-2);
}
.lone__ret {
  font-family: var(--mono);
  font-size: var(--t-50);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.lone__thesis {
  font-family: var(--serif);
  font-size: var(--t-50);
  line-height: 1.5;
  color: var(--ink);
  margin-top: var(--s-3);
  max-width: 46ch;
}

.lone__by { margin-top: var(--s-3); }
.consensus__who {
  font-family: var(--sans);
  font-size: var(--t-30);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.consensus__who:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Not flex: a flex container turns the ", " separator into its own item
   and collapses the trailing space, running names together. */
.consensus__list { line-height: 1.5; }

/* --- rules ----------------------------------------------------------------- */

.rule-block { margin-top: var(--s-7); }
.rule-block hr {
  border: 0;
  border-top: 1px solid var(--rule-strong);
  margin: 0 0 var(--s-4);
}
.rule-block .eyebrow { margin-bottom: var(--s-2); }
.rule-block .prose { max-width: 68ch; }

/* Divergence is not agreement: no tint, just a quiet rule marking that each
   side stands alone on that row. */
.h2h tr.is-divergent td:first-child { border-left: 2px solid var(--rule-strong); padding-left: var(--s-4); }
@media (max-width: 940px) {
  .h2h tr.is-divergent td:first-child { border-left: 0; padding-left: 0; }
}

/* --- the race chart -------------------------------------------------------
   Identity is direct-labelled at the end of each line rather than keyed to a
   legend: fourteen swatches in a box is not a thing anyone decodes.

   Creators are hairlines in ink, the indices are the accent and heavier. That
   is deliberate rather than decorative — the comparison the format exists to
   make is how many creators sit above the line the market drew, and colouring
   lines by identity would need fourteen hues this palette does not have.
   Green and red stay reserved for gain and loss. */

.race { margin: 0 0 var(--s-6); }
.race svg { display: block; width: 100%; height: auto; }
.race figcaption { margin-top: var(--s-2); }

.race__grid { stroke: var(--rule); stroke-width: 1; }
.race__zero { stroke: var(--ink-2); stroke-width: 1.5; }

.race__line {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.25;
  stroke-opacity: 0.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.race__line.is-benchmark {
  stroke: var(--accent);
  stroke-width: 2.25;
  stroke-opacity: 1;
}

.race__dot { fill: var(--ink-2); fill-opacity: 0.55; }
.race__dot.is-benchmark { fill: var(--accent); fill-opacity: 1; }

/* Joins a displaced label back to the point it belongs to. */
.race__leader { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 2 3; }

.race__name {
  font-family: var(--sans);
  font-size: 12px;
  fill: var(--ink);
}
.race__name.is-benchmark {
  fill: var(--accent);
  font-weight: 600;
}
.race__value {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--ink-2);
}
.race__value.gain { fill: var(--gain); }
.race__value.loss { fill: var(--loss); }

.race__tick {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--ink-2);
}

.chart-empty { margin-bottom: var(--s-6); }

/* Narrow screens cannot carry fourteen end-labels at a readable size, so the
   chart scrolls rather than shrinking its type into illegibility. */
@media (max-width: 700px) {
  .race { overflow-x: auto; }
  .race svg { min-width: 700px; }
}

/* --- head to head over time -----------------------------------------------
   Two series, so identity can sit in the lines themselves rather than only in
   the end-labels: one accent, one ink.

   The band between them is the page's whole question — the distance, and how
   it moved. A pale neutral wash, never green or red: the gap is not a gain or
   a loss, and those two colours mean exactly one thing here. */

.h2h-chart { margin: 0 0 var(--s-6); }
.h2h-chart svg { display: block; width: 100%; height: auto; }
.h2h-chart figcaption { margin-top: var(--s-2); }

.h2h-chart__band {
  fill: var(--accent-sunk);
  /* Even-odd so a crossing fills both lobes rather than cancelling one out.
     Lines crossing is the interesting case, not the awkward one. */
  fill-rule: evenodd;
}

.h2h-chart__line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.h2h-chart__line.is-a { stroke: var(--accent); }
.h2h-chart__line.is-b { stroke: var(--ink); }

/* The index: present, but plainly not the subject. Thinner and lighter than
   the two protagonists — and solid, because a dashed line is the universal
   mark of a reference and here the indices are competitors. */
.h2h-chart__line.is-bench {
  stroke: var(--ink-3);
  stroke-width: 1.5;
  stroke-opacity: 0.65;
}

.h2h-chart__dot.is-a { fill: var(--accent); }
.h2h-chart__dot.is-b { fill: var(--ink); }
.h2h-chart__dot.is-bench { fill: var(--ink-3); fill-opacity: 0.65; }

.h2h-chart__name {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
}
.h2h-chart__name.is-a { fill: var(--accent); }
.h2h-chart__name.is-b { fill: var(--ink); }
.h2h-chart__name.is-bench { fill: var(--ink-3); font-weight: 400; }

@media (max-width: 700px) {
  .h2h-chart { overflow-x: auto; }
  .h2h-chart svg { min-width: 640px; }
}