/* Fair Shake. Mobile first. Every color is a token: picking a team rewrites the tokens (static/js/theme.js). */
@font-face { font-family: "Archivo"; src: url(/fonts/archivo-latin.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/inter-latin.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #050b08;
  --bg-2: #08120d;
  --surface: #0d1913;
  --surface-2: #13231a;
  --line: #1f3529;
  --text: #ecf6ef;
  --muted: #9bb5a6;
  --faint: #7d988a;
  --accent: #c8f53c;
  --accent-2: #3be0a0;
  --on-accent: #0a1408;
  --glow: rgba(200, 245, 60, .22);
  /* The home page example's glow, toned down for every card and panel. Follows the team colors through --glow. */
  --lift: 0 14px 36px rgba(0, 0, 0, .4), 0 0 42px color-mix(in srgb, var(--glow) 70%, transparent);
  --head-from: #ffffff;
  --head-to: #dff7c2;
  --good: #3be0a0; --okay: #f5c542; --bad: #ff6b6b;
  --qb: #ff5c8a; --rb: #2dd4bf; --wr: #60a5fa; --te: #fb923c; --k: #a78bfa; --def: #94a3b8; --pick: #e879f9;
  --dl: #f87171; --lb: #facc15; --db: #4ade80;
  --radius: 18px; --radius-sm: 12px;
  --display: "Archivo", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --header-h: 60px; --tabbar-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 12px); }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden;
  background-image: radial-gradient(1200px 600px at 80% -10%, var(--glow), transparent 60%), radial-gradient(900px 500px at -10% 10%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 60%);
  background-repeat: no-repeat;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 10px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.wrap.narrow { max-width: 820px; }
main { display: block; padding-bottom: calc(var(--tabbar-h) + 24px); }
@media (min-width: 860px) { main { padding-bottom: 48px; } .wrap { padding: 0 28px; } }

/* Type */
h1, h2, h3, .display { font-family: var(--display); font-weight: 800; line-height: .95; letter-spacing: -.01em; margin: 0 0 .4em; }
.display, h1.display, h2.display {
  text-transform: uppercase; font-stretch: 62%; font-variation-settings: "wdth" 62;
  background: linear-gradient(180deg, var(--head-from), var(--head-to)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px var(--glow));
}
h1 { font-size: clamp(2.6rem, 9vw, 5.4rem); }
h2 { font-size: clamp(2rem, 6vw, 3.4rem); }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.prose h2, .card h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
.overline { font: 700 .78rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }
p { margin: 0 0 1em; }

/* Header */
/* viewport-fit=cover (for the tab bar's home-indicator room) lets the page draw under the browser's top bar and the
   status bar on iPhone; the header pads down by the safe area so the logo and buttons stay clear (2026-11-08). */
.site-header { position: sticky; top: 0; z-index: 40; height: calc(var(--header-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 10px; }
.donate { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text); font: 700 .85rem/1 var(--body); text-decoration: none; white-space: nowrap; }
.donate svg { width: 16px; height: 16px; color: var(--accent); }
.donate:hover { background: var(--accent); color: var(--on-accent); }
.donate:hover svg { color: var(--on-accent); }
/* Top-donor line under the tip button (2026-10-19, as on Droid Tycoon): hidden until site.js has a real donor, so most
   visitors see the header as before. width:0 + min-width:100% means it adds nothing to the button's width; the text
   runs to the right, under the logo, never off the left edge of the screen. */
.tip-box { display: flex; flex-direction: column; align-items: flex-start; flex: none; }
.tipnote { display: flex; justify-content: flex-start; width: 0; min-width: 100%; margin: 3px 0 0; font: 600 11px/1.2 var(--body); color: var(--muted); white-space: nowrap; transition: opacity .3s; }
.tipnote[hidden] { display: none; }
.tipnote.out { opacity: 0; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font: 800 1.35rem/1 var(--display); font-stretch: 62%; font-variation-settings: "wdth" 62; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.logo-mark { width: 28px; height: 28px; flex: none; }
/* Desktop menu: a raised pill bar; the current tool takes the accent and its glow. */
.site-nav { display: none; margin-left: auto; gap: 2px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--surface-2) 75%, transparent); box-shadow: 0 8px 26px rgba(0, 0, 0, .35); }
.site-nav a { color: var(--muted); text-decoration: none; font-weight: 650; font-size: .92rem; padding: 7px 14px; border-radius: 999px; white-space: nowrap; transition: background .12s, color .12s; }
.site-nav a:hover { color: var(--text); background: var(--surface); }
.site-nav a[aria-current="page"] { color: var(--on-accent); background: var(--accent); box-shadow: 0 4px 18px var(--glow); }
.header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 40px; height: 40px; border-radius: 999px; display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; padding: 0; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { border-color: var(--accent); }
.team-dot { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--accent) 0 50%, var(--accent-2) 0); border: 2px solid var(--surface-2); }
@media (max-width: 859px) {
  .site-header .logo { position: absolute; left: 50%; transform: translateX(-50%); }
  .site-header .wrap { position: relative; }
  .logo-word { font-size: 1.25rem; }
}
/* "Buy Me a Coffee" needs about 500px beside the centered logo, so phones say "Donate" and the narrowest show the cup
   alone, with the full label kept for screen readers. Below 360px the logo also ran into the team-colors button. */
