:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #f0f0ed;
  --text: #1b1c1e;
  --muted: #5d6066;
  --border: #dcdcd7;
  --accent: #2f5d8a;
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --hl: var(--accent-soft);          /* highlighted row / cell */
  --hl-bar: transparent;             /* left bar on a highlighted row (dark mode only) */
  --win: #1f6f43;
  --loss: #9b2c2c;
  --radius: 10px;
  --gutter: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121314;
    --surface: #1b1c1e;
    --surface-2: #232528;
    --text: #e9e9e6;
    --muted: #a3a6ab;
    --border: #34363a;
    --win: #6cc391;
    --loss: #f08a8a;
    --hl: color-mix(in srgb, var(--accent) var(--hl-mix, 34%), var(--surface));  /* --hl-mix: lower for bright team colors (common.js) */
    --hl-bar: color-mix(in srgb, var(--accent) 55%, #ffffff);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121314;
  --surface: #1b1c1e;
  --surface-2: #232528;
  --text: #e9e9e6;
  --muted: #a3a6ab;
  --border: #34363a;
  --win: #6cc391;
  --loss: #f08a8a;
  --hl: color-mix(in srgb, var(--accent) var(--hl-mix, 34%), var(--surface));  /* --hl-mix: lower for bright team colors (common.js) */
  --hl-bar: color-mix(in srgb, var(--accent) 55%, #ffffff);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* the hidden attribute always wins over a component's display rule */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
  overflow-x: hidden;
}
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.site-header {
  border-top: 4px solid var(--accent);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.site-header .inner, main, .site-footer .inner { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.site-header .inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-top: .7rem; padding-bottom: .7rem; }
.brand { font-weight: 700; text-decoration: none; font-size: 1.05rem; margin-right: auto; }
.brand small { font-weight: 400; color: var(--muted); font-size: .75rem; margin-left: .35rem; }
nav.primary { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .92rem; }
nav.primary a { text-decoration: none; color: var(--muted); }
nav.primary a[aria-current="page"] { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.header-tools { display: flex; gap: .4rem; align-items: center; }

/* Phone header: brand + Menu button on one row; links and header tools open under it */
.site-header .menu-btn { display: none; }
/* also landscape phones (wide but short): the full nav would eat a third of the screen */
@media (max-width: 760px), (max-height: 500px) {
  .site-header .inner { flex-wrap: wrap; padding-top: .45rem; padding-bottom: .45rem; gap: .4rem .6rem; }
  .brand small { display: none; }
  .site-header .menu-btn { display: inline-flex; min-height: 40px; }
  .site-header nav.primary, .site-header .header-tools { display: none; }
  .site-header.open nav.primary { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; flex-basis: 100%; font-size: .95rem; padding-top: .2rem; }
  .site-header.open nav.primary a { padding: .55rem .1rem; border-top: 1px solid var(--border); }
  .site-header.open nav.primary a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); padding-left: .5rem; }
  .site-header.open .header-tools { display: flex; flex-basis: 100%; padding-bottom: .2rem; }
  .site-header.open .header-tools select { flex: 1; }
  /* the colors menu gets its label back in the open menu (it is visually hidden in the desktop header) */
  .site-header.open .header-tools { align-items: center; }
  .site-header.open .header-tools label[for="fav-team"] { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: .85rem; color: var(--muted); }
  /* the in-season links shown only in the menu (.phone-only alone stops at 640px) */
  .site-header.open nav.primary a.phone-only { display: block; }
  /* one of those is the current page: it alone is marked, not "All tools" as well */
  .site-header.open nav.primary:has(a.phone-only[aria-current="page"]) a:not(.phone-only)[aria-current="page"] { color: var(--muted); font-weight: inherit; box-shadow: none; padding-left: .1rem; }
}
/* sideways phone: three columns of links so the open menu fits the short screen */
@media (max-height: 500px) and (min-width: 641px) {
  .site-header.open nav.primary { grid-template-columns: repeat(3, 1fr); }
  .site-header.open nav.primary a { padding: .4rem .1rem; }
}

main { padding-top: 1.1rem; padding-bottom: 2.5rem; }
.site-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: .85rem; }
.site-footer .inner { padding-top: 1rem; padding-bottom: 1.5rem; }

