/* 3PT Ledger: page layer on top of the Modernist system (_ds/…/styles.css). Tokens only, 0 radius, 2px rules. */

body { background: var(--color-bg); font-variant-numeric: tabular-nums; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-600); }
code { font-size: 0.92em; background: color-mix(in srgb, var(--color-text) 7%, transparent); padding: 1px 4px; }

.page { min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1; display: flex; flex-direction: column; }
.muted { color: var(--color-neutral-700); }
.faint { color: var(--color-neutral-500); }
.small { font-size: 12px; }
.label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700);
}
.rule-b { border-bottom: 2px solid var(--color-divider); }
.state { padding: var(--space-8) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.state h3 { margin: 0; }
.state p { margin: 0; color: var(--color-neutral-700); max-width: 64ch; }

/* — nav — */
.nav { flex-wrap: wrap; row-gap: var(--space-2); }
.nav-brand { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.nav-brand a { font-size: 18px; color: var(--color-text); }
.nav-brand .sub { font-size: 12px; font-weight: 400; color: var(--color-neutral-700); font-family: var(--font-body); }
.nav .updated { font-size: 13px; color: var(--color-neutral-700); }
.nav select.input { width: auto; min-height: 32px; padding: 4px 8px; font-size: 13px; }
.nav .btn { font-size: 13px; }

.banner {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
  padding: var(--space-2) var(--space-4); font-size: 13px;
  background: var(--color-accent-100); color: var(--color-accent-800); border-bottom: 2px solid var(--color-divider);
}

/* — slate header — */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-bottom: 2px solid var(--color-divider); }
.hero > div { padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.hero > div + div { border-left: 2px solid var(--color-divider); }
.hero .span2 { grid-column: span 2; }
.hero h6 { margin: 0; color: var(--color-neutral-700); }
.hero h1 { margin: 0; font-size: 42px; }
.big { font-size: 32px; font-weight: 800; line-height: 1.1; }
@media (max-width: 520px) {
  .hero .span2 { grid-column: auto; }
  .hero > div + div { border-left: 0; border-top: 2px solid var(--color-divider); }
  .hero h1 { font-size: 30px; }
}

.toolbar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-divider);
}
.toolbar .hint { font-size: 13px; color: var(--color-neutral-700); margin-right: auto; max-width: 80ch; }

/* — slate table — */
.scroll { overflow-x: auto; }
.slate-table { min-width: 980px; }
.srow {
  display: grid; align-items: baseline; gap: var(--space-2);
  grid-template-columns: minmax(190px, 2fr) minmax(150px, 1.6fr) repeat(4, minmax(66px, 1fr)) minmax(84px, 1fr) minmax(66px, 0.9fr) minmax(116px, 1.3fr);
  padding: var(--space-2) var(--space-4);
}
.srow.head { border-bottom: 2px solid var(--color-divider); }
.game { display: flex; flex-direction: column; border-bottom: 2px solid var(--color-divider); cursor: pointer; }
.game:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.game:focus-visible { outline-offset: -2px; }
.game-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-1); font-size: 12px; }
.game-head .time { font-weight: 600; color: var(--color-accent-700); }
.game-head .more { margin-left: auto; display: flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; }
.game .srow { border-top: 1px solid var(--color-neutral-300); }
.team-cell { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.team-cell strong { font-size: 17px; font-weight: 800; }
.team-cell span { font-size: 13px; color: var(--color-neutral-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avail { font-size: 13px; color: var(--color-neutral-800); }
.n15 { font-size: 15px; }
.n22 { font-size: 22px; font-weight: 800; line-height: 1; }
.n13 { font-size: 13px; color: var(--color-neutral-700); }
.line-in { max-width: 84px; min-height: 32px; padding: 4px 8px; font-size: 15px; font-weight: 600; }
.line-in::placeholder, .bet .input::placeholder { color: var(--color-neutral-500); font-weight: 400; }

/* phones: each team row becomes a small card; labels come from data-label */
@media (max-width: 760px) {
  .slate-table { min-width: 0; }
  .srow.head { display: none; }
  .game .srow {
    grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; row-gap: var(--space-2);
    grid-template-areas: "team team tpm" "avail avail avail" "tpa pct range" "line pov lean";
    padding-top: var(--space-3); padding-bottom: var(--space-3);
  }
  .c-team { grid-area: team; align-self: center; } .c-avail { grid-area: avail; } .c-tpm { grid-area: tpm; }
  .c-tpa { grid-area: tpa; } .c-pct { grid-area: pct; } .c-range { grid-area: range; }
  .c-line { grid-area: line; } .c-pov { grid-area: pov; } .c-lean { grid-area: lean; }
  .srow [data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 10px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700);
  }
  .c-tpm { text-align: right; font-size: 28px; }
  .c-tpm::before { text-align: right; }
  .game-head { flex-wrap: wrap; }
}

.lean-over, .lean-under { font-weight: 600; white-space: nowrap; }
.lean-over { background: var(--color-accent); color: var(--color-bg); }
.lean-under { background: var(--color-text); color: var(--color-bg); }
.lean-pass { font-size: 13px; color: var(--color-neutral-600); }

/* — method notes — */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-bottom: 2px solid var(--color-divider); }
.cols > div { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.cols > div + div { border-left: 2px solid var(--color-divider); }
@media (max-width: 520px) { .cols > div + div { border-left: 0; border-top: 2px solid var(--color-divider); } }
.cols h6 { margin: 0; color: var(--color-neutral-700); }
.cols p { margin: 0; font-size: 13px; text-wrap: pretty; }

/* — game detail — */
.detail-head { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-6); border-bottom: 2px solid var(--color-divider); }
.detail-head .btn { align-self: flex-start; margin-left: calc(var(--space-1) * -1); }
.detail-head h6 { margin: 0; color: var(--color-accent-700); }
.detail-head h1 { margin: 0; }
@media (max-width: 520px) { .detail-head h1 { font-size: 30px; } }

.teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.tcard { display: flex; flex-direction: column; min-width: 0; border-right: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); }
.tcard > section { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); border-bottom: 2px solid var(--color-divider); }
.tcard > section:last-child { border-bottom: 0; }
.tcard h6 { margin: 0; color: var(--color-neutral-700); }
.ttop { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border-bottom: 2px solid var(--color-divider); }
.ttop .main { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.ttop .tname { font-size: 20px; font-weight: 800; }
.huge { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-2); }
.huge b { font-size: 64px; font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; }
.huge span { font-size: 14px; font-weight: 600; }
.ttop .stack { display: grid; grid-template-rows: repeat(3, 1fr); border-left: 2px solid var(--color-divider); }
.ttop .stack > div { padding: var(--space-2) var(--space-4); display: flex; flex-direction: column; justify-content: center; }
.ttop .stack > div + div { border-top: 1px solid var(--color-divider); }
.ttop .stack b { font-size: 22px; font-weight: 800; }