.donate .label-short { display: none; }
@media (max-width: 499px) { .donate .label { display: none; } .donate .label-short { display: inline; } .donate { padding: 0 10px; } }
@media (max-width: 359px) {
  .donate .label-short { display: none; }
  .donate .label { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-header .logo-word { font-size: 1.15rem; }
  .site-header .header-actions { gap: 6px; }
  .site-header .icon-btn { width: 36px; height: 36px; }
}
/* Where the menu first appears, the logo and menu links wrapped onto two lines up to 877px; the menu tightens instead. */
@media (min-width: 860px) and (max-width: 959px) { .site-nav { gap: 0; padding: 3px; } .site-nav a { padding: 7px 9px; font-size: .88rem; } }
@media (min-width: 860px) {
  .site-nav { display: flex; }
  .header-actions { margin-left: 8px; }
  .menu-btn { display: none; }
}

/* Phone menu (a dialog): the brand on top, the four tools as cards, then the reading pages as buttons. */
.menu-dialog .sheet-head h2 .logo { font-size: 1.4rem; }
.menu-label { font: 700 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 18px 0 10px; }
.menu-sheet .menu-label:first-child { margin-top: 6px; }
.menu-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-tool { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 14px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--surface-2)), var(--bg-2)); color: var(--text); text-decoration: none; font: 800 1.2rem/1 var(--display); font-stretch: 62%; font-variation-settings: "wdth" 62; text-transform: uppercase; letter-spacing: .01em; box-shadow: var(--lift); transition: transform .12s ease, box-shadow .12s ease; }
.menu-tool:hover { transform: translateY(-2px); color: var(--text); box-shadow: 0 16px 36px rgba(0, 0, 0, .5), 0 0 34px var(--glow); }
.menu-tool[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--accent), 0 0 34px var(--glow); }
.menu-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.menu-icon svg { width: 22px; height: 22px; }
.menu-more { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: var(--text); text-decoration: none; font-weight: 650; font-size: .95rem; }
.menu-link::after { content: "›"; font-size: 1.2rem; line-height: 1; color: var(--accent); }
.menu-link:hover, .menu-link[aria-current="page"] { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--text); }