/* ---------- controls ---------- */
button, select, input {
  font: inherit;
  color: inherit;
}
.btn, select, input[type="search"], input[type="text"] {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .45rem .7rem;
  min-height: 40px;
}
.btn { cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.small { min-height: 32px; padding: .2rem .55rem; font-size: .85rem; }
.btn:focus-visible, select:focus-visible, input:focus-visible, .info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-btn { min-width: 40px; justify-content: center; padding: .4rem; }

.controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .8rem;
  margin-bottom: 1rem;
}
.controls label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--muted); min-width: 0; }
.controls select, .controls input { width: 100%; color: var(--text); }
.controls .span-2 { grid-column: span 2; }
@media (min-width: 760px) {
  .controls { grid-template-columns: 110px 1fr 1fr 1.3fr; }
  .controls .span-2 { grid-column: auto; }
}

.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .25rem 0 .75rem; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: transparent; padding: .35rem .65rem; min-height: 34px; cursor: pointer; font-size: .85rem; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.check { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; }

/* ---------- cards ---------- */
.grid-2 { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .grid-2.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  min-width: 0;
}
.card-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.card-head h2 { margin: 0; }
.swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; border: 1px solid var(--border); vertical-align: -1px; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.kpis.kpis-3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi { background: var(--surface-2); border-radius: 8px; padding: .5rem .6rem; min-width: 0; }
.kpi .v { font-size: 1.25rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.kpi .k { font-size: .75rem; color: var(--muted); }

.section-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 1.4rem 0 .5rem; }
.section-title h2 { margin: 0 auto 0 0; }
.tools { display: flex; gap: .35rem; flex-wrap: wrap; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); max-width: 100%; }
/* tables scroll sideways only: a link's tap padding or a sub-pixel row height in the last row must not
   add a 1-3px vertical scrollbar over the last column (no wrap has a set height, so nothing is cut off) */
.table-wrap { overflow-y: hidden; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { padding: .45rem .6rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: top; }
th { font-weight: 600; font-size: .78rem; color: var(--muted); background: var(--surface-2); }
thead th { position: sticky; top: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
tr.upcoming td { color: var(--muted); }
.res-W { color: var(--win); font-weight: 600; }
.res-L { color: var(--loss); font-weight: 600; }
.tag { display: inline-block; font-size: .72rem; padding: 0 .4rem; border-radius: 99px; border: 1px solid var(--border); color: var(--muted); margin-right: .2rem; }
.tag.accent { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.compare th:first-child, .compare td:first-child { position: sticky; left: 0; background: var(--surface); }
.compare th:first-child { background: var(--surface-2); }

.info {
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 99px;
  width: 1.35rem; height: 1.35rem;
  font-size: .75rem; line-height: 1;
  cursor: pointer; color: var(--muted);
  padding: 0; margin-left: .3rem;
  vertical-align: 1px;
}
/* 1.35rem is too small to tap reliably; extend the hit area without changing the look */
.info { position: relative; flex: none; }
.info::after { content: ""; position: absolute; inset: -10px; }

dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  max-width: min(560px, calc(100vw - 2 * var(--gutter)));
  padding: 1.1rem;
}
dialog::backdrop { background: rgb(0 0 0 / .4); }
dialog .close { float: right; }

.card-dialog { max-width: min(1080px, calc(100vw - 2 * var(--gutter))); width: 100%; }
.card-dialog h2 { margin-top: 0; }
.card-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.card-preview img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); aspect-ratio: 1200 / 675; }
.card-options fieldset { border: 1px solid var(--border); border-radius: 6px; margin: 0 0 .8rem; padding: .5rem .7rem; }
.card-options legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
#card-rows { max-height: 300px; overflow-y: auto; display: grid; gap: .15rem; }
#card-rows label { display: flex; gap: .45rem; align-items: flex-start; font-size: .88rem; line-height: 1.3; cursor: pointer; }
#card-rows input { margin-top: .15rem; flex: none; }
#card-rows label.off { color: var(--muted); }
.card-quick { display: flex; gap: .4rem; margin-top: .5rem; }
.card-thresh { display: grid; gap: .3rem; font-size: .88rem; }
.card-thresh[hidden] { display: none; }
.card-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
@media (max-width: 760px) {
  .card-layout { grid-template-columns: 1fr; }
  #card-rows { max-height: 220px; gap: 0; }
  #card-rows label { min-height: 36px; align-items: center; }
  #card-rows input { margin-top: 0; width: 18px; height: 18px; }
}