.split { display: flex; height: 36px; }
.split > div { display: flex; align-items: center; gap: 6px; padding: 0 var(--space-2); font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; color: var(--color-bg); }
.split .s3 { background: var(--color-accent); }
.split .s2 { flex: 1; background: var(--color-text); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); font-size: 13px; }

.bet { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) !important; }
.bet .field .input { font-size: 18px; font-weight: 800; }
.bet .out { display: flex; flex-direction: column; gap: 2px; }
.bet .out b { font-size: 20px; font-weight: 800; }
.bet .note { grid-column: 1 / -1; font-size: 12px; color: var(--color-neutral-700); margin: 0; }
@media (max-width: 420px) { .bet .field .input { font-size: 16px; padding: 6px 8px; } }

.mini { display: grid; gap: var(--space-2); font-size: 14px; }
.mini > div { display: grid; gap: var(--space-2); padding: 6px 0; border-bottom: 1px solid var(--color-divider); align-items: baseline; }
.mini > div.h { border-bottom: 2px solid var(--color-divider); padding: var(--space-1) 0; }
.mini { gap: 0; }
.alt > div { grid-template-columns: minmax(0, 0.8fr) repeat(4, minmax(0, 1fr)); }
.alt > div.cur { background: var(--color-accent-100); }
.alt > div > :first-child { padding-left: 4px; }
.steps > div { grid-template-columns: minmax(0, 1fr) 64px 64px 56px; }
.steps .lbl { display: flex; flex-direction: column; min-width: 0; }
.steps .lbl b { font-size: 14px; font-weight: 600; }
.steps .lbl span { font-size: 12px; color: var(--color-neutral-700); text-wrap: pretty; }
.ctx > div { grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(0, 1fr)); }

.tlog { display: grid; grid-template-columns: 128px minmax(0, 1fr) 76px; gap: var(--space-2) var(--space-3); align-items: center; font-size: 13px; }
.tlog .bar { height: 14px; background: var(--color-neutral-300); }
.tlog .bar > div { height: 100%; background: var(--color-neutral-500); }
.tlog .bar > div > div { height: 100%; background: var(--color-accent); }
.tlog .fc { font-weight: 800; }
.legend { display: flex; gap: var(--space-4); font-size: 11px; color: var(--color-neutral-700); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; display: inline-block; }

