/* East Coast Offense — site stylesheet.
   Design from Mark's mockup (D:\EastCoastOffense\East Coast Offense Coaching System.png):
   deep navy, red accent, blue for routes and icons, condensed display type, dark
   panels with thin rules. Dark only, by design. Diagram classes are the
   playbook's own, recoloured to this palette. */
:root {
  --bg: #0B1424; --bg-2: #0E1A2E; --surface: #121E33; --panel: #16243B; --board: #0F1B2E;
  --ink: #F2F5F9; --muted: #9AA7BA; --dim: #6B7A91; --rule: #223049; --rule-2: #2C3C58;
  --accent: #E11D2E; --accent-2: #FF4D5A; --sea: #4F8CFF; --ok: #3DD68C; --on-accent: #FFFFFF;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 90px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--body); margin: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
a { color: var(--sea); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
p { margin: 0; }
img, svg { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { width: 24px; height: 24px; }

/* ── Header + nav ── */
.top { position: sticky; top: 0; z-index: 20; background: rgba(11, 20, 36, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand .mark { flex: none; }
.wordmark { font: 800 17px/.92 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.wordmark em { font-style: normal; color: var(--accent-2); }
.nav { display: flex; align-items: center; gap: 22px; }
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav > ul > li { position: relative; }
.nav > ul > li > a { display: block; padding: 10px 12px; font: 600 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--muted); border-radius: 4px; }
.nav > ul > li > a:hover, .nav > ul > li > a[aria-current="page"] { color: var(--ink); }
.nav > ul > li > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
.has-menu > a::after { content: " ▾"; font-size: 11px; }
.menu { position: absolute; top: 100%; left: 0; min-width: 220px; list-style: none; margin: 0; padding: 8px; background: var(--surface); border: 1px solid var(--rule-2); border-radius: 6px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); display: none; }
.has-menu:hover .menu, .has-menu:focus-within .menu { display: block; }
.menu a { display: block; padding: 9px 12px; border-radius: 4px; color: var(--ink); text-decoration: none; font-size: 14.5px; }
.menu a:hover { background: var(--panel); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; background: transparent; color: var(--ink); border: 1px solid var(--rule-2); border-radius: 4px; font-size: 18px; padding: 6px 10px; cursor: pointer; }
@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px clamp(16px, 4vw, 40px) 20px; background: var(--bg-2); border-bottom: 1px solid var(--rule); }
  .nav.open { display: flex; }
  .nav > ul { flex-direction: column; }
  .menu { position: static; display: block; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 12px; }
  .has-menu > a::after { content: ""; }
  .top-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* ── Buttons, chips ── */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--body); padding: 12px 18px; border-radius: 4px; border: 1px solid var(--rule-2); background: var(--panel); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.ghost { background: transparent; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.accent:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.sm { padding: 8px 12px; font-size: 13px; font-weight: 600; }
.btn.lg { padding: 15px 24px; font-size: 15px; }
.chip { display: inline-block; font: 500 11.5px/1 var(--mono); letter-spacing: .04em; padding: 5px 8px; border: 1px solid var(--rule-2); border-radius: 3px; color: var(--muted); white-space: nowrap; }
.chip.ok { color: var(--ok); border-color: var(--ok); }
.chip.run { color: var(--accent-2); border-color: var(--accent-2); }
.chip.pass { color: var(--sea); border-color: var(--sea); }
.chip.fill { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }
.flag { font: 500 11.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 6px 8px; border-radius: 3px; }
.flash { margin: 18px auto 0; padding: 12px 16px; border-left: 3px solid var(--ok); background: var(--surface); font-size: 15px; }
.flash.err { border-left-color: var(--accent); }

/* ── Type ── */
.eyebrow { font: 600 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.eyebrow.quiet { color: var(--muted); }
h1 { font: 800 clamp(44px, 7.5vw, 86px)/.9 var(--display); letter-spacing: -.005em; text-transform: uppercase; margin: 12px 0 0; text-wrap: balance; }
h1 span, h2 span { color: var(--accent-2); }
h2 { font: 800 clamp(30px, 4.2vw, 44px)/.95 var(--display); text-transform: uppercase; letter-spacing: .005em; margin: 0 0 8px; text-wrap: balance; }
.h3, h3 { font: 700 22px/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.h4, h4 { font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.tagline { font: 600 clamp(22px, 3vw, 30px)/1.15 var(--display); letter-spacing: .01em; margin-top: 18px; }
.lead { margin-top: 16px; max-width: 58ch; font-size: 17.5px; color: var(--ink); }
.kicker { color: var(--muted); max-width: 66ch; margin-top: 14px; font-size: 16.5px; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
section.band { padding-block: clamp(36px, 5vw, 64px); }
section.band + section.band { border-top: 1px solid var(--rule); }
.band-head { display: grid; gap: 10px 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; margin-bottom: 26px; }
.band-head .kicker { margin: 0; justify-self: start; }
.band-head .more { font: 600 14px/1 var(--body); color: var(--sea); text-decoration: none; justify-self: end; white-space: nowrap; }
.prose { max-width: 66ch; display: grid; gap: 14px; }
.cols { display: grid; gap: 22px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); margin-top: 26px; }
.cols.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.cols > div { min-width: 0; display: grid; gap: 8px; align-content: start; }
.cols p, .small { font-size: 15px; }
.aside { margin-top: 28px; padding: 16px 18px; background: var(--surface); border-left: 3px solid var(--sea); max-width: 76ch; font-size: 15px; display: grid; gap: 8px; border-radius: 0 6px 6px 0; }
.aside strong { font-weight: 600; color: var(--ink); }
blockquote.pull { margin: 34px 0 10px; padding: 26px 28px 22px 30px; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 8px 8px 0; }
blockquote.pull p { margin: 0 0 12px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; color: var(--ink); }
blockquote.pull cite { display: block; margin-top: 6px; font: 600 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-style: normal; }
.note-card { margin-top: 28px; padding: 20px 22px; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--surface); display: grid; gap: 10px; }
.url { display: block; font: 400 11.5px/1.4 var(--mono); color: var(--dim); overflow-wrap: anywhere; }

/* ── Page hero (section pages) ── */
.page-hero { position: relative; padding-block: clamp(36px, 6vw, 70px) clamp(22px, 4vw, 40px); border-bottom: 1px solid var(--rule); background: linear-gradient(90deg, rgba(11, 20, 36, .94) 0%, rgba(11, 20, 36, .8) 50%, rgba(11, 20, 36, .5) 100%), url(/images/photos/stadium-chalk.jpg) center 28% / cover no-repeat var(--bg-2); }
.page-hero .wrap { position: relative; }
.page-hero h1, .page-hero .eyebrow, .page-hero .kicker { text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }

/* ── Home hero: the coach render sits at the left, the copy takes the empty right half ── */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); background: linear-gradient(90deg, rgba(11, 20, 36, .1) 0%, rgba(11, 20, 36, .35) 42%, rgba(11, 20, 36, .88) 58%, rgba(11, 20, 36, .94) 100%), url(/images/photos/coach-huddle.jpg) left center / cover no-repeat var(--bg-2); }
.hero .wrap { position: relative; display: grid; gap: 28px 48px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; padding-block: clamp(44px, 7vw, 84px); min-height: 580px; }
.hero-copy { position: relative; grid-column: 2; }
.hero-copy h1, .hero-copy .eyebrow, .hero-copy .lead { text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.hero-mobile-photo { display: none; }
.stats { position: relative; z-index: 1; list-style: none; margin: 28px 0 0; padding: 6px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; background: rgba(18, 30, 51, .85); border: 1px solid var(--rule-2); border-radius: 8px; backdrop-filter: blur(6px); width: 100%; }
.stats li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 16px 14px; background: var(--bg-2); border-radius: 5px; }
.stats .icon { grid-row: 1 / span 2; color: var(--sea); }
.stats b { font: 800 32px/1 var(--display); font-variant-numeric: tabular-nums; }
.stats span { font: 600 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ── Idea cards ── */
.ideas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.idea-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 18px; padding: 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
.idea-card .ico { grid-row: 1 / span 2; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 8px; background: var(--panel); color: var(--sea); }
.idea-card .ico .icon { width: 28px; height: 28px; }
.idea-card .h3 { font-size: 20px; }
.idea-card p { font-size: 14.5px; color: var(--muted); }

/* ── Evidence ── */
.ev { display: grid; margin-top: 26px; }
.ev > div { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 8px 36px; padding-block: 16px; border-top: 1px solid var(--rule); }
.ev > div:first-child { border-top: 2px solid var(--rule-2); }
.ev dt { font-weight: 600; }
.ev dd { margin: 0; font-size: 15px; }
.ev .src { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); font-weight: 400; }
.ev .does::before { content: "The offense: "; font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); }

/* ── Tables ── */
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--rule-2); white-space: nowrap; }
tbody th { font-weight: 600; }
td.num, th.num { text-align: right; padding-right: 0; padding-left: 12px; font-family: var(--mono); white-space: nowrap; }
.unit { text-transform: none; letter-spacing: 0; opacity: .8; }
.zero { color: var(--rule-2); }

