/* Ten Yards — one stylesheet, no build step, no framework.
   Committed dark: this is a money product sitting next to Fantrax's dark lobby,
   and a half-hearted light mode would read as less serious rather than more
   accessible. Contrast is checked against the dark palette, not averaged. */

:root {
  --bg:        #080b0f;
  --bg-raise:  #0e1319;
  --bg-row:    #11171e;
  --bg-hover:  #161d26;
  --line:      #1f2933;
  --line-soft: #161e26;

  --ink:       #e8eef5;   /* 15.8:1 on --bg */
  --ink-dim:   #9aa8b8;   /*  7.1:1 on --bg */
  --ink-faint: #6b7887;   /*  4.6:1 on --bg */

  --green:     #4ade80;
  --green-dim: #16351f;
  --gold:      #fbbf24;
  --blue:      #60a5fa;

  /* The prize ladder (his ask, 2026-08-16: "the 600 bucks for the second prize —
     maybe something else like color"). 1st keeps --green: green already means money
     here. 2nd is the EXISTING --gold, given a dark wash the same way --green-dim
     washes --green. 3rd is a quieter member of the same warm family — deliberately
     dimmer than gold so 1st > 2nd > 3rd still reads by brightness alone, and warm
     rather than gray so third place reads as a prize, not an absence. All measured
     on the darkest-to-lightest surfaces they sit on: gold 8.4:1 on its wash and
     10.2:1 on --bg-hover; bronze 6.8:1 on its wash and 7.3:1 on --bg-hover — every
     pairing clears the 4.5:1 AA floor the old chip-3 gray was chosen against. */
  --gold-dim:   #362a0e;
  --bronze:     #d3a15c;
  --bronze-dim: #2a2214;

  --radius: 10px;
  --pad: clamp(1rem, 4vw, 2.5rem);
  --measure: 68ch;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  font-feature-settings: "tnum" 0;
  /* The page itself must never scroll sideways. Wide tables scroll inside
     .table-scroll instead — see the rule further down. */
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 650; }
h3 { font-size: 1.05rem; font-weight: 620; }
p  { margin: 0 0 1em; }
a  { color: var(--blue); }

.muted { color: var(--ink-dim); }
.num   { text-align: right; font-variant-numeric: tabular-nums; }

.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 {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--green); color: #04120a; padding: 0.6rem 1rem; font-weight: 600;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }

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

main, .site-head, .site-foot { max-width: 1180px; margin-inline: auto; padding-inline: var(--pad); }

.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}
/* flex-shrink:0 + nowrap: once the mobile header became a nowrap row, the flex squeeze
   landed on the wordmark and broke it to "Ten / Yards" over two lines. The brand name is
   the one thing in the header that may never wrap. */
.wordmark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: var(--ink);
  flex-shrink: 0;
}
.wordmark-text { white-space: nowrap; }

/* The mark is the painted field number "10" with its directional arrow — the same
   drawing as the favicon, deliberately, so the browser tab and the header agree. It
   was a green "FO" badge (Front Office) until 2026-08-13.
   Built in CSS rather than shipped as an image: it is two shapes and a numeral, and an
   <img> here would be a request that can 404 on the one element that appears on every
   page. --field/--paint/--chalk are the mark's own colours and are used NOWHERE else —
   green already means "money" on this site and the mark must not read as a status. */
.wordmark-mark {
  --field: #14201a;
  --chalk: #f2f4f1;
  --paint: #c0501c;
  position: relative;
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 7px;
  background: var(--field);
  border: 1px solid #22332a;
  overflow: hidden;
}
.wordmark-num {
  /* Condensed like a real painted field number, which is stretched vertically rather
     than set in a narrow face. Sits slightly left to leave the arrow its lane. */
  color: var(--chalk);
  font-weight: 800; font-size: 0.86rem; line-height: 1;
  letter-spacing: -0.04em;
  transform: scaleX(0.78) translateX(-0.09rem);
}
.wordmark-arrow {
  position: absolute; right: 0.18rem; top: 50%;
  width: 0; height: 0;
  border-top: 0.24rem solid transparent;
  border-bottom: 0.24rem solid transparent;
  border-left: 0.26rem solid var(--paint);
  transform: translateY(-50%);
}
.wordmark-text { font-weight: 650; letter-spacing: -0.01em; }
.wordmark:hover .wordmark-text { color: var(--ink); }

.site-head nav { display: flex; gap: clamp(0.75rem, 3vw, 1.75rem); flex-wrap: wrap; }

/* Six nav items wrap to TWO lines at 390px, which cost ~90px of the first screen on the
   page whose entire job is getting a stranger to a league. One scrolling row instead.
   This is safe here in a way it was NOT for the lobby table (2026-08-10, where the side
   scroll hid the seat count and the Join button): nav items are secondary navigation,
   "Leagues" — the page a recruit actually needs — is first and always visible, and every
   destination is also in the footer. Nothing that only exists here is off-screen. */