/* — player table — */
.ptitle { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-4) var(--space-2); }
.ptitle h3 { margin: 0; }
.ptable { min-width: 1180px; }
.prow {
  display: grid; gap: var(--space-2); align-items: baseline; padding: var(--space-2) var(--space-4);
  grid-template-columns: minmax(270px, 2.6fr) repeat(7, minmax(70px, 1fr)) repeat(4, minmax(54px, 0.7fr));
  border-bottom: 1px solid var(--color-divider);
}
.prow.head { border-top: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); }
.prow.group { border: 0; padding-bottom: 0; padding-top: var(--space-2); }
.prow.group .g { grid-column: 9 / span 4; border-bottom: 1px solid var(--color-divider); padding-bottom: 2px; }
.prow.total { border-bottom: 0; border-top: 1px solid var(--color-divider); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.prow.out { opacity: 0.55; }
.pname { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pname .top { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.pname .top b { font-size: 15px; font-weight: 800; }
.pname .tag { font-weight: 600; }
.tag-out { background: var(--color-text); color: var(--color-bg); }
.stack2 { display: flex; flex-direction: column; }
.stack2 .s { font-size: 11px; color: var(--color-neutral-700); }
.stack2 .d { font-size: 11px; color: var(--color-accent-700); font-weight: 600; }
.chance { font-size: 14px; font-weight: 600; padding: 2px 6px; margin: -2px 0; }

/* — settings dialog — */
.dialog-backdrop { z-index: 10; overflow-y: auto; }
.dialog { width: min(560px, 100%); max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto; }
.dialog h6 { margin: var(--space-2) 0 0; color: var(--color-neutral-700); }
.set { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 2px var(--space-3); align-items: center; font-size: 13px; }
.set input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--color-accent); }
.set output { text-align: right; font-weight: 800; }
.radios { display: flex; flex-direction: column; gap: var(--space-2); }
.radios .radio { align-items: flex-start; }
.radios .radio .dot { margin-top: 3px; }
.radios .radio small { display: block; color: var(--color-neutral-700); font-size: 12px; }

/* — nav tabs — */
.tabs { display: flex; gap: var(--space-4); margin-right: auto; }
.tabs a { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; padding: 2px 0; border-bottom: 2px solid transparent; }
.tabs a[aria-current='page'] { border-bottom-color: var(--color-accent); }
.nav-brand { margin-right: var(--space-4); }

/* — results — */
.date-pick { width: auto; margin-top: var(--space-3); align-self: flex-start; }
.results-table { min-width: 1120px; }
.rrow {
  display: grid; align-items: baseline; gap: var(--space-2); padding: var(--space-2) var(--space-4);
  grid-template-columns: minmax(180px, 1.8fr) repeat(3, minmax(64px, 0.8fr)) minmax(130px, 1.2fr) repeat(3, minmax(76px, 0.9fr)) minmax(140px, 1.3fr);
}
.rrow.head { border-bottom: 2px solid var(--color-divider); }
.rgame { border-bottom: 2px solid var(--color-divider); }
.rgame .rrow { border-top: 1px solid var(--color-neutral-300); }
.rrow .up { color: var(--color-accent-700); }
.rrow .down { color: var(--color-text); }
.tag-ink { border: 1px solid var(--color-text); color: var(--color-text); }
.tag.res-win { background: var(--color-accent); color: var(--color-bg); font-weight: 600; align-self: flex-start; }
.tag.res-loss { background: var(--color-text); color: var(--color-bg); font-weight: 600; align-self: flex-start; }
.tag.res-push { background: var(--color-neutral-200); color: var(--color-neutral-800); font-weight: 600; align-self: flex-start; }
.why {
  display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: var(--space-2) var(--space-6);
  padding: var(--space-1) var(--space-4) var(--space-4);
}
.why-text p { margin: 0 0 var(--space-1); font-size: 13px; text-wrap: pretty; max-width: 90ch; }
.fx { display: grid; grid-template-columns: 72px minmax(0, 1fr) 40px; gap: 4px var(--space-2); align-items: center; font-size: 13px; }
.fx b { text-align: right; }
.fxbar { position: relative; height: 12px; background: var(--color-neutral-200); }
.fxbar::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--color-neutral-600); }
.fxbar i { position: absolute; top: 0; bottom: 0; }
.fxbar i.pos { background: var(--color-accent); }
.fxbar i.neg { background: var(--color-text); }
@media (max-width: 760px) {
  .results-table { min-width: 0; }
  .rrow.head { display: none; }
  .rgame .rrow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-2); align-items: end; }
  .rgame .rrow .c-team { grid-column: 1 / -1; }
  .rrow [data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 10px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700);
  }
  .why { grid-template-columns: minmax(0, 1fr); }
}

footer.foot {
  display: flex; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4); font-size: 12px; color: var(--color-neutral-700);
}
footer.foot span:first-child { margin-right: auto; }