/* Bottom tab bar: phones only, app-style */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4, 1fr); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--faint); text-decoration: none; font: 600 .7rem/1 var(--body); }
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] { color: var(--accent); }
.tabbar a[aria-current="page"] svg { box-sizing: content-box; padding: 3px 16px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: 0 0 18px var(--glow); }
@media (min-width: 860px) { .tabbar { display: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 700 1rem/1 var(--body); text-decoration: none; cursor: pointer; transition: transform .12s ease, background .12s ease, border-color .12s; }
.btn:hover { border-color: var(--accent); color: var(--text); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 8px 30px var(--glow); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); color: var(--on-accent); }
.btn-ghost { background: transparent; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: .875rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn svg { width: 18px; height: 18px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Sections */
.section { padding: 56px 0; }
.section-alt { background: linear-gradient(180deg, transparent, var(--bg-2) 18%, var(--bg-2) 82%, transparent); }
@media (min-width: 860px) { .section { padding: 88px 0; } }
.hero { padding: 40px 0 24px; }
.hero h1 { max-width: 12ch; }
.hero .lede { margin: 18px 0 26px; }
.hero-grid { display: grid; gap: 36px; align-items: center; }
/* Grid children may shrink below their longest line; without this a long name pushes the page sideways. */
.hero-grid > *, .grid-2 > *, .grid-3 > *, .sides > *, .grades > * { min-width: 0; }
@media (min-width: 960px) { .hero { padding: 72px 0 40px; } .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; color: var(--muted); font-size: .9rem; }
.trust span { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { width: 16px; height: 16px; color: var(--accent); }

.grid-3 { display: grid; gap: 14px; }
@media (min-width: 760px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.grid-2 { display: grid; gap: 14px; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.step-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font: 800 1.05rem/1 var(--display); margin-bottom: 14px; }

/* Cards */
.card { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--lift); }
.card + .card { margin-top: 14px; }
.grid-3 > .card + .card, .grid-2 > .card + .card { margin-top: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head h2, .card-head h3 { margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font: 600 .78rem/1.3 var(--body); color: var(--muted); }
.pill.accent { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.dev-strip { background: #ffcc00; color: #111; font: 700 .75rem/1.3 var(--body); text-align: center; padding: 6px 16px; }

/* Positions, players */
.pos { display: inline-grid; place-items: center; min-width: 38px; height: 24px; padding: 0 6px; border-radius: 6px; font: 800 .72rem/1 var(--body); letter-spacing: .04em; color: #0b0f0d; background: var(--def); }
.pos.QB { background: var(--qb); } .pos.RB { background: var(--rb); } .pos.WR { background: var(--wr); } .pos.TE { background: var(--te); }
.pos.K { background: var(--k); } .pos.DEF { background: var(--def); } .pos.PICK { background: var(--pick); }
.pos.DL { background: var(--dl); } .pos.LB { background: var(--lb); } .pos.DB { background: var(--db); } .pos.FLEX { background: linear-gradient(90deg, var(--rb), var(--wr), var(--te)); } .pos.SFLEX { background: linear-gradient(90deg, var(--qb), var(--rb), var(--wr)); }
.player { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); min-height: 52px; }
.player:last-child { border-bottom: 0; }
.player .who, .suggest .who { flex: 1; min-width: 0; }
.player .name, .suggest .name { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; color: var(--text); text-decoration: none; }
.player a.name:hover { color: var(--accent); }
.player .meta, .suggest .meta { font-size: .8rem; color: var(--faint); }
.player .val { font: 700 .95rem/1 var(--body); font-variant-numeric: tabular-nums; color: var(--muted); }
.inj { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; font: 800 .66rem/1.5 var(--body); letter-spacing: .04em; color: #fff; background: #b45309; vertical-align: 1px; }
/* A tag with details (site.js): a bigger invisible tap area than the tag itself, and the box it opens. */
.inj[data-tip] { position: relative; cursor: help; }
.inj[data-tip]::after { content: ""; position: absolute; inset: -9px -5px; }
.inj[data-tip]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inj-pop { position: fixed; z-index: 200; max-width: min(280px, calc(100vw - 16px)); padding: 8px 11px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); color: var(--text); font: 650 .82rem/1.35 var(--body); white-space: normal; text-transform: none; letter-spacing: 0; }
.inj-pop div:first-child { font-weight: 750; }
.inj-pop div + div { margin-top: 2px; color: var(--muted); font-weight: 600; }
.inj.Out, .inj.IR, .inj.PUP, .inj.Sus, .inj.DNR { background: #b91c1c; }
.inj.Questionable { background: #a16207; }
.remove { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--faint); cursor: pointer; display: grid; place-items: center; flex: none; }
.remove:hover { color: var(--bad); border-color: var(--bad); }
.remove svg { width: 16px; height: 16px; }
.lock { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--faint); cursor: pointer; display: grid; place-items: center; flex: none; }
.lock[aria-pressed="true"] { color: var(--on-accent); background: var(--okay); border-color: var(--okay); }
.lock svg { width: 16px; height: 16px; }

/* Search */
.search { position: relative; }
.search input { width: 100%; height: 52px; padding: 0 16px 0 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); font-size: 16px; }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
.search > svg { position: absolute; left: 15px; top: 16px; width: 20px; height: 20px; color: var(--faint); pointer-events: none; }
.suggest { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 20px 50px rgba(0,0,0,.55); max-height: min(60vh, 420px); max-height: min(60dvh, 420px); overflow: auto; overscroll-behavior: contain; }
.suggest[hidden] { display: none; }
.suggest [role="option"] { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; }
.suggest [role="option"][aria-selected="true"], .suggest [role="option"]:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.suggest mark { background: none; color: var(--accent); font-weight: 800; }
.suggest .empty { padding: 12px; color: var(--faint); font-size: .9rem; }

/* Forms */
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-weight: 650; font-size: .9rem; margin-bottom: 6px; }
.input, select.input { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); font-size: 16px; }
.input:focus { outline: none; border-color: var(--accent); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); font-weight: 650; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Quiz */
.quiz-progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 4px 0 22px; }
.quiz-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .25s ease; }
.quiz-q { font: 800 clamp(1.6rem, 6vw, 2.2rem)/1 var(--display); font-stretch: 62%; font-variation-settings: "wdth" 62; text-transform: uppercase; margin: 0 0 8px; }
.quiz-help { color: var(--muted); font-size: .92rem; margin-bottom: 18px; }
.choices { display: grid; gap: 10px; }
.choices.cols-2 { grid-template-columns: 1fr 1fr; }
.choices.cols-3 { grid-template-columns: repeat(3, 1fr); }
.choice { text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; min-height: 56px; }
.choice strong { display: block; font-size: 1rem; }
.choice small { display: block; color: var(--faint); margin-top: 2px; font-size: .82rem; }
.choice:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.choice[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); box-shadow: inset 0 0 0 1px var(--accent); }
.choices.cols-3 .choice, .choices.cols-2 .choice.center { text-align: center; }
.stepper { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.stepper .ctrl { display: flex; align-items: center; gap: 12px; }
.stepper button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; font-size: 1.2rem; line-height: 1; }
.stepper output { min-width: 22px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.quiz-nav { display: flex; gap: 10px; margin-top: 22px; }
.quiz-nav .btn { flex: 1; }
.review-list { display: grid; gap: 2px; }
.review-list button { display: flex; justify-content: space-between; gap: 10px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 12px 2px; cursor: pointer; }
.review-list button span:last-child { color: var(--accent); font-weight: 650; text-align: right; }
.quiz-alt { margin-top: 18px; }
.league-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.league-head .overline { margin: 0; }
/* A league's teams, on the import and shared-link screens */
.team-list { list-style: none; margin: 6px 0 12px; padding: 0; }
.team-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: .92rem; }
.team-list li span:last-child { color: var(--muted); white-space: nowrap; }
.team-list li.mine span:first-child { color: var(--accent); font-weight: 700; }
/* Keeper round picker in the roster editor */
.keep-round { flex: none; height: 32px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font-size: .8rem; }