.notice { background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .8rem; font-size: .9rem; margin-bottom: 1rem; }
.loading { color: var(--muted); padding: 2rem 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.loading .bar { display: block; width: min(240px, 60%); height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 18%, transparent); position: relative; overflow: hidden; }
.loading .bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; border-radius: 2px; background: var(--accent); animation: load-slide 1.1s ease-in-out infinite; }
@keyframes load-slide { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .loading .bar::after { animation: none; left: 0; width: 100%; opacity: .5; } }
.error { border-color: var(--loss); }
.prose { max-width: 760px; }
.prose h2 { margin-top: 1.6rem; }
.prose li { margin-bottom: .35rem; }
.prose td { white-space: normal; min-width: 4.5rem; }
code { font-family: var(--mono); font-size: .88em; background: var(--surface-2); padding: .05rem .3rem; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.toast { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: .5rem .9rem; border-radius: 8px; font-size: .9rem; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 10; }
.toast.show { opacity: 1; }

/* ---------- phones: shared utilities ----------
   .wide-only        hidden at phone width (columns, notes, buttons that don't earn their space)
   .phone-only       shown only at phone width
   .sticky-col       on a table: first column stays put while the rest scrolls sideways
   details.phone-fold  a <details> that starts open on desktop; common.js closes it on phones */
.phone-only { display: none; }
@media (max-width: 640px) {
  main { padding-top: .7rem; }
  h1 { font-size: 1.2rem; }
  .wide-only { display: none !important; }
  .phone-only { display: revert; }
  th, td { padding: .35rem .4rem; }
  table { font-size: .84rem; }
  .card { padding: .75rem; }
  .controls { padding: .6rem; gap: .45rem; }
  .section-title { margin-top: 1.1rem; }
}
/* pinned first column at every width (a no-op when the table fits); the divider only below desktop */
.sticky-col th:first-child, .sticky-col td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.sticky-col th:first-child { background: var(--surface-2); z-index: 2; }
@media (max-width: 1023px) { .sticky-col th:first-child, .sticky-col td:first-child { box-shadow: 1px 0 0 var(--border); } }

/* ---------- phones: schedule tables become one card per game ---------- */
@media (max-width: 640px) {
  .table-wrap.stack { overflow: visible; border: 0; background: transparent; }
  .stack table, .stack tbody, .stack tr, .stack td { display: block; width: 100%; }
  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack tr { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: .5rem; padding: .3rem 0; }
  .stack td.lead { order: -1; }
  .stack td { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 0; padding: .2rem .7rem; white-space: normal; text-align: right; }
  .stack td::before { content: attr(data-label); color: var(--muted); font-size: .78rem; text-align: left; flex: 0 0 auto; }
  .stack td.lead { font-weight: 600; font-size: .95rem; text-align: left; justify-content: flex-start; }
  .stack td.lead::before { content: none; }
  .stack td.num { text-align: right; }
}

/* ---------- team rating: difficulty bars, Build Your Own Committee ---------- */
.diff { display: inline-block; min-width: 3.2em; padding: 0 .3rem; border-radius: 4px; text-align: right;
  background: linear-gradient(to right, color-mix(in srgb, var(--accent) 28%, transparent) calc(var(--d) * 100%), transparent 0); }
.byo-controls { grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .byo-controls { grid-template-columns: 110px 1.4fr 1fr; } }
.byo-weights .section-title { margin-top: 0; }
.sliders { display: grid; grid-template-columns: 1fr; gap: .35rem 1.2rem; margin: .4rem 0; }
@media (min-width: 760px) { .sliders { grid-template-columns: 1fr 1fr; } }
.slider { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 2.4rem; align-items: center; gap: .5rem; font-size: .9rem; color: var(--muted); }
.slider.on { color: var(--text); font-weight: 500; }
.slider input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 32px; }
.slider output { font-variant-numeric: tabular-nums; text-align: right; }
details#more summary { cursor: pointer; font-size: .9rem; color: var(--muted); margin-top: .3rem; }
.agree { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .4rem 0 .8rem; }
.agree > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .8rem; display: flex; flex-direction: column; gap: .15rem; }
.agree > div strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.agree .wide { grid-column: span 2; display: block; font-size: .9rem; }
.caution { border-left: 3px solid var(--loss); padding: .5rem .8rem; margin: .4rem 0 .8rem; }
.caution p { margin: .2rem 0; }
#presets button:disabled { opacity: .45; cursor: not-allowed; }
tr.outside td { opacity: .7; }
.up { color: var(--win); font-variant-numeric: tabular-nums; }
.down { color: var(--loss); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .wide-only { display: none; } }