/* ── Roles ── */
.roles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin: 26px 0 34px; }
.role { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 18px; display: grid; gap: 8px; align-content: start; }
.role header { display: flex; align-items: center; gap: 12px; }
.role-dot { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--sea); color: var(--sea); font: 700 15px/1 var(--body); flex: none; }
.role p { font-size: 14.5px; }
.role .test { color: var(--muted); font-size: 13.5px; }
.fitw { font-size: 13.5px; margin-top: 10px; }
.fitw .role-dot { width: 22px; height: 22px; font-size: 11px; border-width: 1.5px; margin-right: 8px; vertical-align: middle; }

/* ── Diagrams ── */
.board { overflow-x: auto; border-radius: 6px; border: 1px solid var(--rule); }
.board svg { display: block; width: 100%; min-width: 540px; height: auto; }
.board.thumb svg { min-width: 0; }
.f-bg { fill: var(--board); }
.f-line { stroke: var(--rule-2); stroke-width: 1; }
.f-hash { stroke: var(--dim); stroke-width: 1; opacity: .7; }
.f-los { stroke: var(--muted); stroke-width: 1.6; }
.f-num, .tag { paint-order: stroke; stroke: var(--board); stroke-width: 4px; stroke-linejoin: round; }
.f-num { fill: var(--dim); font: 400 10px var(--mono); }
.o-node { fill: var(--surface); stroke: var(--ink); stroke-width: 1.6; }
.o-text { fill: var(--ink); font: 600 11.5px var(--body); }
.d-node { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.p { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.p-block { stroke: var(--ink); stroke-width: 1.8; }
.p-fake { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 4; }
.p-qb { stroke: var(--ink); stroke-width: 1.6; }
.p-route { stroke: var(--sea); stroke-width: 2.4; }
.p-ball { stroke: var(--accent-2); stroke-width: 3.4; }
.p-qbrun { stroke: var(--accent-2); stroke-width: 2.8; stroke-dasharray: 8 4; }
.p-motion { stroke: var(--ink); stroke-width: 1.8; stroke-dasharray: 1 5; }
.h-fake, .h-qb { fill: var(--ink); } .h-route { fill: var(--sea); } .h-ball, .h-qbrun { fill: var(--accent-2); }
.snap { fill: var(--board); stroke: var(--ink); stroke-width: 1.4; }
.tag { fill: var(--sea); font: 500 10.5px var(--mono); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 7px; }
.legend svg { width: 34px; height: 12px; flex: none; }
.bar-top { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin: 24px 0 16px; }
.flipper { display: flex; align-items: center; gap: 10px; font: 500 12.5px var(--mono); color: var(--muted); }

/* ── Formations ── */
.form-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px 30px; align-items: center; padding-block: 18px; border-top: 1px solid var(--rule); }
.form-text { display: grid; gap: 8px; }
.form-text p { font-size: 15px; }
.form-text .how { color: var(--muted); font-size: 14px; }
.legal { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Blocking words, install steps ── */
.words { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: 26px; }
.word { padding: 20px; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--accent); border-radius: 8px; display: grid; gap: 8px; align-content: start; }
.word p { font-size: 15px; }
.steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; }
.steps li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 6px 22px; padding-block: 14px; border-top: 1px solid var(--rule); }
.steps b { font: 800 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--accent-2); }
.steps span { font-size: 15px; }
.sources { margin: 0; padding-left: 18px; display: grid; gap: 9px; font-size: 14.5px; }
.sources li { overflow-wrap: anywhere; }