/* Dialogs: bottom sheet on phones, centered card on desktop */
/* 92dvh, not 92vh: on iPhone vh is the height with the browser bars hidden, so with the address bar at the top the
   sheet's title and close button sat under it (2026-11-08). The safe-area cap keeps it below the status bar too. */
dialog.sheet { width: 100%; max-width: 560px; max-height: 92vh; max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top) - 12px)); margin: auto auto 0; padding: 0; border: 1px solid var(--line); border-radius: 22px 22px 0 0; background: var(--surface); color: var(--text); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 70px var(--glow); }
dialog.sheet::backdrop { background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px); }
dialog.sheet[open] { display: flex; flex-direction: column; animation: up .22s ease; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 6px 20px; }
.sheet-head h2 { font-size: 1.15rem; margin: 0; font-family: var(--body); font-weight: 750; letter-spacing: 0; }
.sheet-body { padding: 8px 20px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
@media (min-width: 640px) { dialog.sheet { margin: auto; border-radius: 22px; } }
@keyframes up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none; } * { transition: none !important; } }

/* Team picker: no border (the two-color fill used to repeat into it and draw a line on two edges); the tiles sit
   above the sheet on a shadow instead. */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 2px; }
@media (min-width: 520px) { .team-grid { grid-template-columns: repeat(6, 1fr); } }
.team-swatch { aspect-ratio: 1; border-radius: 16px; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; font: 800 .82rem/1 var(--body); letter-spacing: .03em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); box-shadow: 0 10px 22px rgba(0, 0, 0, .55), 0 2px 5px rgba(0, 0, 0, .4); transition: transform .12s ease, box-shadow .12s ease; }
.team-swatch:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0, 0, 0, .6), 0 0 22px var(--glow); }
.team-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent), 0 12px 26px rgba(0, 0, 0, .55); }
.team-group { font: 700 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 22px 0 12px; }