/* ---------- Committee Formula charts ---------- */
.chart-card { padding: .6rem; overflow: hidden; }
.chart { --mark: var(--accent); display: block; max-width: 100%; height: auto; font-family: var(--font); }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .grid.zero { stroke: var(--muted); }
.chart .axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .lbl { fill: var(--text); font-size: 12.5px; }
.chart .whisker { stroke: var(--mark); stroke-width: 2; stroke-linecap: round; }
.chart .dot { fill: var(--mark); stroke: var(--surface); stroke-width: 2; }
.chart .dot.probe { fill: var(--surface); stroke: var(--mark); }
.chart .ring { fill: none; stroke: var(--text); stroke-width: 1.5; }
.chart .band { fill: color-mix(in srgb, var(--mark) 16%, transparent); }
/* the default accent is too dark to read on the dark surface: lift it for chart marks */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chart { --mark: color-mix(in srgb, var(--accent) 50%, #ffffff); } }
:root[data-theme="dark"] .chart { --mark: color-mix(in srgb, var(--accent) 50%, #ffffff); }
.chart .line { fill: none; stroke: var(--mark); stroke-width: 2; stroke-linejoin: round; }
.chart .line.dashed { stroke-dasharray: 4 4; }
.chart .hit { cursor: default; }
.chart .hit:hover .dot { r: 6.5; }
.chart-tip { position: fixed; z-index: 20; max-width: 280px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .45rem .6rem; font-size: .82rem; line-height: 1.35; box-shadow: 0 4px 16px rgb(0 0 0 / .15); pointer-events: none; }
.table-view { margin: .5rem 0 0; }
.table-view summary { cursor: pointer; font-size: .9rem; color: var(--muted); }
.table-view .tools { margin: .5rem 0; }
.field { margin-top: 1rem; }
@media (min-width: 640px) { .field { grid-template-columns: 1fr 1fr; } }
.field ol { margin: .2rem 0 .5rem; padding-left: 1.6rem; }
.field li.miss { color: var(--loss); font-weight: 600; }
.misses { margin: .2rem 0 .5rem; padding-left: 1.2rem; }
.fit-base td:first-child, .timing td:first-child, .timing th:first-child, .fit-base th:first-child { white-space: normal; min-width: 11rem; }
.table-view + h3 { margin-top: 1.4rem; }
.chart .tier { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .leader { fill: none; stroke: var(--border); stroke-width: 1; }
.chart .rk { font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- Build Your Own Committee: head-to-head and pair view ---------- */
.h2h-tag { display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .03em; padding: 0 .3rem; border-radius: 4px; border: 1px solid var(--border); color: var(--muted); vertical-align: middle; }
.h2h-card, .pair-card { margin-top: 1rem; }
.h2h-card h2, .pair-card h2 { margin-top: 0; }
.h2h-card h3 { font-size: .95rem; margin: .8rem 0 .2rem; }
.h2h-list { margin: .2rem 0; padding-left: 1.1rem; }
.h2h-list li { margin: .3rem 0; line-height: 1.45; }
.link-btn { margin-left: .3rem; padding: .05rem .5rem; }
.pair-controls { grid-template-columns: 1fr 1fr; }
.verdict { font-size: 1rem; line-height: 1.5; margin: .6rem 0; }
.pair-table th[scope="row"] { text-align: left; font-weight: 500; white-space: normal; min-width: 10rem; }
.pair-table tr.muted td, .pair-table tr.muted th { color: var(--muted); }
.pair-table td[colspan] { white-space: normal; }
@media (max-width: 600px) {
  .pair-table th, .pair-table td { white-space: normal; padding: .3rem .35rem; font-size: .8rem; }
  .pair-table th[scope="row"] { min-width: 0; width: 34%; }
}

/* ---------- your team, playoff field, what-ifs ---------- */
tr.mine td { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); font-weight: 600; }
tr.cut td { border-bottom: 2px dashed var(--accent); }
.in-tag { display: inline-block; font-size: .66rem; font-weight: 600; padding: 0 .28rem; border-radius: 4px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); vertical-align: middle; }
.seed { white-space: nowrap; font-size: .85rem; }
.my-card { border-left: 4px solid var(--accent); }
.my-card h2 { display: flex; align-items: center; gap: .4rem; }
@media (min-width: 600px) { .my-card .agree { grid-template-columns: repeat(3, 1fr); } }
.my-card h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
.pick-tools { margin: .2rem 0 .4rem; display: flex; gap: .4rem; }
.picks { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.picks li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; font-size: .92rem; }
.picks .when { color: var(--muted); font-size: .85rem; }
.seg.pick button { min-width: 2.3rem; padding: .25rem .5rem; min-height: 32px; font-weight: 600; }
.seg.pick button[data-pick$=":W"][aria-pressed="true"] { background: var(--win); color: #fff; }
.seg.pick button[data-pick$=":L"][aria-pressed="true"] { background: var(--loss); color: #fff; }
/* dark mode's win/loss colors are light: dark text on them */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg.pick button[aria-pressed="true"] { color: #111; } }
:root[data-theme="dark"] .seg.pick button[aria-pressed="true"] { color: #111; }
@media (max-width: 600px) {
  .picks li { grid-template-columns: 3.6rem minmax(0, 1fr) auto; }
  .picks li > .muted.small { display: none; }
}
.field-card .grid-2 h3 { font-size: 1rem; margin: .2rem 0; }
.field-list { margin: .2rem 0 .4rem; padding-left: 1.8rem; }
.field-list li.mine { font-weight: 700; }

/* Home page: a short row of the season's main tools for first-time visitors */
.start-here { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: -.3rem 0 1rem; }
.start-here a { border: 1px solid var(--border); border-radius: 999px; padding: .15rem .6rem; text-decoration: none; }
.start-here a:hover, .start-here a:focus-visible { border-color: var(--accent); }

/* Explorer: matched schedules (two teams) */
.matchup { margin: 1rem 0; }
.matchup .section-title { margin-top: 0; }
.matchup .tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.matchup h3 { margin: 1rem 0 .3rem; }
.matchup tr.unmatched td { background: var(--surface-2, transparent); }
.matchup tr.pair-row { cursor: pointer; }
.matchup tr.pair-row:hover, .matchup tr.pair-row:hover td, .matchup tr.pair-row:focus-within, .matchup tr.pair-row:focus-within td { background: var(--accent-soft); }
/* the row's hidden button appears in place when it gets keyboard focus */
.matchup .pair-btn.visually-hidden:focus-visible { position: static; display: inline-block; width: auto; height: auto; clip: auto; overflow: visible; margin: 0 0 .25rem; }
.pair-dialog { max-width: min(760px, calc(100vw - 2 * var(--gutter))); width: 100%; }
.pair-dialog h2 { margin-top: 0; }
/* long popup on phones: the ✕ stays pinned at the top, and there's a Close at the bottom too */
.pair-dialog { padding-top: 0; }
.pair-dialog .pair-top { position: sticky; top: 0; z-index: 3; display: flex; justify-content: flex-end; margin: 0 -1.1rem; padding: .5rem .6rem .3rem; background: var(--surface); }
.pair-dialog .pair-top .close { float: none; }
.pair-dialog .pair-foot { margin: 1rem 0 0; text-align: right; }
.matchup .score, .pair-opps .score { white-space: nowrap; }
.pair-dialog .matchup { margin: 1rem 0 0; }
.pair-opps tbody th { font-weight: 500; color: var(--text); background: var(--surface); position: static; text-align: left; }
.pair-opps td { white-space: normal; }
@media (max-width: 640px) { .matchup .stack td:empty { display: none; } }

/* phone: committee */
.live-top { margin: .5rem 0 0; font-size: .85rem; line-height: 1.45; }
@media (max-width: 640px) {
  /* Build Your Own Committee: season and date share a row, the team menu gets the next */
  .byo-controls:has(#asof) { grid-template-columns: 6.2rem minmax(0, 1fr); }
  .byo-controls:has(#asof) label:nth-child(2) { grid-column: auto; }
  .byo-controls:has(#asof) label:nth-child(3) { grid-column: span 2; }
  .byo-weights .section-title { gap: .35rem; }
  .byo-weights #presets { width: 100%; }
  .byo-weights #presets button { flex: 1 1 auto; padding: .35rem .3rem; min-height: 36px; }
  .how-weights summary { cursor: pointer; font-size: .85rem; color: var(--muted); margin: .35rem 0 .1rem; }
  .how-weights p { margin: .3rem 0; }
  .sliders { gap: 0; margin: .2rem 0; }
  .slider { grid-template-columns: minmax(0, 1fr) 7.2rem 2.1rem; gap: .35rem; font-size: .84rem; min-height: 38px; }
  .slider label { display: flex; align-items: center; gap: .3rem; min-width: 0; line-height: 1.2; }
  .live-top { margin: .1rem 0 .35rem; padding: .4rem .55rem; background: var(--accent-soft); border-radius: var(--radius); }  /* right under the presets, in view while you slide */
  /* the ranking comes straight after its heading; the agreement and your-team cards follow it */
  #results { display: flex; flex-direction: column; }
  #results > * { margin-top: 0; }
  #results > .byo-head { order: -2; }
  #results > .byo-rank { order: -1; margin-bottom: .8rem; }
  #results > .byo-head.section-title { margin-top: .8rem; }
  .byo-table { width: 100%; }
  .byo-table td.lead { white-space: normal; }
  .byo-table td.lead a { display: inline-block; padding: .45rem 0; margin: -.45rem 0; }  /* a 32px+ tap target, same row height */
  .byo-table tr:last-child > td { padding-bottom: .5rem; }  /* that tap area stays inside the table's scroll box */
  .pick-note { margin: .1rem 0 .3rem; }
  .agree > div { padding: .45rem .6rem; }
  .agree > div strong { font-size: 1.1rem; }
  .field-card .grid-2.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; font-size: .88rem; }
  .field-list { padding-left: 1.4rem; }
  .pair-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Make My Case */
  .case-kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-kpis .kpi .v { font-size: 1.1rem; }
  /* five teams side by side: tighter cells so they fit; the measure names stay pinned if not */
  table.case-table { font-size: .78rem; }
  table.case-table th, table.case-table td { padding: .3rem .25rem; }
  table.case-table th[scope="row"] { white-space: normal; min-width: 5.2rem; max-width: 6rem; line-height: 1.2; }
  table.case-table thead th { white-space: normal; min-width: 0; line-height: 1.2; }
  table.case-points th[scope="row"] { white-space: normal; }
  /* "Full ranking ↓" / "pick its games ↓" land with a little room above the heading */
  #rank-h, #my-h, #pair-h { scroll-margin-top: .8rem; }
  .pair-table td:last-child:not([colspan]) { white-space: nowrap; }
  .case-fold summary { cursor: pointer; font-size: .85rem; color: var(--muted); }
}

/* phone: formula */
/* fold-note: an explanation that reads as a plain paragraph on desktop and folds behind a summary on phones */
details.fold-note > summary { display: none; }
@media (max-width: 640px) {
  details.fold-note { margin: .2rem 0 .4rem; }
  details.fold-note > summary { display: list-item; cursor: pointer; font-size: .85rem; color: var(--muted); padding: .35rem 0; }
  details.fold-note > p { margin-top: .1rem; }
  .chart .axis, .chart .quad-lbl, .chart .pt-lbl { font-size: 12px; }
  .chart .lbl { font-size: 13px; }
  .fit-base td:first-child, .timing td:first-child, .timing th:first-child, .fit-base th:first-child { min-width: 9rem; }
  tr.tier-row td { border-top: 2px dashed var(--muted); }
  .field-fold > summary { cursor: pointer; min-height: 36px; padding: .45rem 0; font-size: .9rem; }
  .table-view > summary { min-height: 36px; padding: .45rem 0; box-sizing: border-box; }
}
/* Committee Formula ranking table, phones up to small tablets (≤900px): ranks, team and record until
   "Show all columns"; with all 14 columns the team column slides to the left edge and stays there */
.upto-900 { display: none; }
.upto-900i { display: none; }
@media (max-width: 900px) {
  .upto-900 { display: block; }
  .fit-rank:not(.all-cols) .more-col { display: none; }
  .fit-rank.all-cols th:nth-child(4), .fit-rank.all-cols td:nth-child(4) { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border), -1px 0 0 var(--border); }
  .fit-rank.all-cols th:nth-child(4) { background: var(--surface-2); z-index: 2; }
  /* twin résumés: short headers, no date or "ranked ahead" columns, preseason ranks under the names,
     and the first few pairs until "Show all" (.over-900 / .upto-900i are the 900px wide-only / phone-only) */
  .over-900 { display: none !important; }
  .upto-900i { display: inline; }
  .twins td, .twins th { white-space: normal; }
  .twins td .muted { display: block; font-size: .78rem; }
  .twins td.nowrap { white-space: nowrap; }
  .twins:not(.all-rows) tr.more-twin { display: none; }
}
@media (max-width: 640px) { .fit-rank.all-cols table { font-size: .8rem; } }
/* Résumé vs. Power: room between the chart card and the two lists under it */
.rp-lists { margin-top: 1rem; }

/* phone: explorer */
/* Schedule Explorer: filters sit in a fold that only folds on phones */
.explorer-filters > summary { display: none; }
/* small tablets: the four controls in one row (as from 760px) rather than two rows plus a full-width one */
@media (min-width: 641px) and (max-width: 759px) {
  .explorer-controls { grid-template-columns: 90px 1fr 1fr 1.25fr; }
  .explorer-controls .span-2 { grid-column: auto; }
}
@media (max-width: 640px) {
  .explorer-filters { margin: 0 0 .6rem; }
  .explorer-filters > summary { display: list-item; cursor: pointer; min-height: 36px; line-height: 36px; font-size: .9rem; }
  .explorer-filters[open] > summary { margin-bottom: .3rem; }
  .explorer-filters .seg button { padding: .35rem .5rem; }
  /* two teams side by side, then season and date */
  .explorer-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: .5rem; }
  .explorer-controls label:nth-child(1) { order: 3; }
  .explorer-controls label:nth-child(4) { order: 4; grid-column: auto; }
  /* "New here? Try" chips: one row that scrolls sideways */
  .start-here { flex-wrap: nowrap; overflow-x: auto; margin: -.4rem 0 .6rem; padding-bottom: .15rem; scrollbar-width: none; }
  .start-here > * { flex: 0 0 auto; }
  .start-here a { padding: .35rem .7rem; }
  /* side-by-side summary: let long measures and values wrap instead of scrolling */
  .summary-table th, .summary-table td { white-space: normal; overflow-wrap: anywhere; }
  .summary-table tbody th { min-width: 0; width: 44%; }
  /* one team: the labels get the room, the short values need little */
  .summary-table:not(:has(thead th:nth-child(3))) tbody th { width: 64%; }
  /* one compact card per game: opponent and site, then date, result, difficulty and credit;
     the rest (rating, rest, records, ranks, series) wait behind "More details" */
  #results .grid-2 .stack tr { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr); gap: .2rem .5rem; padding: .4rem .6rem; }
  #results .grid-2 .stack td { display: block; padding: 0; text-align: left; }
  #results .grid-2 .stack td::before { display: block; font-size: .72rem; line-height: 1.2; }
  #results .grid-2 .stack td.lead { grid-row: 1; grid-column: 1 / 4; line-height: 1.3; }
  #results .grid-2 .stack td.col-site { grid-row: 1; grid-column: 4; text-align: right; color: var(--muted); font-size: .85rem; }
  #results .grid-2 .stack td.col-site::before { content: none; }
  #results .grid-2 .stack td.minor { display: none; grid-column: span 2; order: 1; }
  #results .grid-2 .stack.show-details td.minor { display: block; }
  #results .grid-2 .stack td[colspan] { grid-column: 1 / -1; }
  /* the opponent's rank badge and record ride on the card's first line */
  #results .grid-2 .stack .opp-rec { color: var(--muted); font-size: .82rem; white-space: nowrap; }
  /* matched schedules: the two teams' games side by side, labels on top */
  .matchup .stack tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; padding: .4rem .6rem; }
  .matchup .stack td { display: block; padding: 0; text-align: left; }
  .matchup .stack td::before { display: block; font-size: .75rem; }
  .matchup .stack td:empty { display: block; background: transparent; }
  .matchup .stack td:empty::before { content: "no look-alike"; font-style: italic; }
  /* Team History */
  .team-controls { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .team-controls .span-2 { grid-column: auto; }
  .team-seasons td.tags { white-space: normal; }
  .team-seasons td.tags .tag { margin: 0 .2rem .15rem 0; }
  #season-detail { scroll-margin-top: .8rem; }
  .team-seasons tr.hl > td:first-child { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface); }
  /* every change and why: one compact card per snapshot */
  .stack .reasons tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem .5rem; padding: .45rem .6rem; }
  .stack .reasons td { display: block; padding: 0; text-align: left; }
  .stack .reasons td::before { display: block; font-size: .75rem; line-height: 1.2; }
  .stack .reasons td.lead { grid-column: 1 / -1; }
  .stack .reasons td.small { grid-column: 1 / -1; order: 1; font-size: .82rem; }
  .stack .reasons td:nth-child(6) { grid-column: span 2; }
  .team-kpis { gap: .35rem; }
  .team-kpis .kpi { display: flex; align-items: center; gap: .7rem; padding: .35rem .6rem; }
  .team-kpis .kpi .v { flex: 0 0 4.2rem; font-size: 1.1rem; }
  /* Conferences: sortable headers stay tappable */
  .conf-table th .link-btn { min-height: 34px; margin-left: 0; padding: .1rem .2rem; white-space: nowrap; }
  .conf-table td:first-child { white-space: normal; min-width: 7rem; }
  .conf-table td:nth-child(5) { white-space: normal; min-width: 6.5rem; }
  /* Explorer summary: key measures only until "More measures" is tapped */
  .summary-table tr.more-row { display: none; }
  .show-more .summary-table tr.more-row { display: table-row; }
  .more-measures { margin: .4rem 0 .8rem; }
  /* comparing two teams: each team's own schedule is a fold */
  .schedule-fold > summary { cursor: pointer; padding: .4rem 0; }
  .schedule-fold > summary h2 { display: inline; font-size: 1.05rem; }
  .schedule-fold > .section-title { margin-top: .2rem; }
}
/* tablets and phones turned sideways: long measure names wrap so the second team stays on screen */
@media (max-width: 1000px) { .summary-table tbody th { white-space: normal; max-width: 18rem; } }
/* Explorer summary scrolls sideways only (sub-pixel row heights left a 2-3px vertical scrollbar) */
.table-wrap.compare { overflow-y: hidden; }
/* Team History: the whole season row picks the season */
.team-seasons tr[data-row] { cursor: pointer; }

/* highlights keep their color in pinned columns (.sticky-col, .compare, pinned rank/team columns),
   whose own background would otherwise cover them */
table tr.hl.hl > *, table tr > .hl.hl { background: var(--hl); }
table tr.hl.hl > :first-child { box-shadow: inset 3px 0 0 var(--hl-bar); }
table tr.mine.mine > td { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
table tr > td.fav.fav { box-shadow: inset 3px 0 0 var(--accent); }
@media (max-width: 1023px) {
  .sticky-col tr.hl.hl > :first-child { box-shadow: inset 3px 0 0 var(--hl-bar), 1px 0 0 var(--border); }
}

/* a closed fold always shows its summary, whatever the width (folds whose summary is phone-only would
   otherwise be stranded shut when a phone turns sideways) */
@media (min-width: 641px) {
  details.phone-fold:not([open]) > summary, details.fold-note:not([open]) > summary { display: list-item; cursor: pointer; color: var(--muted); font-size: .9rem; }
}

/* phone: shared fixes */
/* tap targets: footer links get finger-sized boxes, upright and sideways (the ⓘ buttons already have a 42px ::after hit area) */
@media (max-width: 640px), (max-height: 500px) {
  .site-footer a { display: inline-block; padding: .45rem 0; }
}
@media (max-width: 640px) {
  .tag { font-size: .75rem; }
  /* What the Chair Said: three short counts side by side rather than one tall box each
     (other kpis-3 rows have long labels or their own phone layout) */
  .kpis.kpis-3.quote-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* "Suggest a feature" beside every page title (common.js) */
.suggest-link { font-size: .8rem; font-weight: 400; white-space: nowrap; margin-left: .5rem; vertical-align: middle; }

/* ---------- case files: the "Add to case file" button and its toast (every argument tool) ---------- */
.btn.add-case { border-color: var(--accent); }
.case-toast { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: .55rem .9rem; border-radius: 8px; font-size: .9rem; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 11; max-width: calc(100vw - 32px); }
.case-toast.show { opacity: 1; pointer-events: auto; }
.case-toast a { color: inherit; font-weight: 650; }

/* ---------- rank score: the gap strip (site/js/rankscore.js) ---------- */
.gap-strip .tier-gap { fill: var(--accent-soft); }
.gap-strip .cut-line { stroke: var(--text); stroke-dasharray: 4 3; stroke-width: 1; }
.gap-strip .pt { fill: var(--mark); fill-opacity: .55; stroke: var(--surface); stroke-width: 1.5; }
.gap-strip .pt.in { fill-opacity: 1; }
.gap-strip .pt.fav { stroke: var(--text); stroke-width: 2.5; }
.gap-strip .pt-lbl { font-size: 12px; font-weight: 600; fill: var(--text); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.gap-card { padding: .5rem .6rem; }
.gap-card .tiers { margin: .2rem 0 0; }
.export-only { display: none; }
tr.tier-break > td, tr.tier-break > th { border-top: 2px solid var(--accent); }

/* ---------- committee range on Build Your Own Committee (site/js/committee_range.js) ---------- */
.committee-range { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin: .3rem 0 .4rem; }
.committee-range select { margin-left: .3rem; }
.slider input.banded { background: linear-gradient(to right, transparent var(--lo), color-mix(in srgb, var(--win) 30%, transparent) var(--lo), color-mix(in srgb, var(--win) 30%, transparent) var(--hi), transparent var(--hi)); border-radius: 4px; }
.slider.fixed { opacity: .5; }
.range-note.in { color: var(--win); }
.range-note.out { border-left: 3px solid var(--loss); padding-left: .5rem; }