/* ── Plays ── */
.group-title { display: flex; align-items: baseline; gap: 14px; margin: 34px 0 12px; }
.group-title span { font: 500 12.5px var(--mono); color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.play-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.play-grid.wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.play-card { display: grid; gap: 10px; align-content: start; padding: 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.play-card:hover { border-color: var(--sea); transform: translateY(-2px); }
.play-card .board { border-radius: 4px; aspect-ratio: 16 / 10; overflow: hidden; display: grid; place-items: center; background: var(--board); }
.play-card .board svg { width: 100%; height: 100%; }
.play-card .name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.play-card .h3 { font-size: 20px; }
.play-card .idea { font-size: 13.5px; color: var(--muted); }
.play-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 10px; }
.play-head .type { font: 600 19px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.play-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.idea { font-size: 17px; font-weight: 500; max-width: 70ch; margin-top: 14px; }
.play-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px 36px; margin-top: 22px; align-items: start; }
.jobs { margin: 0; display: grid; gap: 10px; }
.jobs dt { font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.jobs dd { margin: 1px 0 0; font-size: 14.5px; }
.note { font-size: 14px; padding-left: 12px; border-left: 3px solid var(--accent); }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 14.5px; }
.pager a { text-decoration: none; color: var(--ink); }
.pager small { display: block; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ── Feature bands (home) ── */
.feature { display: grid; gap: 28px 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.feature .photo { aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, var(--panel), var(--bg-2)); border: 1px solid var(--rule); display: grid; place-items: center; }
.feature .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; display: block; }
.feature .photo .board { border: 0; width: 100%; }
.checks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.checks .icon { flex: none; color: var(--accent-2); width: 20px; height: 20px; margin-top: 2px; }
.cta-band { position: relative; padding-block: clamp(40px, 6vw, 72px); background: linear-gradient(180deg, rgba(11, 20, 36, .72), rgba(11, 20, 36, .86)), url(/images/photos/players-ball.jpg) center / cover no-repeat var(--bg-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center; }
.cta-band h2, .cta-band .eyebrow, .cta-band .kicker { text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.cta-band .kicker { margin: 10px auto 0; }
.tool-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: 30px; text-align: left; }
.tool-card { display: grid; gap: 10px; padding: 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; align-content: start; }
.tool-card .ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: var(--accent); color: #fff; }
.tool-card .h3 { font-size: 20px; }
.tool-card p { font-size: 14.5px; color: var(--muted); }
.tool-card .btn { justify-self: start; margin-top: 4px; }

/* ── Tide Table ── */
.matrix { border-collapse: separate; border-spacing: 2px; font: 400 12.5px/1 var(--mono); }
.matrix th, .matrix td { border: 0; padding: 7px 3px; text-align: center; vertical-align: middle; }
.matrix tbody th { text-align: left; font: 600 13.5px/1.2 var(--body); padding-right: 10px; white-space: nowrap; }
.matrix td.num { text-align: center; min-width: 38px; border-radius: 2px; background: var(--surface); }
.matrix td.split { color: var(--muted); background: transparent; }
.matrix thead th { text-align: center; }
.matrix th.v { height: 84px; vertical-align: bottom; padding-bottom: 6px; }
.matrix th.v span { display: inline-block; writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg); white-space: nowrap; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.matrix th.v.run span { color: var(--accent-2); } .matrix th.v.pass span { color: var(--sea); }
.matrix .groups th { padding: 0 0 5px; border-bottom: 2px solid var(--rule-2); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.matrix .groups th:first-child { border-bottom: 0; }
.matrix .groups .run { border-bottom-color: var(--accent-2); color: var(--accent-2); }
.matrix .groups .pass { border-bottom-color: var(--sea); color: var(--sea); }
.sits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px 24px; margin-top: 20px; }
.sit { border: 1px solid var(--rule); border-radius: 8px; padding: 16px 18px 10px; background: var(--surface); }
.sit header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sit .h3 { font-size: 22px; }
.sit .why { font-size: 13.5px; color: var(--muted); margin: 6px 0 8px; }
.menu-table { font-size: 13px; }
.menu-table th, .menu-table td { padding: 4px 8px 4px 0; vertical-align: middle; }
.menu-table td.bar { width: 34%; min-width: 80px; }
.menu-table tbody tr:last-child th, .menu-table tbody tr:last-child td { border-bottom: 0; }
.track { display: block; height: 7px; background: var(--board); border-radius: 2px; }
.fill { display: block; height: 7px; border-radius: 2px; max-width: 100%; }
.fill.run { background: var(--accent-2); } .fill.pass { background: var(--sea); }
.range { color: var(--muted); }
ol.house { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; }
.rollsteps { padding-left: 20px; margin: 10px 0 0; display: grid; gap: 6px; font-size: 15px; max-width: 80ch; }
.mix { font-size: 13px; margin-top: 10px; }
.mix .gap { padding-left: 22px; }
.mix .groups th { text-align: center; border-bottom: 1px solid var(--rule); font-weight: 500; }
.mix .groups th:first-child { border-bottom: 0; }
.mix .sub { display: block; font: 400 11.5px/1.3 var(--body); color: var(--muted); }

/* ── FAQ ── */
.faq { padding-block: clamp(36px, 5vw, 64px); border-top: 1px solid var(--rule); }
.faq-grid { display: grid; gap: 0 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); margin-top: 18px; }
.faq details { border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); margin-bottom: 10px; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 16px; font-weight: 600; font-size: 15.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 22px/1 var(--mono); color: var(--accent-2); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 16px 16px; font-size: 15px; color: var(--muted); }
.faq .a a { color: var(--sea); }