/* Tool layout */
.tool-head { padding: 28px 0 8px; }
/* Room for the tool before its script draws it, so the questions below do not jump when it loads. */
#app { min-height: 85vh; }
.tool-head h1 { font-size: clamp(2.3rem, 8vw, 4rem); max-width: none; }
.step-card { margin-top: 16px; }
.step-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 750 1.05rem/1.2 var(--body); }
.step-title .n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font: 800 .85rem/1 var(--body); }
.preset-list { display: grid; gap: 10px; }
.preset { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; text-align: left; width: 100%; }
.preset[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--bg-2)); }
.preset .grow { flex: 1; min-width: 0; }
.preset strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset small { color: var(--faint); font-size: .8rem; }
.preset .check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: grid; place-items: center; }
.preset[aria-pressed="true"] .check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.preset .check svg { width: 14px; height: 14px; }
.empty-state { text-align: center; padding: 26px 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; }
.roster-group h4 { margin: 14px 0 2px; font: 700 .75rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
details.options summary { cursor: pointer; font-weight: 700; padding: 6px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
details.options summary::-webkit-details-marker { display: none; }
details.options summary::before { content: "+"; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); }
details.options[open] summary::before { content: "–"; }
.opt-row { margin-top: 14px; }
.opt-row > span { display: block; font-size: .85rem; font-weight: 650; color: var(--muted); margin-bottom: 8px; }
.sticky-cta { position: sticky; bottom: calc(var(--tabbar-h) + 10px); z-index: 20; margin-top: 18px; }
@media (min-width: 860px) { .sticky-cta { bottom: 16px; } }
.progress-line { height: 4px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 12px 0; }
.progress-line span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

/* Results */
.partner { margin-top: 26px; }
.partner-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 10px; }
.partner-head h3 { margin: 0; font-size: 1.3rem; }
/* A trade card lays itself out by its own width (container queries), so it works full width and inside the home page mockup. */
.trade { container-type: inline-size; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; box-shadow: var(--lift); }
/* The trade that helps you most: marked, outlined in the accent, and glowing like the home page example. */
.trade.best { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 64px var(--glow); }
.best-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 800 .72rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 6px 22px var(--glow); }
.best-badge svg { width: 14px; height: 14px; }
.trade-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 10px; margin-bottom: 10px; }
.trade-top .pill { white-space: nowrap; }
.tv { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; margin-left: auto; }
.tv-label { font: 700 .62rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
/* Market totals, and under them the points totals (copy review 4): label beside pill, lined up on the right. */
.tvs { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; }
.tvs .tv { margin-left: 0; }
.tvs.two .tv { flex-direction: row; align-items: center; gap: 8px; }
.verdict { font: 750 .95rem/1.2 var(--body); }
.sides { display: grid; gap: 10px; }
@container (min-width: 560px) { .sides { grid-template-columns: 1fr auto 1fr; align-items: start; } }
.side { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 6px 12px; }
.side-label { font: 700 .72rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 8px 0 2px; }
.swap { display: grid; place-items: center; width: 34px; height: 34px; margin: auto; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--accent); }
.swap svg { width: 18px; height: 18px; }
.swap { margin: -4px auto; position: relative; z-index: 1; }
@container (min-width: 560px) { .swap { margin: auto; } .swap svg { transform: rotate(-90deg); } }
.grades { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.grade-box { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.grade-box .grade { grid-row: 1 / 3; }
.grade-box .sub { grid-column: 2; }
.grade { width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center; font: 900 1.55rem/1 var(--display); font-stretch: 75%; font-variation-settings: "wdth" 75; color: #07110b; }
.grade.a { background: var(--good); } .grade.b { background: #a3e635; } .grade.c { background: var(--okay); } .grade.d, .grade.f { background: var(--bad); color: #fff; }
.grade-box .who { font: 700 .78rem/1.2 var(--body); color: var(--muted); }
.grade-box .num { font: 700 .82rem/1.35 var(--body); color: var(--faint); }
.grade-box .sub { font: 600 .78rem/1.35 var(--body); color: var(--faint); }
@container (max-width: 420px) {
  .grade { width: 44px; height: 44px; font-size: 1.3rem; border-radius: 12px; } .grade-box { column-gap: 10px; padding: 10px; }
  /* Narrow boxes: "Team Improvement" runs under the grade, across the whole box, instead of breaking word by word. */
  .grade-box .grade { grid-row: 1; } .grade-box .sub { grid-column: 1 / -1; margin-top: 8px; }
  /* The value label and totals get their own line under the verdict, read left to right. */
  .tv { flex-basis: 100%; flex-direction: row; align-items: center; gap: 8px; margin-left: 0; }
  .tvs { flex-basis: 100%; align-items: stretch; margin-left: 0; }
  .tvs .tv { flex-basis: auto; }
}
.meter { margin-top: 12px; }
.meter-bar { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--bad), var(--okay) 30%, var(--good) 50%, var(--okay) 70%, var(--bad)); opacity: .9; }
.meter-bar i { position: absolute; top: -4px; width: 4px; height: 18px; border-radius: 3px; background: var(--text); box-shadow: 0 0 0 3px var(--bg); transform: translateX(-2px); }
.meter-legend { display: flex; justify-content: space-between; font-size: .75rem; color: var(--faint); margin-top: 6px; }
.why { margin: 12px 0 0; padding: 0; list-style: none; font-size: .9rem; color: var(--muted); }
.why li { padding-left: 18px; position: relative; margin: 4px 0; }
.why li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.trade-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.no-trade { border: 1px solid color-mix(in srgb, var(--bad) 50%, var(--line)); background: color-mix(in srgb, var(--bad) 7%, var(--surface)); border-radius: var(--radius); padding: 18px; }
.no-trade h4 { margin: 0 0 6px; font-size: 1.05rem; }
.summary-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.summary-table td { padding: 10px 6px; border-bottom: 1px solid var(--line); }
.summary-table td:last-child { text-align: right; }

/* Values table */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--lift); }
table.values { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.values th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font: 700 .72rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 12px 10px; white-space: nowrap; }
table.values td { padding: 10px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); white-space: nowrap; }
table.values td.num, table.values th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.values a { color: var(--text); text-decoration: none; font-weight: 650; }
table.values a:hover { color: var(--accent); }
.trend-up { color: var(--good); } .trend-down { color: var(--bad); }
@media (max-width: 600px) { table.values .hide-sm { display: none; } }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin: 18px 0; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-weight: 650; font-size: .9rem; background: var(--surface); }
.tabs a[aria-current="page"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Player page */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: var(--lift); }
.stat b { display: block; font: 800 1.6rem/1.1 var(--display); font-stretch: 75%; font-variation-settings: "wdth" 75; }
.stat span { font-size: .8rem; color: var(--faint); }
.answer { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; margin: 0 0 24px; font-size: 1.08rem; }

