/* The add-a-league and join-a-league screens (docs/self-serve-plan.md 4.2-4.5): /add/ and /<slug>/join.
   Phone-first, one column; light by default like the homepage, dark when the homepage switch says so.
   Midnight look like the app (2026-10-30): Oswald titles and buttons, Barlow text, a midnight top bar with a lime line,
   orange for "do this", plain bold words instead of pills and spaced capitals. */
:root {
  --bg: #F2F4F8; --surface: #FFFFFF; --raised: #F3F5F9; --hover: #E9ECF3; --line: #D7DCE6; --line2: #C9D0DC;
  --text: #0B1124; --muted: #4D5568; --faint: #6B7387;
  --head: #0A1124; --lime: #4D7C0F; --lime-hi: #A3E635; --hi: #FF6A13; --hi-ink: #0A1124; --hi-hover: #FF7D33;
  --coral: #C2410C; --on-coral: #FFFFFF; --coral-hi: #A8380A; --done: #0F7A43; --good: #0F7A43;
  --tag-bg: transparent; --tag-ink: #0F7A43; --warm: #FFF1E8; --warm-line: #F5C8AA; --acc: #4D7C0F; --err: #C0261A;
  --display: 'Oswald', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: var(--sans);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #060A14; --surface: #0E1424; --raised: #151C30; --hover: #1C2540; --line: #222B44; --line2: #2E3854;
  --text: #EEF1F8; --muted: #9AA3BC; --faint: #858EA8;
  --head: #050914; --lime: #A3E635;
  --coral: #E85A0A; --on-coral: #0A1124; --coral-hi: #FF6A13; --done: #4ADE80; --good: #4ADE80;
  --tag-ink: #4ADE80; --warm: #241812; --warm-line: #5A3420; --acc: #A3E635; --err: #FF5A4E; color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 16px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
a { color: var(--lime); font-weight: 600; }
a:hover { color: var(--text); }
[hidden] { display: none !important; }
.app { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.stripe { height: 3px; background: var(--acc); flex: none; }

/* Top bar: a solid midnight bar across the whole window (the shadows paint past the 480px column without making the
   page scroll sideways) with a lime line under it: back, where you are, the brand mark; then the progress bars. */
.top { flex: none; padding: 8px 12px 3px; position: sticky; top: 0; z-index: 2; background: var(--head); color: #fff; box-shadow: 0 0 0 100vmax var(--head); clip-path: inset(0 -100vmax); }
.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lime-hi); box-shadow: 0 0 0 100vmax var(--lime-hi); clip-path: inset(0 -100vmax); }
.top .row { display: flex; align-items: center; gap: 8px; height: 44px; margin-bottom: 5px; }
.back { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: #fff; flex: none; }
.back:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.back:focus-visible, .mark:focus-visible { outline: 2px solid var(--lime-hi); outline-offset: 1px; }
.back[disabled] { visibility: hidden; }
.where { font: 600 18px/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark { margin-left: auto; width: 32px; height: 32px; flex: none; display: block; }
.mark svg { width: 32px; height: 32px; display: block; }
/* The logo reads as one piece on the midnight bar: orange square, midnight U and football */
.mark svg rect, .brand svg rect { fill: var(--hi); }
.mark svg > path, .brand svg > path { stroke: var(--head); }
.mark svg g path:first-child, .brand svg g path:first-child { fill: var(--head); }
.mark svg g path:last-child, .brand svg g path:last-child { stroke: var(--hi); }
.bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px 8px 12px; }
.bars div { display: flex; flex-direction: column; gap: 6px; }
.bars i { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .20); }
.bars span { font: 700 13px/1.15 var(--sans); color: rgba(255, 255, 255, .66); }
.bars .on i { background: var(--hi); }
.bars .on span { color: #fff; }
.bars .past i { background: var(--lime-hi); }
.bars .past span { color: rgba(255, 255, 255, .82); }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand svg { width: 32px; height: 32px; flex: none; }
.brand span { font: 600 19px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.brand b { color: var(--lime); font-weight: 600; }

/* A screen */
.scr { padding: 22px 20px 32px; display: flex; flex-direction: column; gap: 14px; }
.eb { font: 700 15px/1.3 var(--sans); letter-spacing: 0 !important; text-transform: none; color: var(--lime); margin: 0; }
.h1 { font: 600 40px/1.02 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 0; overflow-wrap: anywhere; }
.h2 { font: 600 30px/1.08 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 0; overflow-wrap: anywhere; }
.h1::after, .h2::after { content: ''; display: block; width: 56px; height: 5px; margin-top: 10px; border-radius: 2px; background: var(--lime-hi); }
.h2[style]::after { display: none; } /* the signed-in email, set in plain text */
.p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.p b, .p strong { color: var(--text); }
.small { font-size: 14px; }
.tiny { font-size: 13px; }
.center { text-align: center; }
.lbl { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.inp { width: 100%; font: inherit; font-size: 17px; min-height: 48px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line2); background: var(--surface); color: var(--text); }
.inp::placeholder { color: var(--faint); }
.inp:focus { outline: 2px solid var(--lime); outline-offset: 1px; border-color: var(--lime); }
.inp.pin { font: 600 30px/1 var(--display); letter-spacing: .4em; text-align: center; padding: 12px 10px 12px 20px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; width: 100%; font: 600 17px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; border-radius: 10px; border: 0; background: var(--hi); color: var(--hi-ink); cursor: pointer; text-decoration: none; padding: 0 16px; text-align: center; }
.btn:hover { background: var(--hi-hover); color: var(--hi-ink); }
.btn:focus-visible, .btn2:focus-visible, .opt:focus-visible, .lg:focus-visible, .tm:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn[disabled]:hover { background: var(--hi); }
.btn2 { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; width: 100%; font: 600 16px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; border-radius: 10px; border: 0; background: transparent; color: var(--lime); box-shadow: inset 0 0 0 1.5px var(--lime); cursor: pointer; text-decoration: none; text-align: center; padding: 0 12px; }
.btn2:hover { background: color-mix(in srgb, var(--lime) 8%, transparent); color: var(--lime); }
:root[data-theme="dark"] .btn2 { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line2); }
:root[data-theme="dark"] .btn2:hover { background: var(--hover); color: var(--text); }
.btn svg, .btn2 svg { flex: none; }
.link { background: none; border: 0; padding: 6px 0; font: 700 14.5px/1.3 var(--sans); color: var(--lime); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.why { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.45; }
.why b { color: var(--text); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: 0 1px 2px rgba(11, 17, 36, .05); }
.card.warm { background: var(--warm); border-color: var(--warm-line); }
.tag { display: inline-block; align-self: flex-start; font: 700 15px/1.2 var(--sans); padding: 0; border-radius: 0; background: var(--tag-bg); color: var(--tag-ink); }
.mono { font-family: var(--sans); font-weight: 600; }
.msg { min-height: 1.2em; margin: 0; font-size: 14.5px; font-weight: 600; color: var(--err); }
.msg:empty { display: none; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Platform choices */
.opt { display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer; font: inherit; color: var(--text); min-height: 76px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; width: 100%; box-shadow: 0 1px 2px rgba(11, 17, 36, .05); }
.opt:hover { background: var(--hover); }
.opt.off { background: var(--raised); cursor: default; box-shadow: none; }
.opt.off:hover { background: var(--raised); }
.opt img { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.opt.off img { opacity: .55; }
.opt .tx { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.opt .tx b { font: 600 20px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.opt.off .tx b { color: var(--muted); }
.opt .tx span { color: var(--muted); font-size: 14px; }
.chev { flex: none; color: var(--lime); }
.opt.off .chev { color: var(--faint); }

/* Numbered how-to steps and their picture (private ESPN leagues) */
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.steps b { color: var(--text); }
.steps li::marker { font: 600 15px var(--display); color: var(--text); }
.shot { margin: 0; }
.shot svg { display: block; }

/* Two-way switch (Sleeper tabs, iPhone/Android) */
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.seg button { min-height: 40px; border: 0; border-radius: 8px; font: 600 15px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; background: transparent; color: var(--muted); }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--head); color: #fff; box-shadow: none; }
:root[data-theme="dark"] .seg button[aria-pressed="true"] { background: var(--text); color: #0A1124; }

/* League cards (search results) */
.lg { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; text-decoration: none; font-weight: 400; }
.lg:hover { border-color: var(--hi); color: inherit; }
.lg .av { width: 40px; height: 40px; border-radius: 50%; background: var(--head); color: var(--lime-hi); display: grid; place-items: center; font: 600 18px/1 var(--display); flex: none; overflow: hidden; }
.lg .av img { width: 100%; height: 100%; object-fit: cover; }
.lg .tx { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.lg .tx b { font-size: 16.5px; overflow-wrap: anywhere; color: var(--text); }
.lg .tx span { color: var(--muted); font-size: 14px; }
.lg .go { font: 600 16px/1 var(--display); letter-spacing: .03em; color: var(--coral); flex: none; }
.lg.join .go { color: var(--lime); }
.lg.dim { cursor: default; opacity: .75; }
.lg.dim:hover { border-color: var(--line); }

/* Team list */
.teams { display: flex; flex-direction: column; gap: 8px; }
.tm { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: 12px; text-align: left; cursor: pointer; font: inherit; color: var(--text); border: 1.5px solid var(--line); background: var(--surface); width: 100%; }
.tm:hover { border-color: var(--line2); }
.tm .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm .tx b { font-size: 16px; overflow-wrap: anywhere; }
.tm .tx span { font-size: 13.5px; color: var(--muted); }
.tm .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1.5px solid var(--line2); }
.tm .dot svg { visibility: hidden; stroke: var(--hi-ink); }
.tm[aria-pressed="true"] { border-color: var(--hi); background: var(--warm); }
.tm[aria-pressed="true"] .dot { background: var(--hi); border-color: var(--hi); }
.tm[aria-pressed="true"] .dot svg { visibility: visible; }
.tm.taken { background: var(--raised); color: var(--muted); }
.tm.taken[aria-pressed="true"] { background: var(--warm); color: var(--text); }

/* Build checklist */
.checks { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; }
.ck { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 15px; color: var(--muted); }
.ck i { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 2px solid var(--line2); background: var(--surface); }
.ck i svg { visibility: hidden; }
.ck.done { color: var(--text); font-weight: 600; }
.ck.done i { background: var(--done); border-color: var(--done); }
:root[data-theme="dark"] .ck.done i svg { stroke: #0A1124; }
.ck.done i svg { visibility: visible; }
.ck.busy { color: var(--text); }
.ck.busy i { border-color: var(--hi); border-top-color: transparent; animation: spin 1s linear infinite; }
/* The extras that arrive after the league opens: no spinner, so nothing looks stuck */
.later { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.later > b { font: 600 17px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.later > p { margin: 2px 0 6px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.ck.wait i { border-style: dashed; }
.ck .soon { margin-left: auto; font: 700 13.5px/1 var(--sans); color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ck.busy i { animation: none; } }

/* Codes and links to copy */
.copyrow { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; }
.copyrow .v { flex: 1; min-width: 0; font: 600 14px/1.4 var(--sans); overflow-wrap: anywhere; }
.copyrow button { flex: none; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--head); color: #fff; font: 600 15px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
:root[data-theme="dark"] .copyrow button { background: var(--text); color: #0A1124; }
.code-big { font: 700 24px/1.25 var(--sans); letter-spacing: .01em; overflow-wrap: anywhere; color: var(--text); }
.stepn { width: 28px; height: 28px; border-radius: 50%; background: #0A1124; color: var(--lime-hi); display: grid; place-items: center; font: 600 15px/1 var(--display); flex: none; }
:root[data-theme="dark"] .stepn { background: var(--hover); }
.hs { display: flex; gap: 12px; align-items: center; }
.hs .tx { flex: 1; font-size: 15.5px; }
.hs .ic { width: 44px; height: 44px; border-radius: 10px; background: var(--raised); display: grid; place-items: center; flex: none; }
.voice { display: flex; gap: 12px; align-items: flex-start; }
.voice .v { font: 800 12.5px/1 var(--sans); padding: 5px 7px; border-radius: 6px; flex: none; }
.voice span:last-child { font-size: 14.5px; color: var(--muted); }
.meter { height: 6px; border-radius: 4px; background: var(--hover); overflow: hidden; }
.meter i { display: block; height: 6px; background: var(--acc); }
.foot { margin-top: auto; padding: 18px 20px 28px; color: var(--muted); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px 16px; border-top: 1px solid var(--line); }
.foot a { color: var(--muted); font-weight: 500; }
.foot a:hover { color: var(--text); }
/* The one paste box's two codes (2026-11-04): bold words, a tick once each is found. */
.codes { display: flex; gap: 16px; margin-top: 8px; font: 700 14px/1.3 var(--sans); color: var(--faint, var(--muted)); }
.codes span::before { content: '○ '; }
.codes span.got { color: var(--done); }
.codes span.got::before { content: '✓ '; }