/* ── Forms (accounts) ── */
.form-page { max-width: 480px; margin: 0 auto; padding-block: clamp(28px, 5vw, 60px); }
.form-page h1 { font-size: clamp(36px, 6vw, 56px); }
.form-page .lead { font-size: 16px; color: var(--muted); }
form.card, div.card { display: grid; gap: 16px; margin-top: 24px; padding: 24px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; align-content: start; }
label.check { display: flex; gap: 10px; align-items: center; text-transform: none; letter-spacing: 0; font: 400 14.5px/1.4 var(--body); color: var(--ink); }
label.check input { width: auto; }

/* ── Coach tools (phase 2) ── */
.counts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; }
.counts li { padding: 12px 10px; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 5px; }
.counts b { display: block; font: 800 30px/1 var(--display); }
.counts span { font: 600 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.roster-list th, .roster-list td { vertical-align: middle; }
.roster-list td .btn { margin: 2px 0; }
table.grid th, table.grid td { padding: 4px 3px; }
table.grid th { font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
table.grid th .unit { color: var(--dim); text-transform: none; letter-spacing: 0; }
table.grid input { padding: 8px 8px; font-size: 14.5px; min-width: 64px; }
table.grid input[type=text] { min-width: 56px; }
table.grid td.center { text-align: center; }
table.grid input[type=checkbox] { width: 18px; height: 18px; }
table.fit td.pick { background: rgba(225, 29, 46, .22); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent-2); }
.starters { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.starters li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 10px; background: var(--bg-2); border-radius: 5px; }
.st-name { font: 700 15px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.st-num { font-size: 14px; color: var(--muted); }
.st-fit { font: 700 15px/1 var(--mono); color: var(--accent-2); }
.dials { display: grid; gap: 12px; }
.dials label { grid-template-columns: 70px 36px minmax(0, 1fr); align-items: center; }
.dials output { font: 700 16px/1 var(--mono); color: var(--ink); }
.dials input[type=range] { width: 100%; padding: 0; background: transparent; border: 0; accent-color: var(--accent); }
.live-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.rolled { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; background: var(--board); border: 1px solid var(--rule-2); border-radius: 6px; }
.roll-num { font: 800 56px/1 var(--mono); color: var(--accent-2); letter-spacing: -.03em; }
.rolled .call { font: 700 24px/1.1 var(--display); text-transform: uppercase; }
.menu-table input.w { width: 64px; padding: 5px 6px; font: 500 13px var(--mono); text-align: right; }
.menu-table tr.off th { color: var(--dim); }
.strip { display: grid; gap: 4px; margin: 12px 0 6px; padding-top: 10px; border-top: 1px dashed var(--rule-2); font: 400 12.5px/1.4 var(--mono); }
.strip span { display: flex; gap: 10px; align-items: baseline; color: var(--muted); }
.strip span b { font-weight: 700; color: var(--ink); min-width: 22px; }
.strip span.run b { color: var(--accent-2); } .strip span.pass b { color: var(--sea); }
.snap-grid { display: grid; grid-template-columns: 64px 70px 70px minmax(150px, 1.2fr) minmax(150px, 1.2fr) minmax(110px, 1fr) 90px 80px; gap: 10px; }
.snap-grid label, .snap-flags label { gap: 4px; }
.snap-grid input, .snap-grid select, .snap-flags input[type=text] { padding: 9px 10px; font-size: 15px; }
.snap-flags { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: end; }
.snap-flags .btn { margin-left: auto; }
table.snaps td, table.snaps th, table.games td, table.games th, table.chart-table td, table.chart-table th { vertical-align: middle; padding-left: 8px; padding-right: 8px; }
table.snaps td:first-child, table.snaps th:first-child, table.games td:first-child, table.games th:first-child, table.chart-table td:first-child, table.chart-table th:first-child { padding-left: 0; }
table.chart-table th[scope=row] { font-weight: 500; }
table.games th[scope=row] { white-space: nowrap; }
@media (max-width: 900px) { .snap-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } }
table.log td, table.log th { vertical-align: middle; }
table.log select { width: auto; padding: 5px 8px; font-size: 13px; }
form.inline { display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 640px) { .live-form, .starters li { grid-template-columns: minmax(0, 1fr); } .dials label { grid-template-columns: 70px 36px minmax(0, 1fr); } }
label { display: grid; gap: 6px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
input, select, textarea { font: 400 16px/1.3 var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--rule-2); border-radius: 4px; padding: 11px 12px; width: 100%; }
.err { padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--panel); font-size: 14.5px; }
.ok { padding: 10px 14px; border-left: 3px solid var(--ok); background: var(--panel); font-size: 14.5px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.inline-form { display: inline; }

/* ── Footer ── */
footer.site { margin-top: 0; padding-block: 40px 28px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 14px; background: var(--bg-2); }
footer.site .grid { display: grid; gap: 24px 40px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--ink); }
footer.site .h4 { margin-bottom: 12px; color: var(--ink); }
footer.site .slogan { font: 700 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
footer.site .slogan em { font-style: normal; color: var(--accent-2); display: block; }
footer.site .bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--dim); }

@media (max-width: 900px) {
  .hero { background: var(--bg-2); }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 0; }
  .hero-copy { grid-column: 1; }
  .hero-mobile-photo { display: block; margin: 0 calc(50% - 50vw) 28px; position: relative; }
  .hero-mobile-photo img { display: block; width: 100%; height: auto; }
  .hero-mobile-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--bg-2) 100%); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-head { grid-template-columns: minmax(0, 1fr); }
  .band-head .more { justify-self: start; }
  .feature { grid-template-columns: minmax(0, 1fr); }
  footer.site .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .form-row, .play-body, .ev > div { grid-template-columns: minmax(0, 1fr); }
  .play-meta { margin-left: 0; }
  .steps li { grid-template-columns: minmax(0, 1fr); }
  footer.site .grid { grid-template-columns: 1fr; }
}