/* Prose */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.8em; font-family: var(--display); }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .35em 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 1em 0 1.5em; font-size: .92rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.prose th { background: var(--surface-2); }
.prose code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
.breadcrumbs { font-size: .85rem; color: var(--faint); margin: 18px 0 0; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.updated { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); }
.updated::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 25%, transparent); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; font-weight: 700; font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.5rem; color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 16px; color: var(--muted); }

/* Phone mockup on the home page */
.mock { position: relative; width: 100%; max-width: 380px; margin: 0 auto; border-radius: 34px; padding: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 30%, var(--surface-2)), var(--surface)); box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 80px var(--glow); }
.mock-screen { border-radius: 24px; background: var(--bg); padding: 16px 14px; border: 1px solid var(--line); }
.mock .trade { margin: 0; }
@media (min-width: 600px) { .mock .trade { box-shadow: none; } }   /* the frame glows instead */
/* On a phone the page already is the phone: drop the frame and give the card the full width. */
@media (max-width: 599px) { .mock { padding: 0; background: none; box-shadow: none; border-radius: 0; max-width: none; } .mock-screen { padding: 0; border: 0; background: none; } }

/* Injury news list */
.news li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.news { list-style: none; margin: 0; padding: 0; }
.news a { color: var(--text); text-decoration: none; font-weight: 650; }
.news a:hover { color: var(--accent); }