@media (max-width: 640px) {
  .site-head { flex-wrap: nowrap; gap: 0.75rem; }
  .site-head nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 0.9rem;
    margin-inline-end: calc(var(--pad) * -1);
    padding-inline-end: var(--pad);
  }
  .site-head nav::-webkit-scrollbar { display: none; }
  .site-head nav a { white-space: nowrap; font-size: 0.88rem; }
}
.site-head nav a {
  color: var(--ink-dim); text-decoration: none; font-size: 0.92rem; font-weight: 500;
  padding-block: 0.2rem; border-bottom: 2px solid transparent;
}
.site-head nav a:hover { color: var(--ink); }
.site-head nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--green); }

section { margin-block: clamp(2.75rem, 8vw, 5rem); }
.page-head { margin-block: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem); }

/* The FIRST section on a page must not stack its own top margin on top of the header's
   breathing room. It was measured at ~170px of empty screen above the eyebrow at 390px —
   a third of the first screen spent on nothing, on a page selling a league to someone who
   is deciding in about four seconds whether this is a scam. */
main > section:first-child,
main > .page-head:first-child { margin-top: clamp(1.25rem, 4vw, 2.25rem); }

.lede { font-size: clamp(1rem, 2.2vw, 1.15rem); color: var(--ink-dim); max-width: var(--measure); }
.eyebrow {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--green); margin-bottom: 0.9rem;
}

.section-head { margin-bottom: 1.25rem; }
.section-head h2 { margin-bottom: 0.35rem; }

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero { padding-top: 0; }
.hero h1 { max-width: 20ch; }

