/* Best Ball Blob League
   ---------------------
   The league's one structural truth is that rosters never shrink -- they accrete, one
   player per week, forever. So the site is built around a core sample: the draft is the
   basal layer, every waiver add is a stratum on top of it, and you read a team bottom-up
   like a sediment column. The six position colors are mineral tones and are used as the
   single data palette everywhere: strata, chips, tables, heatmaps.
*/

:root {
  color-scheme: light dark;

  --stock:   #e4e4de;
  --surface: #edede8;
  --sunk:    #d9d9d2;
  --ink:     #191c1a;
  --ink-2:   #55584f;
  --ink-3:   #8d8f86;
  --rule:    #c9c8c0;
  --rule-2:  #b3b2a9;

  --qb:  #ab5334;
  --rb:  #b5822b;
  --wr:  #5f6d38;
  --te:  #3f5a75;
  --k:   #7d7863;
  --def: #4a4335;

  --live: #ab5334;
  --good: #4a6b3f;

  --display: "Archivo", "Helvetica Neue", sans-serif;
  --body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(1rem, 3vw, 2rem);
  --maxw: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --stock:   #16181a;
    --surface: #1e2124;
    --sunk:    #101214;
    --ink:     #e8e7e1;
    --ink-2:   #a3a69d;
    --ink-3:   #6f736c;
    --rule:    #2e3235;
    --rule-2:  #3f4448;

    --qb:  #dd8a67;
    --rb:  #d9ac53;
    --wr:  #9aae66;
    --te:  #7ea4c4;
    --k:   #b3ad97;
    --def: #a3937a;

    --live: #dd8a67;
    --good: #8fb87f;
  }
}

/* --- base ---------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--stock);
  color: var(--ink);
  font: 400 16px/1.55 var(--body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

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

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.015em;
  margin: 0;
  text-transform: uppercase;
}

h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
h3 { font-size: 1rem; letter-spacing: 0.01em; }

p { margin: 0 0 1em; max-width: 68ch; }

/* Every number on this site is tabular mono. Scores line up or they lie. */
.num, td.num, th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.5rem;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* --- masthead ------------------------------------------------------------ */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--stock);
  position: sticky;
  top: 0;
  z-index: 20;
}

.masthead .wrap {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.brand {
  font-family: var(--display);
  font-variation-settings: "wdth" 125;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.brand span { color: var(--live); }

nav.tabs { display: flex; gap: 0.1rem 1.1rem; flex-wrap: wrap; margin-left: auto; }
nav.tabs a {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding: 0.15rem 0;
  border-bottom: 2px solid transparent;
}
nav.tabs a:hover { color: var(--ink); }
nav.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--live); }

/* --- page furniture ------------------------------------------------------ */

main { padding: clamp(1.5rem, 4vw, 3rem) 0 5rem; }

.page-head { margin-bottom: 2rem; }
.page-head p { color: var(--ink-2); }

.section { margin-top: clamp(2rem, 5vw, 3.5rem); }
.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
  margin-bottom: 1.1rem;
}
.section-head .aside {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 1.1rem 1.2rem;
}

.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.empty {
  border: 1px dashed var(--rule-2);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.85rem;
}

/* --- position colours ---------------------------------------------------- */

[data-pos="QB"]  { --pos: var(--qb); }
[data-pos="RB"]  { --pos: var(--rb); }
[data-pos="WR"]  { --pos: var(--wr); }
[data-pos="TE"]  { --pos: var(--te); }
[data-pos="K"]   { --pos: var(--k); }
[data-pos="DEF"] { --pos: var(--def); }

.chip {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pos, var(--ink-2));
  border: 1px solid currentColor;
  padding: 0.1rem 0.32rem;
  border-radius: 2px;
  white-space: nowrap;
}

/* --- tables -------------------------------------------------------------- */

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

table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
thead th {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 0 0.6rem 0.45rem;
  border-bottom: 1px solid var(--rule-2);
  white-space: nowrap;
}
tbody td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
tbody tr:hover td { background: var(--surface); }
th.num, td.num { text-align: right; }
td.tight, th.tight { width: 1%; white-space: nowrap; }

.rank {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-3);
}
tr.playoff-line td { border-bottom: 2px solid var(--live); }

/* --- the core sample: the signature element ------------------------------ */
/*
  Read bottom-up. The basal band is the draft -- 15 cells, one per drafted player.
  Every band above it is one week's forced waiver add. A team that has been in the
  league longer is literally taller.
*/

.core { display: flex; flex-direction: column-reverse; gap: 2px; }

.core-band {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.5rem 0.3rem 0;
  border-left: 4px solid var(--pos, var(--rule-2));
  background: var(--surface);
  font-size: 0.85rem;
  text-decoration: none;
}
.core-band:hover { background: var(--sunk); }
.core-band .wk {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-3);
  text-align: right;
  letter-spacing: 0.04em;
}
.core-band .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.core-base {
  border-left: 4px solid var(--rule-2);
  background: var(--surface);
  padding: 0.5rem 0.6rem 0.6rem;
}
.core-base .wk {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.4rem;
}
.core-mosaic { display: flex; flex-wrap: wrap; gap: 2px; }
.core-cell {
  width: 100%;
  max-width: 1.6rem;
  flex: 1 1 0.9rem;
  height: 0.9rem;
  background: var(--pos, var(--rule-2));
  opacity: 0.85;
}

