/* The look of the whole site. A sports page, kept tight: a blue bar across the top, a white page, narrow bold
   lettering for headings and scores, the same blue for the things you press, and highlighter yellow for a pick,
   for what is on right now, and for the one button in the bar.
   The lettering is Barlow and Barlow Condensed (SIL Open Font License), served from this site (see /fonts). */
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-600.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }

:root {
  /* surfaces and ink. --line is a hairline between things, --edge the outline of a quiet button, --field the outline of a box you type in (dark enough to find). */
  --paper: #ffffff; --card: #ffffff; --wash: #f3f4f6; --ink: #15181e; --ink-2: #454b57; --ink-3: #5f6673; --line: #e3e5e9; --edge: #c6cad1; --field: #868c98;
  /* blue is for pressing, yellow is for picks, red is for a miss or a mistake */
  --brand: #1f57c9; --brand-2: #1947a6; --brand-text: #1b4fb8; --brand-soft: #e8effb; --on-brand: #ffffff;
  --hl: #ffe14a; --hl-ink: #15181e; --hl-soft: #fff6c4; --red: #e5484d; --red-ink: #c12d3a; --red-soft: #fdebec; --danger: #c12d3a;
  /* the dark panels: the promise band and the Big Board */
  --deep: #101726; --deep-ink: #ffffff; --deep-dim: #b6bccb;
  /* the bar across the top of the public pages: the team's blue, with the name in white and the one button in yellow */
  --bar: #1f57c9; --bar-ink: #ffffff; --bar-dim: #dbe6fb; --bar-tile: #173f93;
  --me1: #1f57c9; --me2: #ffe14a; --jersey-line: #15181e;
  --shadow-1: 0 1px 2px rgba(15, 18, 25, .05); --shadow-2: 0 10px 26px -14px rgba(15, 18, 25, .28), 0 2px 6px -2px rgba(15, 18, 25, .08); --shadow-3: 0 24px 50px -22px rgba(15, 18, 25, .4), 0 6px 14px -6px rgba(15, 18, 25, .18);
  --r1: 8px; --r2: 10px; --r3: 12px;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Barlow Condensed", "Barlow", "Arial Narrow", system-ui, sans-serif; --num: var(--display);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gl: max(16px, env(safe-area-inset-left, 0px)); --gr: max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0f1218; --card: #171b23; --wash: #1e232d; --ink: #eef0f4; --ink-2: #b4bac6; --ink-3: #8b92a0; --line: #272d38; --edge: #3a4250; --field: #717989;
  --brand: #2f66d6; --brand-2: #3a70de; --brand-text: #9dbcff; --brand-soft: #1a2740; --on-brand: #ffffff;
  --hl: #ffe14a; --hl-ink: #0c1226; --hl-soft: #3a3410; --red: #ff6b74; --red-ink: #ff8f97; --red-soft: #3b1a23;
  --deep: #0a0d12; --deep-ink: #ffffff; --deep-dim: #aeb5c2; --jersey-line: #9aa2b0; --bar: #1b4cb1; --bar-tile: #143577;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 14px 34px -16px rgba(0, 0, 0, .7), 0 3px 8px -2px rgba(0, 0, 0, .35); --shadow-3: 0 30px 60px -24px rgba(0, 0, 0, .8), 0 8px 18px -8px rgba(0, 0, 0, .5); color-scheme: dark; } }
:root[data-theme="dark"] {
  --paper: #0f1218; --card: #171b23; --wash: #1e232d; --ink: #eef0f4; --ink-2: #b4bac6; --ink-3: #8b92a0; --line: #272d38; --edge: #3a4250; --field: #717989;
  --brand: #2f66d6; --brand-2: #3a70de; --brand-text: #9dbcff; --brand-soft: #1a2740; --on-brand: #ffffff;
  --hl: #ffe14a; --hl-ink: #0c1226; --hl-soft: #3a3410; --red: #ff6b74; --red-ink: #ff8f97; --red-soft: #3b1a23;
  --deep: #0a0d12; --deep-ink: #ffffff; --deep-dim: #aeb5c2; --jersey-line: #9aa2b0; --bar: #1b4cb1; --bar-tile: #143577;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 14px 34px -16px rgba(0, 0, 0, .7), 0 3px 8px -2px rgba(0, 0, 0, .35); --shadow-3: 0 30px 60px -24px rgba(0, 0, 0, .8), 0 8px 18px -8px rgba(0, 0, 0, .5); color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper); }
body:has(header.top)::before { background: var(--bar); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a:hover { color: var(--brand-text); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 60%, transparent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(32px, 7vw, 46px); font-weight: 700; line-height: 1.05; }
h2 { font-size: 26px; font-weight: 700; line-height: 1.15; }
h3 { font-size: 20px; font-weight: 700; line-height: 1.2; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-left: var(--gl); padding-right: var(--gr); }
/* The small quiet line: dates, counts, labels. (The class name is from the first design, when it was set in a mono face.) */
.mono { font: 500 13px/1.4 var(--body); color: var(--ink-2); }
.num { font-family: var(--num); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.dim { color: var(--ink-2); } .small { font-size: 14px; } .center { text-align: center; }
.hl { background: var(--hl); color: var(--hl-ink); padding: 0 .16em; border-radius: .2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.stack { display: flex; flex-direction: column; gap: 12px; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .between { justify-content: space-between; }
.stripe { display: none; }

/* buttons: ink by default, blue (.main) for the main thing on a screen, an outline for the quiet option, red only for an action that deletes */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 20px; border: 1px solid transparent; border-radius: 8px; background: var(--ink); color: var(--paper);
  font: 600 15.5px/1.15 var(--body); text-align: center; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease; }
.btn:hover { color: var(--paper); transform: translateY(-1px); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--ink) 55%, transparent); }
.btn:active { transform: none; box-shadow: none; }
.btn.main, button.btn[type="submit"]:not(.ghost), .dialog > .acts .btn:last-child:not(.ghost):not(.red) { background: var(--brand); color: var(--on-brand); }
.btn.main:hover, button.btn[type="submit"]:not(.ghost):hover, .dialog > .acts .btn:last-child:not(.ghost):not(.red):hover { background: var(--brand-2); color: var(--on-brand); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--brand) 80%, transparent); }
.btn.red { background: var(--danger); color: #fff; } .btn.red:hover { background: var(--danger); color: #fff; filter: brightness(1.08); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--danger) 80%, transparent); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--edge); } .btn.ghost:hover { color: var(--ink); background: var(--wash); box-shadow: none; }
.btn.hot { background: var(--hl); color: var(--hl-ink); } .btn.hot:hover { color: var(--hl-ink); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--hl) 90%, #7a6400); }
.btn.sm { min-height: 38px; padding: 6px 14px; font-size: 14.5px; border-radius: 10px; } .btn.block { width: 100%; }
@media (pointer: coarse) { .btn.sm { min-height: 42px; } .iconbtn { width: 44px; height: 44px; } }
.btn[disabled] { opacity: .45; pointer-events: none; }
.linkbtn { background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; color: var(--brand-text); font-weight: 600; } .linkbtn:hover { color: var(--ink); }
.iconbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; border-radius: 10px; color: inherit; } .iconbtn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

/* forms */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field > span, .label { font: 600 13.5px/1.3 var(--body); color: var(--ink-2); }
.input, select.input, textarea.input { width: 100%; min-height: 46px; padding: 10px 13px; background: var(--card); border: 1px solid var(--field); border-radius: var(--r1); font-size: 16px; transition: border-color .12s ease, box-shadow .12s ease; }
.input:hover { border-color: var(--ink-2); }
.input:focus-visible { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.45; }
.input::placeholder { color: var(--ink-3); }
.hint { font-size: 13.5px; color: var(--ink-2); } .err { font-size: 14px; color: var(--red-ink); font-weight: 600; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 8px; background: var(--wash); }
.seg button { border: 0; background: none; padding: 7px 14px; min-height: 38px; border-radius: 9px; font: 600 14.5px/1 var(--body); color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
.switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; } .switch input { appearance: none; flex: none; width: 46px; height: 28px; margin: 1px 0 0; border: 0; border-radius: 12px; background: var(--field); position: relative; cursor: pointer; transition: background-color .15s ease; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(12, 18, 38, .3); transition: transform .15s ease; }
.switch input:checked { background: var(--brand); } .switch input:checked::after { transform: translateX(18px); }
.switch b { display: block; font-weight: 600; } .switch small { color: var(--ink-2); font-size: 13.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { border: 1px solid var(--edge); border-radius: 999px; background: var(--card); padding: 7px 14px; font-size: 14.5px; font-weight: 600; min-height: 38px; transition: border-color .12s ease, background-color .12s ease; }
.chip:hover:not([disabled]) { border-color: var(--ink-3); } .chip[disabled] { opacity: .4; cursor: default; }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.swatch { width: 46px; height: 46px; padding: 0; border: 1px solid var(--field); border-radius: var(--r1); background: var(--card); cursor: pointer; overflow: hidden; } .swatch::-webkit-color-swatch-wrapper { padding: 4px; } .swatch::-webkit-color-swatch { border: 0; border-radius: 6px; } .swatch::-moz-color-swatch { border: 0; border-radius: 6px; }

/* cards. A card's title row is the old "bar": the same markup, now a quiet heading with a hairline under it. */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r2); box-shadow: var(--shadow-1); min-width: 0; overflow: hidden; }
.card.pad { padding: 18px; }
.bar { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding: 15px 18px 13px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.bar h2, .bar h3, .ttl { font: 700 22px/1.2 var(--display); }
.note { background: var(--brand-soft); padding: 12px 15px; border-radius: 8px; font-size: 14.5px; }
.pill { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--body); padding: 5px 9px; border-radius: 999px; background: var(--wash); color: var(--ink-2); white-space: nowrap; }
.pill.red { background: var(--red-soft); color: var(--red-ink); } .pill.fill { background: var(--hl); color: var(--hl-ink); }
.jersey { flex: none; display: block; } .jersey path:first-child { stroke: var(--jersey-line); }