.stat-row {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: clamp(1.75rem, 5vw, 2.75rem);
}
.stat { background: var(--bg-raise); padding: 1.25rem 1.35rem; }
.stat-value { display: block; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat-label { display: block; font-size: 0.86rem; color: var(--ink-dim); margin-top: 0.3rem; }
.stat-hero .stat-value { color: var(--green); }

/* ── tables ──────────────────────────────────────────────────────────────── */

/* The one place horizontal scroll is allowed. Without this the lobby table
   pushes the whole document sideways on a phone. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
  -webkit-overflow-scrolling: touch;
}

table { border-collapse: collapse; width: 100%; min-width: 760px; }

thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-raise);
  text-align: left; font-size: 0.73rem; font-weight: 600;
  /* NOT --ink-faint: measured 4.14:1 on --bg-raise at this 0.73rem size, under the
     4.5:1 AA floor. The token's own comment quotes 4.6:1, which is true on --bg and
     false here — a header sitting on the raised surface is a different sum. Kept
     dimmer than --ink-dim so the header still recedes behind the data. */
  letter-spacing: 0.07em; text-transform: uppercase; color: #7d8b9b;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
thead th.num { text-align: right; }

tbody tr { border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover { background: var(--bg-hover); }
tbody th, tbody td { padding: 0.85rem 0.9rem; font-weight: 400; text-align: left; vertical-align: middle; }
tbody th { font-weight: 500; }

.cell-name { min-width: 210px; }
.league-code { display: block; font-size: 0.7rem; letter-spacing: 0.07em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
/* The league name is a LINK to that league's own page now. Deliberately not blue: a row
   of blue names would read as a link list rather than a table of leagues, and the whole
   row is already the scannable unit. The underline on hover is what says it is clickable. */
.league-name {
  display: block; font-weight: 550;
  color: var(--ink); text-decoration: none;
}
.league-name:hover { text-decoration: underline; text-underline-offset: 3px; }

.tag {
  display: inline-block; font-size: 0.72rem; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 0.12rem 0.4rem; margin-right: 0.3rem; white-space: nowrap;
}

.chip {
  display: inline-block; font-size: 0.78rem; font-variant-numeric: tabular-nums;
  border-radius: 5px; padding: 0.2rem 0.45rem; margin-right: 0.25rem; white-space: nowrap;
}
.chip-1 { background: var(--green-dim); color: var(--green); font-weight: 600; }
/* 2nd and 3rd were both a neutral gray on #1b2430 until 2026-08-16 — the ladder read
   as "first place and two footnotes". Now each place has its own tint (tokens and
   measured contrast documented at the top of the file). Weight 500, not chip-1's 600:
   the brightness ladder does the ranking, the weight keeps first the loudest. */
.chip-2 { background: var(--gold-dim); color: var(--gold); font-weight: 500; }
.chip-3 { background: var(--bronze-dim); color: var(--bronze); font-weight: 500; }
.chip-open { background: var(--green-dim); color: var(--green); font-weight: 600; }
.chip-req  { background: #1b2430; color: var(--ink-dim); }
.chip-free { background: var(--green-dim); color: var(--green); font-weight: 600; }

.payout-big { font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }

/* The prize ladder wherever prizes appear as TABLE TEXT — the pricing tiers and the
   arithmetic tables. Same three tones as the lobby chips, so a reader who learned
   "green is first, gold is second" in the lobby can follow the same thread on every
   other page. Color only, no weight change: these cells sit inside arithmetic, and
   the arithmetic staying calm is the brand. */
.prize-1 { color: var(--green); }
.prize-2 { color: var(--gold); }
.prize-3 { color: var(--bronze); }

.cell-seats { font-variant-numeric: tabular-nums; white-space: nowrap; }
.seats-filled { font-weight: 700; font-size: 1.05rem; }
.seats-total  { color: var(--ink-faint); }
.seats-pending, .seats-loading { color: var(--ink-faint); }
.seats-full   { color: var(--gold); font-weight: 600; }
.seats-error  { color: var(--ink-faint); font-size: 0.82rem; }

.row-open { background: #0d1620; }
.row-ours { background: #0d1a12; }
.row-ours th, .row-ours td { border-top: 1px solid var(--green-dim); }
.note-row td { padding-top: 0; font-size: 0.85rem; }

.table-note { margin-top: 0.85rem; font-size: 0.88rem; }

/* Phone lobby: the dollar figures are the sell, so the League | Buy-in | Prizes |
   Payout columns must land on the first screen at 390px with no page overflow —
   the rest of the row still scrolls inside .table-scroll. Three things make the
   money columns fit: the name column narrows (the name wraps), the prize chips
   stack vertically, and the long "Prizes · …" header is allowed to wrap. */
@media (max-width: 600px) {
  .lobby-table thead th,
  .lobby-table tbody th,
  .lobby-table tbody td { padding-inline: 0.5rem; }
  /* Explicit widths on the money columns: the table's 760px min-width makes auto
     layout hand its slack to every column, pushing Payout past the 390px viewport.
     A stated width is a preferred width, so the slack flows to the columns that
     scroll (Format, Draft, Seats) instead of the four that must stay on screen. */
  .lobby-table .cell-name { width: 8.5rem; min-width: 8.5rem; }
  .lobby-table .cell-buyin { width: 3rem; }
  .lobby-table .cell-prizes { width: 5.2rem; }
  .lobby-table .cell-payout { width: 3.5rem; }
  .lobby-table .th-prizes { white-space: normal; min-width: 5.2rem; }
  .lobby-table .cell-prizes .chip { display: block; width: max-content; margin: 0 0 0.25rem; }
  .lobby-table .cell-prizes .chip:last-child { margin-bottom: 0; }
  /* The seat count and the CTA, mirrored into the name cell so the only action on
     the page survives the first screen. The real Seats and Join cells still exist
     and still scroll — this is a duplicate, not a move, so nothing changes for a
     wide viewport or for the JS that fills seat counts by data-seats. */
  .lobby-table .name-cta {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 0.5rem; font-weight: 400;
  }
  .lobby-table .name-cta .btn { font-size: 0.8rem; padding: 0.35rem 0.7rem; }
  .lobby-table .name-cta-seats { font-size: 0.8rem; color: var(--ink-dim); white-space: nowrap; }
}
/* Off everywhere else: above 600px the real Seats and Join columns are on screen,
   and two Join buttons in one row is worse than the scroll ever was. */
.name-cta { display: none; }

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 0.9rem;
  padding: 0.5rem 0.95rem; border-radius: 7px; white-space: nowrap;
  border: 1px solid transparent; transition: background 120ms ease, border-color 120ms ease;
}
.btn-join, .btn-primary { background: var(--green); color: #04120a; }
.btn-join:hover, .btn-primary:hover { background: #6ee79b; }
.btn-notify { background: transparent; color: var(--ink-dim); border-color: var(--line); }
.btn-notify:hover { color: var(--ink); border-color: var(--ink-faint); }
.btn-ghost { background: transparent; color: var(--green); border-color: var(--green-dim); }
.btn-ghost:hover { background: var(--green-dim); }

/* ── how it works ────────────────────────────────────────────────────────── */

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.steps li { counter-increment: step; background: var(--bg-raise); padding: 1.15rem 1.35rem 1.15rem 3.4rem; position: relative; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 1.35rem; top: 1.15rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green-dim); color: var(--green);
  font-size: 0.75rem; font-weight: 700;
}
.steps h3 { margin-bottom: 0.25rem; }
.steps p { margin: 0; color: var(--ink-dim); font-size: 0.94rem; }

/* ── the arithmetic table ────────────────────────────────────────────────── */

.math-table { min-width: 0; max-width: 460px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.math-table th { font-weight: 400; color: var(--ink-dim); }
/* nowrap because "− $1,550" was breaking after the minus sign at 390px, leaving a bare
   "−" on one line and the figure on the next. On the arithmetic table — the one element
   whose entire purpose is being checkable — that reads as a rendering fault. */
.math-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.math-total th, .math-total td { border-top: 2px solid var(--line); font-weight: 700; color: var(--ink); }
.math-total td { color: var(--green); }

/* ── prose ───────────────────────────────────────────────────────────────── */

.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.15rem; color: var(--ink-dim); }
.prose li { margin-bottom: 0.45rem; }
.prose strong { color: var(--ink); font-weight: 620; }
.prose p { color: var(--ink-dim); }
.prose .callout {
  background: var(--bg-raise); border-left: 3px solid var(--green);
  padding: 0.9rem 1.1rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1.25rem 0;
}
.prose .callout p:last-child { margin-bottom: 0; }

.faq .qa { max-width: var(--measure); margin-bottom: 1.75rem; }
.faq h3 { color: var(--ink); }
.faq .qa p { color: var(--ink-dim); }
/* On /faq the sections stack, so each group needs a visible boundary or the page reads
   as one undifferentiated wall of questions. Same rule as .prose h2. */
.faq + .faq h2 { margin-top: 1rem; padding-top: 1.75rem; border-top: 1px solid var(--line-soft); }

/* ── how it works, long form ─────────────────────────────────────────────── */

/* Same numbered-step component as the lobby strip, given room to be read rather
   than scanned: headings step up to h2, the measure is enforced, and the copy is
   full-size instead of the 0.94rem summary size. */
.steps-long li { padding: 1.6rem 1.6rem 1.6rem 4rem; }
.steps-long li::before {
  left: 1.5rem; top: 1.75rem;
  width: 1.7rem; height: 1.7rem; font-size: 0.85rem;
}
.steps-long h2 { font-size: clamp(1.1rem, 2.4vw, 1.35rem); margin-bottom: 0.45rem; }
.steps-long p { font-size: 1rem; max-width: var(--measure); }

/* ── a single league ─────────────────────────────────────────────────────── */

.league-detail .math-table { margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.league-detail > .muted { max-width: var(--measure); font-size: 0.92rem; }

.league-cta {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  max-width: var(--measure);
}
.league-cta p { margin-bottom: 0.75rem; }
.league-cta p:last-child { margin-bottom: 0; }
.league-cta .muted { font-size: 0.88rem; }
.league-seats { font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 650; }
.league-seats .seats-total { font-weight: 400; font-size: 0.95rem; }
.league-seats .seats-pending { font-size: 0.95rem; font-weight: 500; }

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

.site-foot { border-top: 1px solid var(--line-soft); padding-block: 2.25rem 3rem; margin-top: 4rem; }
.foot-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.foot-grid p { margin: 0 0 0.3rem; font-size: 0.9rem; }
.foot-brand { font-weight: 650; color: var(--ink); }
.foot-label { font-size: 0.72rem !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
.foot-links a { color: var(--ink-dim); text-decoration: none; font-size: 0.9rem; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* overflow-wrap because the address is one unbreakable 24-character token inside a
   200px minimum grid column — without this it is the only thing in the footer that
   could push the page sideways on a phone. */
.foot-mail { overflow-wrap: anywhere; }
.foot-fine { margin-top: 2rem; font-size: 0.78rem; line-height: 1.6; max-width: 80ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── league queue ────────────────────────────────────────────────────────── */

.queue {
  margin-top: 1.75rem;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
}
.queue h3 { margin-bottom: 0.4rem; }
.queue p { max-width: var(--measure); font-size: 0.94rem; }
.queue p:last-child { margin-bottom: 0; }
.queue-list { list-style: none; padding: 0; margin: 0.5rem 0 1rem; display: grid; gap: 0.4rem; }
.queue-list li { display: flex; align-items: baseline; gap: 0.65rem; font-size: 0.94rem; }
.queue-buyin {
  font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink);
  min-width: 3.5rem; display: inline-block;
}

.empty-state { max-width: var(--measure); }

/* ── format cards ────────────────────────────────────────────────────────── */

.format-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1.5rem 0 1rem;
}
.format-card { background: var(--bg-raise); padding: 1.2rem 1.35rem; }
.format-card h3 { margin-bottom: 0.7rem; }
.format-card p { margin: 0.7rem 0 0; font-size: 0.86rem; }
.format-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.format-list li { display: flex; align-items: baseline; gap: 0.55rem; font-size: 0.94rem; color: var(--ink-dim); }
.format-n {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--green);
  min-width: 1.1rem; display: inline-block;
}