/* Compact cores, twelve abreast, on the teams index. */
.core-field {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 0.5rem;
}
.core-col {
  background: var(--stock);
  border: 1px solid var(--rule);
  padding: 0.7rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-decoration: none;
}
.core-col:hover { background: var(--surface); }
.core-col .name {
  font-family: var(--display);
  font-variation-settings: "wdth" 105;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  line-height: 1.1;
}
.core-col .meta { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3); }
.core-stack { display: flex; flex-direction: column-reverse; gap: 2px; min-height: 72px; }
.core-stack .stratum { height: 0.34rem; background: var(--pos, var(--rule-2)); }
.core-stack .stratum.base {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  height: auto;
  background: none;
  padding-top: 3px;
  margin-top: 2px;
  border-top: 1px solid var(--rule-2);
}
.core-stack .stratum.base i { display: block; height: 0.44rem; background: var(--pos, var(--rule-2)); }

/* --- matchups ------------------------------------------------------------ */

.matchups { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }

.matchup {
  background: var(--stock);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
}
.matchup:hover { background: var(--surface); }
.matchup .side { min-width: 0; }
.matchup .side.away { text-align: right; }
.matchup .team {
  font-family: var(--display);
  font-variation-settings: "wdth" 105;
  font-weight: 700;
  font-size: clamp(0.85rem, 2.2vw, 1.05rem);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.matchup .score {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1rem, 3vw, 1.35rem);
  color: var(--ink-2);
}
.matchup .winner .score, .matchup .winner .team { color: var(--ink); }
.matchup .winner .score { font-weight: 600; }
.matchup .loser { opacity: 0.55; }
.matchup .vs {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.matchup .rec { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3); }

/* --- lineups: counted floats, dropped sinks ------------------------------ */

.lineup { display: grid; gap: 1.4rem; }
@media (min-width: 820px) { .lineup.head-to-head { grid-template-columns: 1fr 1fr; gap: 2rem; } }

.pos-group { border-top: 1px solid var(--rule); padding-top: 0.5rem; margin-bottom: 1.1rem; }
.pos-group-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.pos-group-head .label {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pos, var(--ink-2));
}
.pos-group-head .sum { margin-left: auto; font-family: var(--mono); font-size: 0.8rem; }

.slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.22rem 0;
  font-size: 0.9rem;
}
.slot .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .pts { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.slot .opp { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3); margin-left: 0.4rem; }
.tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--live);
  margin-left: 0.35rem;
  white-space: nowrap;
}
.slot.dropped { color: var(--ink-3); }
.slot.dropped .pts { color: var(--ink-3); }
/* The waterline: everything below it was left out of the lineup. */
.slot.first-dropped { border-top: 1px dashed var(--rule-2); margin-top: 0.3rem; padding-top: 0.4rem; }

/* --- stat strip ---------------------------------------------------------- */

.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.strip > div { background: var(--stock); padding: 0.8rem 0.9rem; }
.strip dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.25rem;
}
.strip dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  line-height: 1.1;
}
.strip dd small { font-size: 0.72rem; color: var(--ink-2); display: block; margin-top: 0.2rem; font-family: var(--body); }

/* --- controls ------------------------------------------------------------ */

.controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1.2rem; }
select, input[type="search"], button.ghost {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-2);
  padding: 0.35rem 0.5rem;
  border-radius: 2px;
}
button.ghost { cursor: pointer; }
button.ghost:hover { background: var(--sunk); }
button.ghost[aria-pressed="true"] { background: var(--ink); color: var(--stock); border-color: var(--ink); }

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--ink);
  color: var(--stock);
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--ink);
}
.btn:hover { background: transparent; color: var(--ink); }

/* --- brackets ------------------------------------------------------------ */

.bracket { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.bracket-round .eyebrow { border-bottom: 1px solid var(--rule); padding-bottom: 0.4rem; }
.game {
  border: 1px solid var(--rule);
  background: var(--surface);
  margin-bottom: 0.7rem;
}
.game .row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  overflow-wrap: anywhere;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.45rem 0.6rem;
  font-size: 0.88rem;
}
.game .row + .row { border-top: 1px solid var(--rule); }
.game .seed { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-3); }
.game .row.won { font-weight: 600; }
.game .row.out { opacity: 0.5; }
.game .pts { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.game .carry { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-3); }

/* --- heat grid ----------------------------------------------------------- */

.heat td.cell {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  text-align: right;
  padding: 0.3rem 0.45rem;
}

/* --- footer -------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding: 1.5rem 0 3rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
}
footer .wrap { display: flex; gap: 1rem; flex-wrap: wrap; }
footer a { color: var(--ink-2); }

@media (prefers-reduced-motion: no-preference) {
  .core-band, .core-col, .matchup { transition: background-color 120ms ease; }
}