/* Ads: reserved, off until site.config.json turns them on */
.ad-slot { display: none; }
.ads-on .ad-slot { display: block; min-height: 100px; margin: 24px 0; border: 1px dashed var(--line); border-radius: 12px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 calc(var(--tabbar-h) + 40px); color: var(--muted); font-size: .9rem; background: var(--bg-2); }
@media (min-width: 860px) { .site-footer { padding-bottom: 40px; } }
.footer-grid { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-grid h2 { font: 700 .75rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 0 0 12px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin: 8px 0; }
.footer-grid a { color: var(--muted); text-decoration: none; }
.footer-grid a:hover { color: var(--accent); }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 860px) { .footer-brand { grid-column: auto; } }
.fine { margin-top: 28px; font-size: .78rem; color: var(--faint); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 18px); transform: translateX(-50%); z-index: 60; background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: .9rem; box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: calc(100% - 32px); }
@media (min-width: 860px) { .toast { bottom: 24px; } }

/* Screenshot import */
.ocr-drop { display: grid; place-items: center; text-align: center; gap: 6px; padding: 22px; border: 2px dashed var(--line); border-radius: 16px; color: var(--muted); cursor: pointer; }
.ocr-drop:hover, .ocr-drop.over { border-color: var(--accent); color: var(--text); }
.ocr-drop svg { width: 28px; height: 28px; color: var(--accent); }
.reassure { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font: 650 .9rem/1.3 var(--body); color: var(--text); }
.reassure svg { width: 16px; height: 16px; color: var(--accent); }
/* Roster editor: the note after a screenshot import, and Done kept in reach at the foot of the sheet on a phone */
.saved-note { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--good) 45%, var(--line)); background: color-mix(in srgb, var(--good) 10%, transparent); }
.saved-note p { margin: 0; font-size: .9rem; }
.saved-note p + p { margin-top: 6px; }
.roster-done { position: sticky; bottom: -24px; margin: 18px -20px -24px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); z-index: 2; }
.player .conf { flex: none; margin-left: 6px; }
/* Trade Finder: players every trade must include */
.pin-list { display: grid; gap: 2px; margin-top: 10px; }
.ocr-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ocr-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.ocr-row .who { flex: 1; min-width: 0; }
.ocr-row .raw { font-size: .75rem; color: var(--faint); }
.conf { font: 700 .7rem/1 var(--body); padding: 3px 6px; border-radius: 6px; }
.conf.hi { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--good); }
.conf.lo { background: color-mix(in srgb, var(--okay) 22%, transparent); color: var(--okay); }