/* site header: a solid blue bar, like the top of a sports page */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bar); color: var(--bar-ink); }
.top .wrap { display: flex; align-items: center; gap: 14px; min-height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 24.5px/1 var(--display); text-decoration: none; color: var(--bar-ink); white-space: nowrap; } .brand:hover { color: var(--bar-ink); }
.brand svg { flex: none; display: block; } .brand svg rect:first-child { fill: var(--bar-tile); } .brand i { font-style: normal; }
.top nav { display: none; gap: 26px; margin-left: auto; } .top nav a { font: 500 15px/1 var(--body); text-decoration: none; color: var(--bar-dim); } .top nav a:hover { color: var(--bar-ink); text-decoration: underline; text-underline-offset: 5px; }
.top .btn { margin-left: auto; background: var(--hl); color: var(--hl-ink); } .top .btn:hover { background: var(--hl); color: var(--hl-ink); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); } .top nav + .btn { margin-left: 0; }
.top :focus-visible { outline-color: #fff; }
@media (min-width: 860px) { .top nav { display: flex; } }
/* On a narrow phone the name and the button still share one line. On the very narrowest the button steps aside: the same button is in the page right below. */
@media (max-width: 400px) { .brand { font-size: 19px; gap: 8px; } .brand svg { width: 26px; height: 26px; } .top .wrap { gap: 10px; } .top .btn.sm { font-size: 13.5px; padding-inline: 11px; } }
@media (max-width: 339px) { .top .wrap:has(nav.site) > .btn { display: none; } }

/* home. A lobby, kept compact: what it is in a few lines, then what's coming up next to what a league can pick any
   week, then how it works, the price and questions. */
.pitch { display: grid; gap: 10px; padding-block: 20px 16px; }
.pitch h1 { font-size: clamp(31px, 7.8vw, 44px); }
.pitch .lede { font-size: 17px; line-height: 1.5; max-width: 44em; color: var(--ink-2); }
.pitch .go { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 4px; } .pitch .go .row { flex: 1 1 100%; } .pitch .go .row > .btn { flex: 1 1 0; white-space: nowrap; padding-inline: 12px; }
@media (min-width: 620px) { .pitch { padding-block: 30px 22px; } .pitch .go .row { flex: none; } .pitch .go .row > .btn { flex: none; padding-inline: 20px; } }
.lobby { display: grid; gap: 14px; padding-bottom: 28px; }
@media (min-width: 920px) { .lobby { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding-bottom: 38px; } .lobby.solo > .weekly { grid-column: 1 / -1; } }
/* A panel is a short table with a title strip: the dates coming up, and what a league can pick any week. */
.panel { border: 1px solid var(--edge); border-radius: var(--r2); background: var(--card); overflow: hidden; min-width: 0; }
.panel > .bar { padding: 9px 14px 8px; background: var(--wash); align-items: baseline; } .panel > .bar h2 { font-size: 21px; }
.ev { display: grid; gap: 12px; padding: 9px 14px 10px; border-top: 1px solid var(--line); align-items: start; } .bar + .ev { border-top: 0; }
.ev { grid-template-columns: 104px minmax(0, 1fr); }
.ev .day { font: 700 17.5px/1.2 var(--display); color: var(--brand-text); white-space: nowrap; letter-spacing: .01em; }
.ev .day small { display: block; min-height: 17px; font: 500 12.5px/1.35 var(--body); color: var(--ink-3); letter-spacing: 0; }
/* Something being played right now gets the highlighter. */
.ev .day small.on { display: table; margin-top: 2px; padding: 0 6px; border-radius: 4px; background: var(--hl); color: var(--hl-ink); font-weight: 600; }
.what { min-width: 0; } .what > b { display: block; font-weight: 600; font-size: 15.5px; line-height: 1.3; } .what > small { display: block; margin-top: 1px; color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
/* The rest of the year folds away under the nearest few. The two panels are the same height, so the fold sits on the
   bottom edge of its panel, and any room to spare goes above it. */
.upnext { display: flex; flex-direction: column; } .weekly { display: flex; flex-direction: column; } .weekly .sports { flex: 1; }
.later { border-top: 1px solid var(--line); margin-top: auto; } .later > summary { padding: 9px 14px; font: 600 14px/1.3 var(--body); color: var(--brand-text); cursor: pointer; list-style-position: inside; } .later > summary:hover { background: var(--wash); }
.later[open] > summary { border-bottom: 1px solid var(--line); } .later > .ev:first-of-type { border-top: 0; }
/* The sports, two across. The hairlines between them are the grid's own background showing through its 1px gaps. */
.sports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.sp { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 9px 12px 10px 14px; background: var(--card); align-items: start; } .sp.wide { grid-column: 1 / -1; }
.sp svg { color: var(--brand-text); margin-top: 1px; } .sp .what > small { font-size: 13px; color: var(--ink-3); }
@media (max-width: 400px) { .sp { padding-inline: 11px 8px; gap: 8px; } .sp .what > b { font-size: 15px; } }
/* Soccer's leagues: the country, the league, and how long its season runs. */
.lgs { list-style: none; margin: 7px 0 1px; padding: 0; display: grid; gap: 4px; font-size: 14px; line-height: 1.3; }
.lgs li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; } .lgs .c { color: var(--ink-2); } .lgs .n { font-weight: 600; }
.lgs i { font: 500 12.5px/1.3 var(--body); font-style: normal; color: var(--ink-3); white-space: nowrap; }
.sec { position: relative; padding-block: 26px; display: grid; gap: 14px; } .sec > h2 { font-size: clamp(25px, 5.4vw, 30px); }
.sec::before { content: ""; position: absolute; top: 0; left: var(--gl); right: var(--gr); border-top: 1px solid var(--line); }
.sec .sub { color: var(--ink-2); font-size: 16px; max-width: 74ch; } .sec > h2 + .sub { margin-top: -8px; } .sec > p > a, .sec .sub a { color: var(--brand-text); font-weight: 600; }
@media (min-width: 860px) { .sec { padding-block: 32px; gap: 16px; } }
.incl { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px 24px; font-size: 15px; font-weight: 500; } @media (min-width: 560px) { .incl { grid-template-columns: 1fr 1fr; } } @media (min-width: 920px) { .incl { grid-template-columns: repeat(3, 1fr); } }
.more { gap: 6px 22px; } .more a { color: var(--brand-text); font-weight: 600; } .incl li { display: flex; gap: 8px; align-items: center; } .incl svg { color: var(--brand-text); flex: none; }
/* The price list: one row a plan. On a phone the name and the price share the first line. */
.prices { border: 1px solid var(--edge); border-radius: var(--r2); background: var(--card); overflow: hidden; }
.pr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 14px; border-top: 1px solid var(--line); } .pr:first-child { border-top: 0; }
.pr .who { grid-area: 1 / 1; } .pr .amt { grid-area: 1 / 2; text-align: right; } .pr .gets { grid-area: 2 / 1 / 3 / -1; } .pr .btn { grid-area: 3 / 1 / 4 / -1; min-height: 44px; }
.pr h3, article.guide .pr h3 { font-size: 23px; margin: 0; } .pr .who span { display: block; color: var(--ink-2); font-size: 14px; line-height: 1.35; }
.pr .amt b { display: block; font: 700 32px/1 var(--display); } .pr .amt small { font-size: 12.5px; color: var(--ink-2); }
.pr .gets { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 860px) { .pr { grid-template-columns: 286px minmax(0, 1fr) 84px 186px; gap: 22px; padding: 13px 16px; } .pr .who, .pr .amt, .pr .gets, .pr .btn { grid-area: auto; } }
.fine { max-width: 96ch; color: var(--ink-2); } .fine a { color: var(--brand-text); font-weight: 600; white-space: nowrap; }
/* The steps are a numbered list, because that is what they are. */
.steps4 { list-style: none; counter-reset: how; margin: 0; padding: 0; display: grid; gap: 16px 22px; } @media (min-width: 620px) { .steps4 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .steps4 { grid-template-columns: repeat(4, 1fr); } }
.steps4 li { counter-increment: how; display: grid; gap: 3px; align-content: start; padding-top: 10px; border-top: 3px solid var(--ink); }
.steps4 li::before { content: counter(how); font: 700 16px/1 var(--display); color: var(--ink-3); } .steps4 b { font: 700 21px/1.15 var(--display); } .steps4 span { color: var(--ink-2); font-size: 15px; line-height: 1.4; }
.plain { margin: 0; padding-left: 20px; display: grid; gap: 8px; } .plain li { padding-left: 2px; } .plain li::marker { color: var(--ink-3); }
/* The two short notes under the lists. The one about the Commish is the pale blue used for anything it does. */
.nb { display: grid; gap: 5px; align-content: start; padding: 13px 14px 14px; background: var(--wash); border-radius: var(--r2); } .nb h2 { font-size: 21px; } .nb p { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); } .nb a { color: var(--brand-text); font-weight: 600; white-space: nowrap; }
.nb.helper { background: var(--brand-soft); } .helper h2 { display: flex; gap: 8px; align-items: center; } .helper h2 svg { flex: none; color: var(--brand-text); }
.feat { display: grid; gap: 26px 32px; } @media (min-width: 720px) { .feat { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1020px) { .feat { grid-template-columns: repeat(3, 1fr); } }
.feat article { display: grid; gap: 6px; align-content: start; } .feat h3 { font-size: 18px; }
.plans { display: grid; gap: 22px 14px; align-items: stretch; padding-top: 12px; } @media (min-width: 860px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan { position: relative; background: var(--card); border: 1px solid var(--edge); border-radius: var(--r3); padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.plan.pop { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .plan.mine { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.plan .flag { position: absolute; top: -12px; left: 16px; background: var(--brand); color: var(--on-brand); border-radius: 6px; padding: 4px 9px; font: 600 12.5px/1.25 var(--body); } .plan.mine .flag { background: var(--ink); color: var(--paper); }
.plan h3 { font-size: 24px; } .plan .cost { font: 700 44px/1 var(--display); display: flex; align-items: baseline; gap: 8px; } .plan .cost small { font: 500 15px/1 var(--body); letter-spacing: 0; color: var(--ink-2); }
.plan .ticks { flex: 1 0 auto; align-content: start; } .plan .btn { align-self: stretch; }
.plan .after { margin: 0; border-top: 1px solid var(--line); padding-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); } .plan .after b { color: var(--ink); }
.contract { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 8px; } .contract p { margin: 0; }
.contract.up { border-top: 0; background: var(--red-soft); border-radius: 8px; padding: 14px 16px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 15px; } .ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: start; } .ticks svg { color: var(--brand-text); margin-top: 3px; }
/* Questions: plain fold-out rows, with the browser's own little triangle. */
.faq { display: grid; border-top: 1px solid var(--line); max-width: 820px; } .faq details { border-bottom: 1px solid var(--line); }
.faq summary { font: 600 16.5px/1.4 var(--body); cursor: pointer; padding: 11px 0; } .faq summary:hover { color: var(--brand-text); }
.faq p { margin: 0; padding: 0 0 14px 19px; max-width: 72ch; color: var(--ink-2); font-size: 15.5px; }
/* On the home page, on a wide screen, the questions sit in two columns. */
@media (min-width: 920px) { #faq .faq { max-width: none; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: start; border-top: 0; } #faq .faq details { border-top: 1px solid var(--line); border-bottom: 0; } }
.foot { background: var(--wash); border-top: 1px solid var(--line); color: var(--ink-2); padding-block: 30px 34px; font-size: 14px; margin-top: 18px; } .foot a { color: var(--ink); } .foot .wrap { display: grid; gap: 14px; }
.prose { max-width: 68ch; display: grid; gap: 14px; padding-block: 36px 64px; } .prose h1 { font-size: clamp(30px, 6.4vw, 40px); } .prose h2 { font-size: 21px; margin-top: 14px; } .prose ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* ----- reading pages: pricing, the guides, the product pages ----- */
article.guide { --measure: 700px; display: grid; gap: 16px; padding-block: 30px 72px; min-width: 0; font-size: 17px; }
article.guide > * { max-width: var(--measure); min-width: 0; margin-block: 0; } article.guide > .full { max-width: none; }
article.guide h1 { font-size: clamp(30px, 6.6vw, 42px); max-width: 20em; } article.guide h2 { font-size: 24px; margin-top: 22px; } article.guide h3 { font-size: 18px; margin-top: 6px; }
article.guide .lede { font-size: 19px; line-height: 1.5; color: var(--ink-2); }
article.guide ul, article.guide ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; } article.guide ol > li::marker { font-weight: 600; }
article.guide a { color: var(--brand-text); } article.guide a:hover { color: var(--ink); } article.guide .btn { text-decoration: none; } article.guide .btn, article.guide .btn:hover { color: var(--paper); } article.guide .btn.main, article.guide .btn.main:hover { color: var(--on-brand); } article.guide .btn.ghost, article.guide .btn.ghost:hover { color: var(--ink); }
article.guide .feat { margin-top: 4px; } article.guide .feat h3 { margin: 0; }
article.guide > .mono { color: var(--brand-text); font-weight: 600; }
.crumbs ol, article.guide .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font: 500 13.5px/1.3 var(--body); color: var(--ink-2); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--edge); } article.guide .crumbs a { color: var(--ink-2); text-decoration: none; } article.guide .crumbs a:hover { color: var(--ink); text-decoration: underline; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r2); background: var(--card); box-shadow: var(--shadow-1); font-size: 15px; }
.tbl { border-collapse: collapse; width: 100%; font-size: 15px; } .tbl caption { caption-side: top; text-align: left; padding: 15px 16px 13px; font: 700 21px/1.2 var(--display); border-bottom: 1px solid var(--line); }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 11px 16px; border-top: 1px solid var(--line); min-width: 104px; } .tbl thead th { font: 600 12.5px/1.3 var(--body); color: var(--ink-2); border-top: 0; background: var(--wash); white-space: nowrap; }
.tbl tbody th { font-weight: 600; } .tbl td:nth-child(3):last-child, .tbl td:nth-child(2):last-child { min-width: 220px; }
/* the next step at the foot of a reading page: a quiet box with one button */
.cta { background: var(--wash); border-radius: var(--r3); padding: 22px; display: grid; gap: 16px; margin-top: 30px !important; align-items: center; } .cta h2, article.guide .cta h2 { margin: 0; font-size: 22px; } .cta p { margin: 6px 0 0; color: var(--ink-2); max-width: 54ch; font-size: 16px; }
@media (min-width: 800px) { .cta { grid-template-columns: 1fr auto; padding: 26px 28px; } }
.related { display: grid; gap: 10px; margin-top: 12px !important; } .related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
article.guide .related a { display: inline-block; border: 1px solid var(--edge); border-radius: 999px; background: var(--card); padding: 7px 14px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink); } article.guide .related a:hover { border-color: var(--brand); color: var(--brand-text); }
.reviewed { margin-top: 8px !important; }
.qas { display: grid; gap: 12px; } .qas .qa { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: grid; gap: 8px; } .qas .qa h3 { font-size: 19px; margin: 0; } .qas .qa p { margin: 0; color: var(--ink-2); font-size: 16px; }
.sources { font-size: 15px; } .qlist li { padding-left: 4px; }
.copybox { border: 1px solid var(--line); border-radius: var(--r2); background: var(--card); overflow: hidden; box-shadow: var(--shadow-1); } .copybox .bar { align-items: center; } .copybox .bar h2, article.guide .copybox .bar h2 { font-size: 19px; margin: 0; }
.copybox pre { margin: 0; padding: 18px; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 15px/1.6 var(--body); max-height: 460px; overflow-y: auto; }
.fgrid { display: grid; gap: 22px 20px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding-bottom: 14px; } .fcol { display: grid; gap: 9px; align-content: start; } .fcol .mono { color: var(--ink); font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.foot .fcol a { text-decoration: none; font-size: 14.5px; color: var(--ink-2); } .foot a:hover { color: var(--brand-text); text-decoration: underline; }

@media (max-width: 640px) {
  .tablewrap { overflow: visible; } .tbl, .tbl caption, .tbl tbody, .tbl th, .tbl td { display: block; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl tr { display: grid; gap: 9px; padding: 14px 16px 16px; border-top: 1px solid var(--line); } .tbl tbody tr:first-child { border-top: 0; }
  .tbl th, .tbl td { padding: 0; border: 0; min-width: 0 !important; } .tbl td:empty { display: none; } .tbl tbody th { font-size: 17px; }
  .tbl.compact tr { grid-template-columns: 1fr 1fr; gap: 9px 14px; } .tbl.compact tbody th { grid-column: 1 / -1; }
  .tbl [data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font: 600 12px/1.3 var(--body); color: var(--ink-3); }
}
/* On a phone the site links sit in a second row under the name, and scroll sideways if they have to. */
@media (max-width: 859px) {
  .top .wrap:has(nav.site) { flex-wrap: wrap; row-gap: 0; padding-top: 8px; }
  .top nav.site { display: flex; order: 3; flex-basis: 100%; margin: 0; gap: 22px; overflow-x: auto; scrollbar-width: none; } .top nav.site a { padding: 12px 0; white-space: nowrap; } .top nav.site + .btn { margin-left: auto; }
}
.feat h3 a, article.guide .feat h3 a { color: var(--brand-text); text-decoration: none; } .feat h3 a:hover, article.guide .feat h3 a:hover { color: var(--brand-text); text-decoration: underline; text-decoration-thickness: 2px; }
.sec > p > a { color: var(--brand-text); font-weight: 600; }

/* the free pick sheet maker. The sheet is paper: white with black ink in both themes, because it is what the printer will produce. */
.tool { display: grid; gap: 22px; max-width: none !important; margin-block: 8px 12px !important; } @media (min-width: 920px) { .tool { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.tool-in { display: grid; gap: 12px; } .tool-in textarea { font: 400 14.5px/1.55 var(--mono); resize: vertical; }
.check { display: inline-flex; gap: 9px; align-items: center; font-weight: 600; min-height: 44px; cursor: pointer; } .check input { width: 20px; height: 20px; accent-color: var(--brand); }
.sheet { background: #fff; color: #0c1226; border: 1px solid #d5dae8; border-radius: var(--r2); padding: 22px; display: grid; gap: 12px; box-shadow: var(--shadow-2); font-size: 16px; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 18px; flex-wrap: wrap; border-bottom: 2px solid #0c1226; padding-bottom: 10px; } .sheet-head .ttl { font-size: 28px; font-weight: 800; overflow-wrap: anywhere; }
.line { display: flex; align-items: flex-end; gap: 8px; margin: 0; font: 600 12.5px/1.3 var(--body); color: #485170; } .line i { display: block; min-width: 120px; flex: 1; border-bottom: 1.5px solid #0c1226; height: 1.5em; } .sheet-head .line { flex: 1; min-width: 190px; max-width: 280px; }
.sheet-rows { list-style: none; margin: 0 !important; padding: 0 !important; counter-reset: g; display: grid; gap: 0 !important; }
.sheet-rows li { counter-increment: g; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 0; border-bottom: 1px solid #e2e6f1; } .sheet-rows li::before { content: counter(g); font: 700 17.5px/1 var(--num); font-variant-numeric: tabular-nums; width: 22px; flex: none; color: #6a7392; }
.rank { width: 32px; height: 28px; border: 1.5px solid #0c1226; border-radius: 6px; flex: none; }
.sheet-game { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; flex: 1; min-width: 200px; } .sheet-game.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pick { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 17px/1.15 var(--body); } .pick span:last-child { overflow-wrap: anywhere; }
@media (max-width: 520px) { .sheet { padding: 16px; } .sheet-game { min-width: 0; gap: 6px; } .sheet-game.three .pick { font-size: 14.5px; gap: 5px; } .pick { font-size: 16px; } }
.cb { width: 18px; height: 18px; border: 1.5px solid #0c1226; border-radius: 5px; flex: none; } .at { font: 500 12px/1 var(--body); color: #6a7392; }
/* A question on the printed sheet: its words, then its answers as boxes that wrap. */
.sheet-q { flex: 1; min-width: 200px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; } .sheet-q b { font: 700 16px/1.25 var(--body); overflow-wrap: anywhere; }
.sheet-opts { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px 18px; } .sheet-opts .pick { font-size: 16px; }
.when { font: 500 12px/1.2 var(--body); color: #485170; white-space: nowrap; } .sheet .small { margin: 0; color: #485170; }
.sheet-foot { margin: 0; font: 500 11.5px/1.5 var(--body); color: #6a7392; border-top: 1.5px solid #0c1226; padding-top: 9px; }

/* league chrome */
.lh { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--line); }
.lh .wrap { display: flex; align-items: center; gap: 10px; min-height: 60px; }
.lh .name { font: 700 23px/1.1 var(--display); min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lh .wk { display: flex; align-items: center; margin-left: auto; flex: none; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px; } .lh .wk .iconbtn { width: 34px; height: 34px; border-radius: 50%; }
.lh .wk b { font: 600 14.5px/1 var(--body); min-width: 68px; text-align: center; white-space: nowrap; }
.lh .me { border: 0; background: none; padding: 0; flex: none; border-radius: 10px; }
.tabs { display: flex; background: var(--paper); border-bottom: 1px solid var(--line); }
.tabs .wrap { display: flex; gap: 0; padding-inline: 0; } .tabs button { flex: 1; border: 0; background: none; padding: 14px 4px 12px; font: 600 15px/1 var(--body); color: var(--ink-2); border-bottom: 2px solid transparent; min-height: 48px; transition: color .12s ease; }
.tabs button:hover { color: var(--ink); } .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.page { padding-block: 20px 110px; display: grid; gap: 18px; }
@media (max-width: 719px) { .tabs { position: fixed; inset: auto 0 0; z-index: 45; border-bottom: 0; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .tabs .wrap { padding: 6px 6px 4px; gap: 2px; } .tabs button { border: 0; border-radius: 8px; padding: 12px 2px; font-size: 14px; min-height: 44px; } .tabs button[aria-selected="true"] { background: var(--brand-soft); color: var(--brand-text); } }
@media (min-width: 720px) { .tabs .wrap { padding-left: var(--gl); padding-right: var(--gr); gap: 6px; } .tabs button { flex: none; padding-inline: 14px; } .page { padding-bottom: 64px; padding-top: 24px; } }
.page > *, .cols > *, .stack > *, .desk > *, .hero > *, .sec > *, .promise > *, .commish > *, .price > * { min-width: 0; }
.cols { display: grid; gap: 18px; align-items: start; } @media (min-width: 980px) { .cols { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; } }

/* the pick sheet */
.game { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px 0; align-items: center; padding: 13px 16px 14px; border-top: 1px solid var(--line); }
.game:first-of-type { border-top: 0; }
.game .meta { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .game .meta .mono { font-size: 12.5px; }
.game .sides { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; min-width: 0; }
/* On a wide screen a full sheet runs in two columns, so the whole week fits on one screen. The hairlines are the gaps. */
.games { display: grid; }
@media (min-width: 1000px) { .games.two { grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); } .games.two .game { background: var(--card); border-top: 0; align-content: start; } .games.two .game.full { grid-column: 1 / -1; } }
/* One side of a game. The team's color is a tab on its left edge (set inline). Picking it runs the highlighter across it. */
.side { position: relative; min-height: 52px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card) linear-gradient(var(--hl), var(--hl)) 0 0 / 0% 100% no-repeat; text-align: center; font: 650 16px/1.15 var(--body); min-width: 0; overflow-wrap: break-word; display: grid; place-items: center; align-content: center; overflow: hidden;
  transition: background-size .18s ease-out, border-color .12s ease, transform .1s ease; }
.sides.three .side { font-size: clamp(13.5px, 3.7vw, 16px); padding-inline: 6px; }
/* A question with four to six answers ("Who wins the tournament?") stacks them two across, then three across when there is room. */
.game .sides.many { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .sides.many .side { min-height: 46px; font-size: 15px; }
@media (min-width: 620px) { .game .sides.many { grid-template-columns: repeat(var(--mid, 3), minmax(0, 1fr)); } }
@media (min-width: 1000px) { .game.full .sides.many { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); } }
@media (max-width: 480px) { .side { font-size: clamp(14.5px, 4.2vw, 16px); padding-inline: 7px; } }
.side small { display: block; font: 600 10.5px/1 var(--body); letter-spacing: .04em; color: var(--ink-3); margin-bottom: 3px; }
.side:hover:not([disabled]) { border-color: var(--ink-3); } .side:active:not([disabled]) { transform: scale(.985); }
.side[aria-pressed="true"] { border-color: color-mix(in srgb, var(--hl) 62%, #6b5600); background-size: 100% 100%; color: var(--hl-ink); font-weight: 750; } .side[aria-pressed="true"] small { color: var(--hl-ink); opacity: .65; }
.side.mark { animation: mark .26s cubic-bezier(.3, .7, .3, 1); } @keyframes mark { from { background-size: 0% 100%; } }
.side[disabled] { cursor: default; color: var(--ink-2); } .side[disabled][aria-pressed="true"] { color: var(--hl-ink); }
/* The side that won, or the right answer, gets a heavy bottom edge. (A team's button carries the same edge next to its color stripe.) */
.side.won { box-shadow: inset 0 -4px 0 var(--ink); color: var(--ink); }
.side.miss { background-size: 0% 100%; color: var(--ink-2); border-color: var(--line); }
.side.miss::after { content: ""; position: absolute; left: 10%; right: 10%; top: 54%; height: 2px; background: var(--red); border-radius: 2px; }
.conf { width: 46px; height: 52px; margin-right: 10px; border: 1px solid var(--field); border-radius: 8px; background: var(--card); font: 700 25.5px/1 var(--num); font-variant-numeric: tabular-nums; display: grid; place-items: center; padding: 0; } .conf[disabled] { border-color: var(--line); color: var(--ink-2); cursor: default; }
.starbtn { width: 44px; height: 52px; margin-left: 6px; border: 0; background: none; color: var(--ink-3); display: grid; place-items: center; padding: 0; border-radius: 8px; transition: color .12s ease, background-color .12s ease; } .starbtn:hover:not([disabled]) { color: var(--ink); background: var(--wash); }
.starbtn[aria-pressed="true"], .starbtn[aria-pressed="true"]:hover:not([disabled]) { background: var(--hl); color: var(--hl-ink); } .starbtn[disabled] { cursor: default; opacity: .75; }
.pts { font: 700 22px/1 var(--num); font-variant-numeric: tabular-nums; min-width: 36px; margin-left: 10px; text-align: right; } .pts.neg { color: var(--red-ink); }
.sheetfoot { border-top: 1px solid var(--line); padding: 14px 16px; display: grid; gap: 12px; }
.tbrow { display: flex; gap: 14px; align-items: center; } .tbrow .input { width: 92px; text-align: center; font: 700 25.5px/1 var(--num); font-variant-numeric: tabular-nums; flex: none; }
.savebar { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 10px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.crowd { display: flex; gap: 3px; height: 6px; grid-column: 1 / -1; margin-top: 2px; } .crowd i { background: var(--brand); border-radius: 3px; } .crowd i:nth-child(2) { background: var(--edge); } .crowd i:nth-child(3) { background: var(--ink-3); }

/* boards */
.brow { display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); } .brow:first-of-type { border-top: 0; }
.brow.me { background: var(--hl-soft); --ink-3: var(--ink-2); } .brow .rk { font: 700 18.5px/1 var(--num); font-variant-numeric: tabular-nums; text-align: center; color: var(--ink-3); } .brow.first .rk { color: var(--brand-text); }
.brow .who { min-width: 0; } .brow .who b { font: 650 16px/1.2 var(--body); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brow .who small { font-size: 13px; color: var(--ink-2); display: block; }
.brow .tot { font: 700 28px/1 var(--num); font-variant-numeric: tabular-nums; text-align: right; } .brow .tot small { display: block; font: 500 11.5px/1.3 var(--body); letter-spacing: 0; color: var(--ink-3); margin-top: 2px; }
.brow button.who { border: 0; background: none; text-align: left; padding: 0; }
.spark { display: flex; gap: 2px; align-items: flex-end; height: 22px; } .spark i { width: 5px; background: var(--field); border-radius: 2px 2px 0 0; min-height: 2px; } .spark i.top { background: var(--brand); }
.move { font: 600 12px/1 var(--body); } .move.up { color: var(--ink); } .move.down { color: var(--red-ink); }
.gridwrap { overflow-x: auto; } table.grid { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 13.5px; }
.grid th, .grid td { border-top: 1px solid var(--line); padding: 7px 8px; text-align: center; white-space: nowrap; }
.grid thead th { font: 600 11.5px/1.3 var(--body); color: var(--ink-2); border-top: 0; vertical-align: bottom; }
.grid th.p { position: sticky; left: 0; background: var(--card); text-align: left; font: 650 14px/1.2 var(--body); z-index: 1; max-width: 132px; overflow: hidden; text-overflow: ellipsis; box-shadow: 1px 0 0 var(--line); padding-left: 16px; }
.grid td b { font: 650 13px/1 var(--body); padding: 3px 5px; display: inline-block; } .grid td.hit b { background: var(--hl); color: var(--hl-ink); border-radius: 6px; } .grid td.miss b { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 1.5px; }
.grid td.hid { color: var(--edge); } .grid tr.me th.p, .grid tr.me td { background: color-mix(in srgb, var(--hl-soft) 70%, var(--card)); }
.awards { display: grid; gap: 0; } .award { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); } .award:first-child { border-top: 0; }
.award .medal { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--hl); color: var(--hl-ink); } .award b { font: 700 16px/1.25 var(--body); display: block; }
.memo { padding: 20px 20px 22px; font: 400 15.5px/1.65 var(--body); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Ask the Commish: a question and an answer, as two speech bubbles */
.qa { display: grid; gap: 10px; padding: 16px; } .qa .q { justify-self: end; background: var(--brand); color: var(--on-brand); padding: 9px 14px; border-radius: 18px 18px 4px 18px; max-width: 85%; } .qa .a { justify-self: start; background: var(--wash); padding: 11px 14px; border-radius: 18px 18px 18px 4px; max-width: 92%; white-space: pre-wrap; }
.card .guide { padding: 16px; display: grid; gap: 12px; } .card .guide .big { font: 700 46.5px/1 var(--num); }
.need { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 10px; } .need b { font: 650 15.5px/1.25 var(--body); }
.empty { padding: 34px 18px; text-align: center; display: grid; gap: 10px; justify-items: center; } .empty h3 { font-size: 22px; }

/* desk */
/* A row on the desk: what it is on the left, what you can do to it on the right. When the two do not fit side by side, the buttons drop to a second line. */
.desk { display: grid; gap: 18px; } .drow { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--line); } .drow:first-of-type { border-top: 0; }
.drow > :first-child { flex: 1 1 200px; min-width: 0; }
.drow .t { font: 650 16px/1.25 var(--body); overflow-wrap: anywhere; } .drow .acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
/* The owner's visitors card: four totals, thirty days as bars, two short lists, and the path from a visit to a sale.
   One blue for every bar, because it is one measure. The words and numbers stay in ink. */
.vis { padding: 16px 18px 18px; display: grid; gap: 20px; }
.vtiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.vt, .vstep { background: var(--wash); border-radius: 8px; padding: 12px 14px; display: grid; gap: 4px; min-width: 0; }
.vt .num, .vstep .num { font-size: 32px; }
.vchart { display: grid; gap: 8px; min-width: 0; } .vread { text-align: right; } @media (max-width: 619px) { .vread { flex: 1 1 100%; text-align: left; } }
.vbars { display: flex; align-items: flex-end; gap: 2px; height: 148px; padding-top: 24px; border-bottom: 1px solid var(--edge); touch-action: pan-y; }
.vb { flex: 1 1 0; min-width: 0; height: 100%; position: relative; display: flex; align-items: flex-end; }
.vb i { display: block; width: 100%; background: var(--brand); border-radius: 4px 4px 0 0; }
.vb.on i, .vb:hover i { background: var(--ink); }
.vb b { position: absolute; left: 50%; transform: translateX(-50%); font: 600 12px/1 var(--body); color: var(--ink-2); white-space: nowrap; pointer-events: none; }
.vb.na::after { content: ""; position: absolute; inset: auto 1px 3px; border-bottom: 2px dotted var(--edge); }
.vaxis { display: flex; justify-content: space-between; gap: 8px; }
.vtable summary { cursor: pointer; font: 600 13.5px/1.3 var(--body); color: var(--brand-text); width: max-content; padding: 4px 0; }
.vtable table.grid { margin-top: 8px; } .vtable td, .vtable th { padding: 6px 12px 6px 0; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line); }
.vtable td:first-child, .vtable th:first-child { text-align: left; } .vtable th { font: 600 13px/1.3 var(--body); color: var(--ink-2); }
.vcols { display: grid; gap: 20px 28px; } @media (min-width: 760px) { .vcols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.vrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; align-items: baseline; padding: 9px 0 8px; border-bottom: 1px solid var(--line); }
.vrow .t { font: 500 15px/1.3 var(--body); overflow-wrap: anywhere; } .vrow .num { font-size: 19px; } .vrow .pill { vertical-align: 1px; }
.vtrack { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--wash); overflow: hidden; } .vtrack i { display: block; height: 100%; background: var(--brand); border-radius: 2px; }
.vfunnel { display: grid; gap: 10px 22px; margin-top: 8px; } .vstep { position: relative; }
@media (min-width: 620px) { .vfunnel { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vfunnel.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vstep + .vstep::before { content: ""; position: absolute; left: -15px; top: 50%; width: 8px; height: 8px; border: solid var(--ink-3); border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(45deg); }
  .vfunnel.four .vstep:nth-child(3)::before { display: none; } }
@media (min-width: 900px) { .vfunnel.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vfunnel.four .vstep:nth-child(3)::before { display: block; } }
.grade { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 100%; } .grade button { border: 1px solid var(--edge); background: var(--card); border-radius: 10px; padding: 6px 12px; min-height: 40px; font: 600 14.5px/1.1 var(--body); }
.grade button:hover { border-color: var(--ink-3); } .grade button[aria-pressed="true"] { background: var(--hl); color: var(--hl-ink); border-color: color-mix(in srgb, var(--hl) 62%, #6b5600); } .grade button.alt { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.grade .sc { width: 58px; min-height: 40px; text-align: center; padding: 4px; border: 1px solid var(--field); border-radius: 10px; background: var(--card); font: 700 19.5px/1 var(--num); font-variant-numeric: tabular-nums; }
.log { max-height: 320px; overflow-y: auto; } .log div { padding: 9px 16px; border-top: 1px solid var(--line); font-size: 14px; } .log div:first-child { border-top: 0; } .log time { font: 500 12.5px/1 var(--body); color: var(--ink-3); margin-right: 8px; }
.linkbox { display: flex; gap: 8px; align-items: stretch; } .linkbox input { flex: 1; min-width: 0; font: 400 13.5px/1 var(--mono); }
.qrbox { background: #fff; padding: 10px; border: 1px solid var(--line); border-radius: 10px; width: max-content; max-width: 100%; } .qrbox svg { display: block; max-width: 100%; height: auto; }
.srcs { display: grid; gap: 4px; font-size: 13.5px; } .srcs a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; color: var(--brand-text); }

/* join: the first screen a player sees. The league's name on the blue field. */
.joinhero { background: #1f57c9; color: #fff; padding-block: 30px 26px; } .joinhero h1 { font-size: clamp(30px, 7.4vw, 46px); } .joinhero .mono { color: rgba(255, 255, 255, .82); } .joinhero p { color: rgba(255, 255, 255, .92); }
.jbuild { display: grid; gap: 18px; padding-block: 26px 64px; max-width: 640px; } .jbuild h2 { font-size: 26px; } .jprev { display: flex; gap: 16px; align-items: center; } .jprev b { font: 700 35px/1.05 var(--display); overflow-wrap: anywhere; }

/* page titles on the sign-in, setup and owner screens */
h1.big { font-size: clamp(28px, 6.4vw, 40px); }

/* layers */
#layer { position: relative; z-index: 100; }
.scrim { position: fixed; inset: 0; background: rgba(8, 12, 30, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: grid; align-items: end; justify-items: center; z-index: 100; }
.dialog { background: var(--card); color: var(--ink); width: 100%; max-width: 560px; max-height: min(92%, 860px); display: flex; flex-direction: column; border-radius: 22px 22px 0 0; overflow: hidden; box-shadow: var(--shadow-3); }
.dialog > .bar { flex: none; align-items: center; padding: 16px 18px 14px; } .dialog > .bar .ttl, .dialog > .bar h2, .dialog > .bar h3 { font-size: 20px; }
.dialog > .body { padding: 18px; overflow-y: auto; display: grid; gap: 14px; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.dialog > .acts { flex: none; display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); flex-wrap: wrap; }
@media (min-width: 720px) { .scrim { align-items: center; } .dialog { border-radius: 12px; } }
.toasts { position: fixed; left: 0; right: 0; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); display: grid; justify-items: center; gap: 8px; z-index: 120; pointer-events: none; padding-inline: 16px; }
.toast { background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 10px; font-weight: 600; font-size: 14.5px; box-shadow: var(--shadow-2); max-width: min(100%, 560px); } .toast.bad { background: var(--danger); color: #fff; }
.demobar { background: var(--hl); color: var(--hl-ink); font-size: 14px; } .demobar .wrap { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; padding-block: 8px; }
.demobar select { min-height: 34px; border: 1px solid rgba(12, 18, 38, .35); border-radius: 9px; background: #fff; color: #0c1226; padding: 2px 8px; font-weight: 600; max-width: 100%; } .demobar b { font: 700 17.5px/1 var(--display); } .demobar a { color: #0c1226; }
.demobar a.btn { color: var(--on-brand); margin-left: auto; min-height: 34px; white-space: nowrap; } .demobar .narrow { display: none; }
@media (max-width: 560px) { .demobar .wide { display: none; } .demobar .narrow { display: inline; } .demobar select { flex: 1; min-width: 0; } }
.spin { width: 24px; height: 24px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.loading { display: grid; place-items: center; gap: 12px; padding: 80px 16px; }

/* the Big Board (TV): always dark, read from across a room */
.tv { background: #070b1c; color: #eef1fb; height: 100%; min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; --ink: #eef1fb; --ink-2: #b0b9d6; --ink-3: #8891b1; --line: #1f2847; --card: #10172f; --edge: #35416c; --paper: #070b1c; --wash: #19223f; --brand-text: #a3b4ff; --hl-soft: #3a3410; --jersey-line: #ffffff; }
.tv header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 1.6vw 2.4vw 1.2vw; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tv h1 { font-size: clamp(30px, 3.8vw, 76px); } .tv .when { color: var(--hl); text-align: right; }
.tv main { display: grid; gap: 2vw; padding: 1.6vw 2.4vw; min-height: 0; grid-template-columns: 1fr; } @media (min-width: 900px) { .tv main { grid-template-columns: 1.15fr 1fr; } }
.tv .col { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: .8vw; } .tv .col h2 { font-size: clamp(20px, 2.1vw, 42px); color: var(--hl); }
.tv .brow { grid-template-columns: clamp(26px, 2.6vw, 56px) clamp(30px, 2.8vw, 56px) minmax(0, 1fr) auto; padding: .5vw .4vw; gap: 1vw; } .tv .brow .rk { font-size: clamp(16px, 1.6vw, 34px); } .tv .brow .who b { font-size: clamp(18px, 1.75vw, 38px); } .tv .brow .tot { font-size: clamp(22px, 2.3vw, 50px); } .tv .brow .who small { font-size: clamp(11px, .95vw, 19px); }
.tv .jersey { width: clamp(30px, 2.8vw, 56px); height: auto; }
.tv .when { font: 700 clamp(18px, 2.2vw, 46px)/1 var(--display); font-variant-numeric: tabular-nums; }
.tv footer { display: flex; gap: 2vw; align-items: center; justify-content: space-between; padding: .8vw 2.4vw calc(.8vw + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); flex-wrap: wrap; } .tv footer .join { font: 700 clamp(18px, 2vw, 40px)/1.1 var(--display); } .tv footer .qrbox { padding: 6px; border-radius: 10px; } .tv footer .qrbox svg { width: clamp(64px, 7vw, 130px); height: auto; }
html.tvmode, html.tvmode body, html.tvmode #app { height: 100%; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: .01ms !important; } }
@media print {
  .top, .lh .wk .iconbtn, .lh .me, .tabs, .demobar, .noprint, #layer, .savebar, .starbtn:not([aria-pressed="true"]) { display: none !important; }
  body { background: #fff; } .lh { position: static; } .page { padding: 12px 0 0; } .card { break-inside: avoid; box-shadow: none; } .side { min-height: 34px; font-size: 15px; } .cols { grid-template-columns: 1fr; }
  /* On the sheet maker page, only the sheet prints. */
  body:has(.printzone) .foot, body:has(.printzone) article.guide > :not(.tool), body:has(.printzone) .tool > :not(.printzone) { display: none !important; }
  body:has(.printzone) article.guide { padding: 0; display: block; } body:has(.printzone) .wrap { padding: 0; max-width: none; }
  .sheet { box-shadow: none; border: 0; padding: 0; border-radius: 0; } .sheet-rows li { break-inside: avoid; } .copybox pre { max-height: none; overflow: visible; } .cta, .related, .crumbs { display: none !important; }
}