/* ─────────────────────────────────────────────────────────────
   NHGCA · Site Styles · v1.0
   Hi-fi production styles built on tokens.css (Fairway direction)
   ───────────────────────────────────────────────────────────── */

@import url("./tokens.css");

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

html {
  font-family: var(--nhgca-font-body);
  font-size: var(--nhgca-size-body);
  line-height: var(--nhgca-lh-normal);
  color: var(--nhgca-ink);
  background: var(--nhgca-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; display: flex; flex-direction: column; }
::selection { background: var(--nhgca-primary); color: #fff; }

a { color: var(--nhgca-primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }

/* ─── LAYOUT PRIMITIVES ─────────────────────────────────── */
.container { max-width: var(--nhgca-content-max); margin: 0 auto; padding: 0 var(--nhgca-gutter); }
.container--wide { max-width: 1440px; }
main { flex: 1; }

.eyebrow {
  font-family: var(--nhgca-font-mono); font-size: var(--nhgca-size-eyebrow);
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--nhgca-ink-3);
}
.eyebrow--ink { color: var(--nhgca-ink); }

.display-xl, .display-l, .display-m, .h1, .h2, .h3 { margin: 0; }
.display-xl { font-family: var(--nhgca-font-display); font-weight: 700; font-size: var(--nhgca-size-display-xl); line-height: 0.92; letter-spacing: 0.005em; text-transform: uppercase; }
.display-l  { font-family: var(--nhgca-font-display); font-weight: 600; font-size: var(--nhgca-size-display-l);  line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }
.display-m  { font-family: var(--nhgca-font-body);    font-weight: 400; font-size: var(--nhgca-size-display-m); font-style: italic; line-height: 1.1; }
.h1 { font-family: var(--nhgca-font-display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: 0.005em; text-transform: uppercase; }
.h2 { font-family: var(--nhgca-font-display); font-weight: 600; font-size: 32px; line-height: 1.05; letter-spacing: 0.005em; text-transform: uppercase; }
.h3 { font-family: var(--nhgca-font-body);    font-weight: 700; font-size: var(--nhgca-size-h2); line-height: 1.2; }
.h4 { font-family: var(--nhgca-font-body);    font-weight: 600; font-size: var(--nhgca-size-h3); line-height: 1.3; margin: 0; }
.lead { font-size: 18px; line-height: 1.55; color: var(--nhgca-ink-2); }
.muted { color: var(--nhgca-ink-3); }
.mono  { font-family: var(--nhgca-font-mono); }
.tabular { font-variant-numeric: tabular-nums; }

.section-rule { border: 0; border-top: 1px solid var(--nhgca-ink); margin: 0; }

.eyebrow-row {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 8px; margin-bottom: 18px;
  border-bottom: 1px solid var(--nhgca-ink);
}
.eyebrow-row .eyebrow { color: var(--nhgca-ink); }
.eyebrow-row .num { font-family: var(--nhgca-font-mono); font-size: 11px; color: var(--nhgca-ink-3); }

/* ─── BUTTONS (override + extend from tokens.css) ───────── */
.btn { display:inline-flex; align-items:center; gap: 8px; height: 40px; padding: 0 18px;
  font-family: var(--nhgca-font-body); font-weight: 600; font-size: 13px; letter-spacing: .03em;
  background: var(--nhgca-primary); color: #fff;
  border: 1px solid var(--nhgca-primary); border-radius: var(--nhgca-radius-2);
  cursor: pointer; text-decoration: none; transition: background var(--nhgca-dur-micro) var(--nhgca-ease-standard), color var(--nhgca-dur-micro) var(--nhgca-ease-standard); white-space: nowrap;
}
.btn:hover { background: var(--nhgca-primary-hover); border-color: var(--nhgca-primary-hover); color:#fff; text-decoration: none; }
.btn--lg { height: 50px; padding: 0 24px; font-size: 14px; }
.btn--sm { height: 32px; padding: 0 12px; font-size: 12px; }
.btn--secondary { background: transparent; color: var(--nhgca-ink); border-color: var(--nhgca-ink); }
.btn--secondary:hover { background: var(--nhgca-ink); color: var(--nhgca-paper); }
.btn--accent { background: var(--nhgca-accent); border-color: var(--nhgca-accent); color: #1a1f1c; }
.btn--accent:hover { background: #a17a35; border-color: #a17a35; color:#1a1f1c; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--nhgca-ink); }
.btn--ghost:hover { background: var(--nhgca-paper-2); color: var(--nhgca-ink); }
.btn--danger { background: transparent; border-color: var(--nhgca-danger); color: var(--nhgca-danger); }
.btn--danger:hover { background: var(--nhgca-danger); color:#fff; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }

/* Pills + chips: use .pill from tokens — extend for icons */
.pill { display:inline-flex; align-items:center; gap: 6px;
  font-family: var(--nhgca-font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--nhgca-radius-full);
  background: var(--nhgca-paper-2); color: var(--nhgca-ink);
  border: 1px solid var(--nhgca-ink-4);
}
.pill--primary { background: var(--nhgca-primary-soft); color: var(--nhgca-primary); border-color: var(--nhgca-primary); }
.pill--accent  { background: var(--nhgca-accent-soft); color:#6A4F1F; border-color: var(--nhgca-accent); }
.pill--danger  { background: #F5D8D2; color: var(--nhgca-danger); border-color: var(--nhgca-danger); }
.pill--warn    { background: #F5E2C4; color: var(--nhgca-warn); border-color: var(--nhgca-warn); }
.pill--dark    { background: var(--nhgca-ink); color: var(--nhgca-paper); border-color: var(--nhgca-ink); }

.lock-glyph { width:10px; height:12px; display:inline-block; position:relative; }
.lock-glyph::before { content:''; position:absolute; top:0; left:1px; width:8px; height:6px; border:1.5px solid currentColor; border-bottom:none; border-radius: 4px 4px 0 0; }
.lock-glyph::after { content:''; position:absolute; bottom:0; left:0; width:10px; height:7px; background: currentColor; border-radius:1px; }

/* ─── HEADER ────────────────────────────────────────────── */
.site-header { background: var(--nhgca-paper); border-bottom: 1px solid var(--nhgca-ink); position: sticky; top: 0; z-index: 50; }
.site-header__bar { display:flex; align-items:center; gap: 24px; padding: 14px 0; max-width: var(--nhgca-content-max); margin: 0 auto; padding-left: var(--nhgca-gutter); padding-right: var(--nhgca-gutter); }
.brand { display:flex; align-items:center; gap: 12px; text-decoration:none; color: var(--nhgca-ink); }
.brand:hover { text-decoration:none; }
.brand__mark { width: 38px; height: 38px; border-radius: 50%; background: var(--nhgca-primary); position: relative; flex: none; }
.brand__mark::before { content:''; position:absolute; inset:6px; border-radius:50%; border: 1.5px solid var(--nhgca-accent); }
.brand__mark::after  { content:''; position:absolute; inset:14px; border-radius:50%; background: var(--nhgca-accent); }
.brand__text { display:flex; flex-direction:column; line-height: 1; }
.brand__name { font-family: var(--nhgca-font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.02em; text-transform: uppercase; }
.brand__sub  { font-family: var(--nhgca-font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.16em; color: var(--nhgca-ink-3); text-transform: uppercase; margin-top: 4px; }

.nav { display:flex; align-items:center; gap: 4px; margin-left: auto; }
.nav > a, .nav__dropdown-trigger {
  font-family: var(--nhgca-font-body); font-weight: 500; font-size: 14px;
  color: var(--nhgca-ink-2); padding: 8px 10px; border-bottom: 2px solid transparent;
  text-decoration: none; transition: color var(--nhgca-dur-micro), border-color var(--nhgca-dur-micro);
  display:inline-flex; align-items:center; gap: 6px;
}
.nav > a:hover, .nav__dropdown-trigger:hover { color: var(--nhgca-ink); text-decoration: none; }
.nav > a.is-active, .nav__dropdown-trigger.is-active { color: var(--nhgca-ink); font-weight: 700; border-bottom-color: var(--nhgca-primary); }
.nav .ext { font-family: var(--nhgca-font-mono); font-size: 11px; }

/* "Members" dropdown — collapses the four gated pages (Rules,
   All-State / POY, Cert., Directory) under one parent so the top bar
   stays short. site.js wires click / click-outside / Escape; CSS
   handles the hover-intent fallback so mouse users get the menu
   without an extra click. */
.nav__dropdown { position: relative; display: inline-flex; }
/* Invisible bridge filling the 8px gap between the trigger and the
   menu. Without it a mouse moving from the trigger down to the menu
   passes through dead space, loses :hover on .nav__dropdown, and
   the menu disappears mid-traversal. The ::after lives inside
   .nav__dropdown, so hovering it keeps :hover alive. */
.nav__dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}
.nav__dropdown-trigger {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; line-height: 1;
}
.nav__dropdown-caret { font-size: 10px; color: var(--nhgca-ink-3); transition: transform var(--nhgca-dur-micro); }
.nav__dropdown[data-open="true"] .nav__dropdown-caret { transform: rotate(180deg); }

.nav__dropdown-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px; padding: 8px; margin: 0;
  background: var(--nhgca-surface);
  border: 1px solid var(--nhgca-ink-4);
  border-radius: var(--nhgca-radius-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex; flex-direction: column; gap: 2px;
  z-index: 100;
}
.nav__dropdown-menu[hidden] { display: none; }
.nav__dropdown-menu a {
  padding: 8px 12px; border-radius: var(--nhgca-radius-1, 4px);
  border-bottom: 0; font-size: 14px; color: var(--nhgca-ink-2);
  display: inline-flex; align-items: center; gap: 8px;
}
.nav__dropdown-menu a:hover { background: var(--nhgca-primary-soft); color: var(--nhgca-ink); }
.nav__dropdown-menu a.is-active { background: var(--nhgca-primary-soft); color: var(--nhgca-ink); font-weight: 700; }

/* Hover-intent fallback for mouse users — JS still handles click,
   focus, and keyboard; this just opens on pointer hover so the menu
   feels natural with a mouse. Touch + keyboard ignore :hover. */
@media (hover: hover) {
  .nav__dropdown:hover .nav__dropdown-menu,
  .nav__dropdown:focus-within .nav__dropdown-menu { display: flex; }
  .nav__dropdown:hover .nav__dropdown-caret { transform: rotate(180deg); }
}

.header-cta { display:flex; align-items:center; gap: 8px; margin-left: 18px; }
.userchip { display:inline-flex; align-items:center; gap: 8px; font-family: var(--nhgca-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; background: var(--nhgca-primary-soft); border: 1px solid var(--nhgca-primary); color: var(--nhgca-primary); border-radius: var(--nhgca-radius-full); }
.userchip__avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--nhgca-primary); color: #fff; display:grid; place-items:center; font-family: var(--nhgca-font-body); font-weight: 700; font-size: 11px; }

.hamburger { display:none; width: 38px; height: 38px; align-items:center; justify-content:center; background: transparent; border: 1px solid var(--nhgca-ink); border-radius: var(--nhgca-radius-2); cursor:pointer; }
.hamburger span, .hamburger span::before, .hamburger span::after { display:block; width: 18px; height: 2px; background: var(--nhgca-ink); position: relative; }
.hamburger span::before { content:''; position:absolute; top: -6px; left:0; right:0; }
.hamburger span::after  { content:''; position:absolute; top:  6px; left:0; right:0; }

/* Cert banner (site-wide) */
.cert-banner { background: #F5E2C4; border-bottom: 1px solid var(--nhgca-warn); }
.cert-banner__inner { display:flex; align-items:center; gap: 16px; padding: 12px 0; max-width: var(--nhgca-content-max); margin: 0 auto; padding-left: var(--nhgca-gutter); padding-right: var(--nhgca-gutter); }
.cert-banner__icon { width: 32px; height: 32px; border-radius: 50%; background: var(--nhgca-warn); color: #fff; display:grid; place-items:center; font-weight: 700; font-family: var(--nhgca-font-display); }
.cert-banner__text { flex: 1; font-size: 14px; color: var(--nhgca-ink); }
.cert-banner__text strong { font-family: var(--nhgca-font-display); font-weight: 600; font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase; display: block; }
.cert-banner__close { background: transparent; border: 0; cursor: pointer; font-family: var(--nhgca-font-mono); font-size: 16px; padding: 6px 10px; color: var(--nhgca-ink-3); }
.cert-banner__close:hover { color: var(--nhgca-ink); }

/* ─── FOOTER ────────────────────────────────────────────── */
.site-footer { background: var(--nhgca-ink); color: var(--nhgca-paper); padding: 56px 0 32px; margin-top: 80px; }
.site-footer .container { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.site-footer .brand { color: var(--nhgca-paper); }
.site-footer .brand__sub { color: rgba(245,239,225,0.5); }
.site-footer h5 { font-family: var(--nhgca-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,239,225,0.5); margin: 0 0 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer ul a { color: var(--nhgca-paper); font-size: 14px; text-decoration:none; }
.site-footer ul a:hover { color: var(--nhgca-accent); }
.site-footer__sub { max-width: var(--nhgca-content-max); margin: 40px auto 0; padding: 24px var(--nhgca-gutter) 0; border-top: 1px solid rgba(245,239,225,0.15); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; color: rgba(245,239,225,0.5); font-family: var(--nhgca-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.site-footer__sub a { color: rgba(245,239,225,0.6); }
.site-footer__sub-links { display: flex; gap: 24px; }
.site-footer__blurb { max-width: 32ch; margin: 16px 0 0; color: rgba(245,239,225,0.7); font-size: 14px; line-height: 1.55; }

/* ─── HERO ─────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--nhgca-ink); color: var(--nhgca-paper); }
.hero__bg { position:absolute; inset: 0; background: linear-gradient(180deg, rgba(26,31,28,0.4) 0%, rgba(26,31,28,0.75) 100%), repeating-linear-gradient(135deg, #2a3a30 0 18px, #1f2e25 18px 36px); }
.hero__inner { position: relative; padding: 96px 0 80px; max-width: var(--nhgca-content-max); margin: 0 auto; padding-left: var(--nhgca-gutter); padding-right: var(--nhgca-gutter); }
.hero .eyebrow { color: var(--nhgca-accent); }
.hero .display-xl { color: var(--nhgca-paper); max-width: 14ch; }
.hero__sub { font-size: 20px; color: rgba(245,239,225,0.85); max-width: 52ch; margin: 24px 0 32px; line-height: 1.5; }
.hero__cta { display:flex; align-items:center; gap: 12px; flex-wrap: wrap; }
.hero__meta { position:absolute; right: var(--nhgca-gutter); bottom: 24px; font-family: var(--nhgca-font-mono); font-size: 11px; letter-spacing: 0.12em; color: rgba(245,239,225,0.55); text-transform: uppercase; text-align: right; }
.hero__meta strong { color: var(--nhgca-accent); }

/* ─── SECTIONS / CARDS ─────────────────────────────────── */
.section { padding: 64px 0; }
.section--tight { padding: 40px 0; }

.card { background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); padding: 24px; display:flex; flex-direction:column; gap: 12px; }
.card--soft { background: var(--nhgca-primary-soft); border-color: var(--nhgca-primary); }
.card--warn { background: #F5E2C4; border-color: var(--nhgca-warn); border-width: 1px; }
.card--ink  { background: var(--nhgca-ink); color: var(--nhgca-paper); border-color: var(--nhgca-ink); }
.card--ink .eyebrow { color: rgba(245,239,225,0.7); }
.card--accent { background: var(--nhgca-accent-soft); border-color: var(--nhgca-accent); }
.card--bordered { border-width: 2px; border-color: var(--nhgca-ink); }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cols-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; }
.cols-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }
.cols-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.cols-3-1 { display: grid; grid-template-columns: 3fr 1fr; gap: 40px; }

/* Quick-link card */
.qcard { background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); padding: 20px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: border-color var(--nhgca-dur-fast), transform var(--nhgca-dur-fast); position: relative; }
.qcard:hover { border-color: var(--nhgca-ink); text-decoration:none; transform: translateY(-2px); }
.qcard__icon { width: 36px; height: 36px; background: var(--nhgca-primary-soft); border: 1px solid var(--nhgca-primary); border-radius: var(--nhgca-radius-2); display:grid; place-items:center; color: var(--nhgca-primary); font-family: var(--nhgca-font-mono); font-weight: 700; }
.qcard__title { font-family: var(--nhgca-font-display); font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; }
.qcard__desc { font-size: 13px; color: var(--nhgca-ink-2); flex: 1; }
.qcard__more { font-family: var(--nhgca-font-mono); font-size: 11px; font-weight: 600; color: var(--nhgca-primary); letter-spacing: 0.08em; text-transform: uppercase; margin-top: auto; }

/* News */
.news { display: flex; flex-direction: column; }
.news__item { display: grid; grid-template-columns: 80px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--nhgca-ink-4); }
.news__item:first-child { border-top: 1px solid var(--nhgca-ink); }
.news__date { font-family: var(--nhgca-font-mono); font-size: 11px; letter-spacing: .08em; color: var(--nhgca-ink-3); text-transform: uppercase; line-height: 1.3; }
.news__date strong { display: block; font-family: var(--nhgca-font-display); font-size: 24px; color: var(--nhgca-ink); letter-spacing: 0.005em; }
.news__title { font-family: var(--nhgca-font-body); font-weight: 700; font-size: 18px; margin: 0 0 6px; }
.news__excerpt { font-size: 14px; color: var(--nhgca-ink-2); margin: 0 0 8px; }
.news__more { font-family: var(--nhgca-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--nhgca-primary); }

/* ─── HOME PAGE ────────────────────────────────────────── */
.home-stats-strip { background: var(--nhgca-ink); color: var(--nhgca-paper); border-top: 1px solid rgba(245,239,225,0.15); }
.home-stats-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 28px var(--nhgca-gutter); }
.home-stats-strip__cell { padding: 0 24px; border-right: 1px solid rgba(245,239,225,0.15); }
.home-stats-strip__cell:first-child { padding-left: 0; }
.home-stats-strip__cell--last { border-right: 0; }
.home-stats-strip__label { color: rgba(245,239,225,0.5); }
.home-stats-strip__num { color: var(--nhgca-paper); margin-top: 6px; }
.home-stats-strip__num--accent { color: var(--nhgca-accent); }
.home-stats-strip__unit { font-size: 28px; color: rgba(245,239,225,0.6); }

.home-mission { gap: 64px; align-items: start; }
.home-mission__title { max-width: 18ch; }
.home-mission__lead { margin-top: 24px; }
.home-mission__body { margin-top: 16px; color: var(--nhgca-ink-2); }
.home-mission__cta { margin-top: 24px; }
.home-mission__photo { aspect-ratio: 4 / 5; }

.home-quicklinks { background: var(--nhgca-paper-2); border-top: 1px solid var(--nhgca-ink); border-bottom: 1px solid var(--nhgca-ink); }
.home-quicklinks__head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; }
.home-quicklinks__title { max-width: 18ch; }
.home-quicklinks__sub { max-width: 36ch; color: var(--nhgca-ink-2); margin: 0; }

.home-news { align-items: start; }
.home-news__title { margin-bottom: 16px; }
.home-news__all { margin-top: 24px; }

.home-side { display: flex; flex-direction: column; gap: 16px; }
.home-side__heading { margin-top: 4px; }
.home-side__body { margin: 0; color: var(--nhgca-ink-2); font-size: 14px; }
.home-side__body--on-ink { color: rgba(245,239,225,0.7); }
.home-side__eyebrow-on-ink { color: rgba(245,239,225,0.55); }
.home-side__cta { align-self: flex-start; }

/* ─── ABOUT PAGE ───────────────────────────────────────── */
.about-mission { gap: 64px; margin-bottom: 64px; }
.about-mission__heading { margin: 8px 0 16px; }
.about-mission__quote { color: var(--nhgca-ink-3); }
.about-mission__photo { aspect-ratio: 3 / 4; }

.about-section { padding: 64px 0; }
.about-section__head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; }
.about-section__meta { margin: 0; max-width: 36ch; }
.about-section__title { margin-bottom: 32px; }

.about-person__photo { aspect-ratio: 1; margin-bottom: 8px; }
.about-person__name { margin: 2px 0 0; font-family: var(--nhgca-font-display); font-size: 22px; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.1; }
.about-person__meta { margin: 0; }

.about-committee__name { font-size: 24px; }
.about-committee__body { margin: 0; color: var(--nhgca-ink-2); }
.about-committee__meta { margin: 0; }

.about-contact__heading { margin-bottom: 16px; }
.about-contact-info { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.about-contact-info__row { display: flex; flex-direction: column; gap: 4px; }
.about-contact-info__row dt { margin: 0; }
.about-contact-info__row dd { margin: 0; }
.about-contact-info__value { font-size: 16px; }
.about-contact-info__value--multi { font-size: 15px; line-height: 1.5; }

/* ─── MEMBERSHIP PAGE ──────────────────────────────────── */
.page-header--centered { text-align: center; border-bottom: 0; padding-bottom: 24px; }
.page-header__title--centered { margin: 8px auto 0; max-width: 18ch; }
.page-header__sub--centered { margin: 16px auto 0; }

.membership-pricing { margin-bottom: 80px; }
.membership-pricing__card { max-width: 520px; margin: 0 auto; }
.membership-pricing__divider { border: 0; border-top: 1px solid var(--nhgca-primary); margin: 4px 0; }
.membership-pricing__cta { align-self: flex-start; }

.membership-benefits__head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
.membership-benefits__sub { max-width: 36ch; margin: 0; }
.membership-benefits__grid { gap: 32px; }

.membership-card__body { margin: 0; }
.membership-card__footnote { margin: 0; }
.membership-card__eyebrow--warn { color: var(--nhgca-warn); }
.membership-renewal-pills { display: flex; gap: 8px; margin-top: 12px; }

/* ─── SCHEDULES PAGE ───────────────────────────────────── */
.schedules-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.schedules-tournament { padding: 32px; flex-direction: row; align-items: center; gap: 32px; margin-bottom: 48px; }
.schedules-tournament__main { flex: 1; }
.schedules-tournament__eyebrow { color: var(--nhgca-accent); }
.schedules-tournament__title { color: var(--nhgca-paper); margin: 8px 0 8px; }
.schedules-tournament__meta { margin: 0; color: rgba(245,239,225,0.85); font-size: 16px; }
.schedules-tournament__aside { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.schedules-tournament__cta-row { display: flex; gap: 8px; }
.schedules-tournament__cta--on-ink { color: var(--nhgca-paper); border-color: rgba(245,239,225,0.3); }

.schedules-filters { margin-bottom: 24px; }
.schedules-filters__toggle { margin-left: auto; }

.schedules-week { margin-bottom: 40px; }
.schedules-week__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--nhgca-ink); }

.schedules-col-date { width: 110px; }
.schedules-col-time { width: 100px; }
.schedules-col-division { width: 120px; }

.schedules-footer { margin-bottom: 64px; }

/* ─── LINKS PAGE ──────────────────────────────────────── */
.links-grid { gap: 48px; margin-bottom: 80px; }
.links-stack { display: flex; flex-direction: column; gap: 12px; }
.link-card { flex-direction: row; align-items: center; text-decoration: none; color: inherit; }
.link-card:hover { text-decoration: none; border-color: var(--nhgca-ink); }
.link-card__main { flex: 1; }
.link-card__title { font-family: var(--nhgca-font-display); font-size: 24px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.005em; margin: 0; }
.link-card__desc { margin: 4px 0 0; }

/* ─── LOGIN PAGE ──────────────────────────────────────── */
.login-page { display: grid; place-items: center; padding: 64px var(--nhgca-gutter); }
.login-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1080px; width: 100%; border: 1px solid var(--nhgca-ink); border-radius: var(--nhgca-radius-2); overflow: hidden; }
.login-card__brand { background: var(--nhgca-ink); color: var(--nhgca-paper); padding: 56px 48px; display: flex; flex-direction: column; gap: 24px; position: relative; overflow: hidden; }
.login-card__brand-bg { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(245,239,225,0.02) 0 12px, transparent 12px 24px); pointer-events: none; }
.login-card__brand-inner { position: relative; }
.login-card__brand-foot { position: relative; margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.login-card__eyebrow { color: var(--nhgca-accent); }
.login-card__title { color: var(--nhgca-paper); margin: 16px 0 0; max-width: 14ch; }
.login-card__lead { margin: 24px 0 0; color: rgba(245,239,225,0.75); font-size: 16px; line-height: 1.55; max-width: 36ch; }
.login-card__season { display: flex; gap: 12px; align-items: center; }
.login-card__season-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nhgca-accent); }
.login-card__season-label { font-size: 11px; letter-spacing: 0.1em; color: rgba(245,239,225,0.6); text-transform: uppercase; }
.login-card__brand-cta { margin: 0; font-size: 14px; color: rgba(245,239,225,0.55); }
.login-card__brand-link { color: var(--nhgca-accent); }

.login-card__form-pane { background: var(--nhgca-surface); padding: 56px 48px; }
.login-card__form-title { margin: 8px 0 24px; font-size: 36px; }
.login-form__row { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 24px; }
.login-form__remember { display: flex; align-items: center; gap: 8px; margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--nhgca-font-body); font-weight: 400; color: var(--nhgca-ink); font-size: 14px; }
.login-form__checkbox { width: auto; height: auto; }
.login-form__submit { width: 100%; justify-content: center; }
.login-card__divider { border: 0; border-top: 1px solid var(--nhgca-ink-4); margin: 32px 0; }
.login-card__signup-prompt { margin: 0; text-align: center; font-size: 14px; color: var(--nhgca-ink-2); }
.login-card__signup-link { font-weight: 600; }
.login-page__footnote { margin-top: 24px; text-align: center; }
.login-form__note { margin: 12px 0 0; text-align: center; }

@media (max-width: 720px) {
  .login-card { grid-template-columns: 1fr; }
}

/* ─── POY RESULTS PAGE ─────────────────────────────────── */
.poy-results__meta { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.poy-results__season-form { display: flex; align-items: center; gap: 10px; margin: 0; }
.poy-results__season-form .eyebrow { margin: 0; }
.poy-results__season-select { width: auto; min-width: 140px; height: 36px; }
.poy-results__archive-pill { vertical-align: middle; margin-left: 12px; }

/* Championship results archive — reuses the .poy-results__ chrome
   (tabs, archive pill, season selector) plus its own per-section
   spacing and the small "team finished Nth" pill on individual
   rows. */
.championship-results__section { margin-bottom: 40px; }
.championship-results__team-pill { margin-left: 8px; font-size: 11px; }
.poy-results__archive { display: flex; gap: 8px; }
.poy-results__tabs { margin-bottom: 32px; }

.poy-results__winner { padding: 40px; flex-direction: row; align-items: center; gap: 32px; margin-bottom: 48px; }
.poy-results__winner-photo { width: 140px; height: 180px; flex: none; background: rgba(245,239,225,0.08); border-color: rgba(245,239,225,0.25); color: rgba(245,239,225,0.7); }
.poy-results__winner-main { flex: 1; }
.poy-results__winner-name { color: var(--nhgca-paper); margin: 12px 0 8px; }
.poy-results__winner-meta { margin: 0; color: rgba(245,239,225,0.7); letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; }
.poy-results__winner-quote { margin: 16px 0 0; color: rgba(245,239,225,0.85); font-size: 16px; max-width: 50ch; line-height: 1.5; }
.poy-results__winner-stats { gap: 8px; min-width: 280px; }

.poy-stat { padding: 16px; background: rgba(245,239,225,0.06); border-radius: 4px; }
.poy-stat__label { color: rgba(245,239,225,0.55); }
.poy-stat__num { font-size: 36px; line-height: 1; color: var(--nhgca-paper); margin-top: 6px; }
.poy-stat__num--accent { color: var(--nhgca-accent); }

.poy-results__tallies { margin-bottom: 48px; }
.poy-results__section-title { margin-bottom: 16px; }
.poy-results__footnote { margin-top: 12px; letter-spacing: 0.06em; }

.poy-results__col-rank { width: 50px; }
.poy-results__col-class { width: 60px; }
.poy-results__col-stat { width: 80px; }
.poy-results__col-votes { width: 70px; }
.poy-results__col-share { width: 80px; }

.poy-results__allstate { margin-bottom: 80px; }
.poy-allstate-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }

.poy-results__pending { margin-top: 32px; }
.poy-results__empty { max-width: 720px; margin: 0 auto 80px; padding: 32px; text-align: left; }

/* ─── SIGNUP / AUTH SHARED ─────────────────────────────── */
/* minmax(0, 1fr) keeps the columns truly equal even when one cell holds
   a <select> whose option text would otherwise force the column wider
   than the other. .field also gets min-width:0 for the same reason. */
.signup-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; width: 100%; box-sizing: border-box; }
/* The generic `.field + .field { margin-top: 14px; }` rule further down
   the file used to win on source order and was pushing the right column
   down by 14px inside the grid. Bump specificity so the row-scoped
   reset always wins. */
.signup-form__row > .field,
.signup-form__row > .field + .field { margin-top: 0; min-width: 0; }
.signup-form__row > .field > input,
.signup-form__row > .field > select { width: 100%; box-sizing: border-box; }
.signup-form__hint { font-size: 12px; color: var(--nhgca-ink-3); margin-top: 4px; display: block; }
.signup-form__error { align-self: flex-start; margin-bottom: 8px; }
.field-error { color: var(--nhgca-danger); font-size: 12px; margin-top: 4px; display: block; }
.has-error input,
.has-error select,
.has-error textarea { border-color: var(--nhgca-danger); }

/* Submit buttons sit a bit further down so they don't crowd the last field. */
.login-form__submit { margin-top: 16px; }

.auth-narrow { max-width: 560px; margin: 0 auto; padding-top: 32px; padding-bottom: 80px; }
.auth-narrow__form { padding: 32px; }

@media (max-width: 640px) {
  .signup-form__row { grid-template-columns: 1fr; }
}

/* ─── CHECKOUT (stub today, Worldline hosted soon) ─────── */
.checkout-page { padding: 48px var(--nhgca-gutter) 96px; max-width: 720px; margin: 0 auto; }
.checkout-stub-banner { background: #F5E2C4; border: 1px solid var(--nhgca-warn); padding: 16px 20px; border-radius: var(--nhgca-radius-2); margin-bottom: 32px; font-size: 14px; line-height: 1.55; color: var(--nhgca-ink); }
.checkout-stub-banner strong { display: block; font-family: var(--nhgca-font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nhgca-warn); margin-bottom: 4px; }
.checkout-stub-banner code { font-family: var(--nhgca-font-mono); font-size: 12px; background: rgba(154, 90, 20, 0.12); padding: 1px 6px; border-radius: 3px; }

.checkout-card { background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink); border-radius: var(--nhgca-radius-2); padding: 40px; display: flex; flex-direction: column; gap: 24px; }
.checkout-card__head { display: flex; flex-direction: column; gap: 8px; }
.checkout-card__title { color: var(--nhgca-ink); }
.checkout-card__lead { font-size: 16px; color: var(--nhgca-ink-2); margin: 0; }
.checkout-card__summary { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--nhgca-ink-4); border-bottom: 1px solid var(--nhgca-ink-4); }
.checkout-card__row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--nhgca-ink-4); gap: 24px; }
.checkout-card__row:last-child { border-bottom: 0; }
.checkout-card__row dt { font-family: var(--nhgca-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nhgca-ink-3); margin: 0; }
.checkout-card__row dd { margin: 0; font-size: 15px; }
.checkout-card__row--total dt { color: var(--nhgca-ink); font-weight: 600; }
.checkout-card__amount { color: var(--nhgca-primary); font-size: 48px; line-height: 1; margin: 0; }
.checkout-card__actions { display: flex; flex-direction: column; gap: 12px; }
.checkout-card__pay { justify-content: center; }
.checkout-card__decline { justify-content: center; }
.checkout-card__footnote { margin: 0; font-size: 12px; line-height: 1.5; color: var(--nhgca-ink-3); }
.checkout-card__footnote code { font-family: var(--nhgca-font-mono); }

/* ─── SITE-WIDE FLASH MESSAGES ────────────────────────── */
.site-messages { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; padding-bottom: 8px; }
.site-messages__item { padding: 12px 18px; border-radius: var(--nhgca-radius-2); border: 1px solid var(--nhgca-ink-4); background: var(--nhgca-surface); font-size: 14px; }
.site-messages__item--success { background: var(--nhgca-primary-soft); border-color: var(--nhgca-primary); color: var(--nhgca-primary); }
.site-messages__item--error,
.site-messages__item--warning { background: #F5E2C4; border-color: var(--nhgca-warn); color: var(--nhgca-ink); }
.site-messages__item--info { background: var(--nhgca-paper-2); border-color: var(--nhgca-ink-4); }

/* ─── PROFILE (view + edit) ───────────────────────────── */
.profile-logout { margin: 0; }

.profile-lapsed { flex-direction: row; align-items: center; gap: 24px; padding: 24px; margin-bottom: 32px; }
.profile-lapsed__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--nhgca-warn); color: #fff; display: grid; place-items: center; font-family: var(--nhgca-font-display); font-size: 24px; flex: none; }
.profile-lapsed__copy { flex: 1; }
.profile-lapsed__eyebrow { color: var(--nhgca-warn); }
.profile-lapsed__title { margin: 4px 0 0; }
.profile-lapsed__body { margin: 8px 0 0; font-size: 14px; color: var(--nhgca-ink-2); }

.profile-layout { align-items: start; gap: 32px; margin-bottom: 48px; }
.profile-card { padding: 32px; }

.profile-edit { padding: 32px; gap: 12px; }
.profile-edit__head { display: flex; align-items: center; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--nhgca-ink-4); margin-bottom: 12px; }
.profile-edit__avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--nhgca-primary); color: #fff; display: grid; place-items: center; flex: none; overflow: hidden; }
.profile-edit__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-edit__avatar-initials { font-family: var(--nhgca-font-display); font-size: 32px; font-weight: 700; line-height: 1; }
.profile-edit__identity { flex: 1; min-width: 0; }
.profile-edit__name { margin: 0; }
.profile-edit__meta { font-size: 11px; letter-spacing: 0.08em; color: var(--nhgca-ink-3); text-transform: uppercase; margin-top: 4px; }
.profile-edit__section { margin-top: 8px; }
.profile-edit__divider { border: 0; border-top: 1px solid var(--nhgca-ink-4); margin: 16px 0 8px; width: 100%; }
.profile-edit__checkbox { display: flex; align-items: center; gap: 12px; margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--nhgca-font-body); font-weight: 400; color: var(--nhgca-ink); font-size: 14px; }
.profile-edit__checkbox input[type='checkbox'] { width: auto; height: auto; flex: none; }
.profile-edit__checkbox-hint { margin-left: 28px; }
.profile-edit__actions { display: flex; gap: 8px; margin-top: 24px; }

.profile-side { display: flex; flex-direction: column; gap: 16px; }
.profile-side__heading { font-family: var(--nhgca-font-display); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.1; margin: 8px 0 4px; }
.profile-side__body { margin: 0; font-size: 14px; color: var(--nhgca-ink-2); }
.profile-side__divider { border: 0; border-top: 1px solid var(--nhgca-ink-4); margin: 8px 0; width: 100%; }
.profile-side__payments { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.profile-side__cta { align-self: flex-start; margin-top: 8px; }

.profile-shortcuts { padding-bottom: 80px; }

/* ─── MEMBER GATE (used by ActiveMembershipRequiredMixin) ─ */
.member-gate { max-width: 640px; margin: 0 auto 80px; }
.member-gate__title { margin: 16px 0 12px; }
.member-gate__lead { margin: 0 0 24px; }
.member-gate__features { list-style: none; padding: 0; margin: 0 0 24px; display: inline-flex; flex-direction: column; gap: 8px; text-align: left; font-size: 14px; }
.member-gate__features li::before { content: '✓'; color: var(--nhgca-primary); margin-right: 8px; font-weight: 700; }
.member-gate__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.member-placeholder { max-width: 720px; margin: 0 auto 80px; text-align: left; padding: 32px; }

/* ─── RULES RESOURCES ──────────────────────────────────── */
.rules-videos { margin-bottom: 64px; }
.rules-quizzes,
.rules-clinics { padding: 64px 0; }
.rules-section__head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
.rules-section__title { margin: 0; }
.rules-section__heading { margin-bottom: 24px; }
.rules-section__lead { max-width: 60ch; margin-bottom: 24px; }
.rules-section__pills { display: flex; gap: 8px; }
.rules-video { text-decoration: none; color: inherit; }
.rules-video:hover { text-decoration: none; border-color: var(--nhgca-ink); }
/* Until real video URLs land, the tiles are non-interactive divs — don't
   suggest a hover affordance that doesn't lead anywhere. */
.rules-video--placeholder { cursor: default; }
.rules-video--placeholder:hover { border-color: var(--nhgca-ink-4); }
.rules-clinics__sub { margin: 0; }
.rules-table__action { text-align: right; }

/* ─── DIRECTORY ───────────────────────────────────────── */
.directory-filterbar { margin-bottom: 20px; }
.directory-filterbar__submit { margin-left: auto; }
.directory-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.directory-meta__count { font-size: 11px; letter-spacing: 0.08em; color: var(--nhgca-ink-3); text-transform: uppercase; }
.directory-grid { gap: 16px; margin-bottom: 32px; }
.directory-empty { max-width: 560px; margin: 0 auto 80px; padding: 32px; text-align: center; }

.coach__body { flex: 1; min-width: 0; }
.coach__photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.coach__bio { margin: 8px 0 0; font-size: 13px; color: var(--nhgca-ink-2); }

/* ─── VOTING ──────────────────────────────────────────── */
.voting-state { max-width: 720px; margin: 0 auto 48px; padding: 32px; }
.voting-status { display: flex; flex-direction: row; align-items: center; gap: 24px; padding: 20px 24px; margin-bottom: 32px; flex-wrap: wrap; }
.voting-status__window { font-size: 14px; }
.voting-status__own { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.voting-status__own-value { font-weight: 600; }

.voting-division { margin-bottom: 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.voting-division__row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.voting-division__name { font-size: 18px; font-weight: 600; }
.voting-division__note { max-width: 48ch; margin: 0; margin-left: auto; }

.voting-nominate-callout { display: flex; flex-direction: row; align-items: center; gap: 24px; padding: 24px 28px; margin-bottom: 32px; flex-wrap: wrap; }
.voting-nominate-callout__text { flex: 1; min-width: 280px; }
.voting-nominate-callout__title { margin: 4px 0; }
.voting-nominate-callout__body { margin: 0; color: var(--nhgca-ink-2); font-size: 14px; }
.voting-nominate-callout__cta { flex: 0 0 auto; }

.voting-form { display: flex; flex-direction: column; gap: 32px; }
.voting-form__error { align-self: flex-start; }

.voting-section { display: flex; flex-direction: column; gap: 16px; }
.voting-section__head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 16px; }
.voting-section__counter { display: flex; align-items: center; gap: 12px; }
.voting-counter { font-size: 36px; line-height: 1; }

.voting-candidates,
.voting-poy { gap: 12px; }

.voting-card { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); cursor: pointer; transition: border-color var(--nhgca-dur-micro) var(--nhgca-ease-standard), background var(--nhgca-dur-micro) var(--nhgca-ease-standard); }
.voting-card:hover { border-color: var(--nhgca-ink); }
.voting-card input[type='checkbox'],
.voting-card input[type='radio'] { width: auto; height: auto; margin-top: 4px; flex: none; }
.voting-card:has(input:checked) { background: var(--nhgca-primary-soft); border-color: var(--nhgca-primary); }
.voting-card__body { flex: 1; min-width: 0; }
.voting-card__name { font-family: var(--nhgca-font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.005em; text-transform: uppercase; line-height: 1.1; }
.voting-card__meta { font-family: var(--nhgca-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nhgca-ink-3); margin-top: 4px; }
.voting-card__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 0; }
.voting-card__stats div { display: flex; flex-direction: column; gap: 2px; }
.voting-card__stats dt { font-family: var(--nhgca-font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nhgca-ink-3); margin: 0; }
.voting-card__stats dd { margin: 0; font-family: var(--nhgca-font-mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.voting-submit { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.voting-submit__note { margin: 0; }

.voting-readonly { padding-bottom: 80px; }
.voting-readonly__heading { font-family: var(--nhgca-font-display); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.005em; margin: 0 0 12px; }
.voting-readonly__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

/* ─── CERTIFICATIONS ──────────────────────────────────── */
.cert-empty { max-width: 640px; margin: 0 auto 80px; padding: 32px; }

.cert-status { margin-bottom: 64px; }
.cert-status__row { align-items: start; }
.cert-status__card { padding: 32px; }
.cert-status__heading { margin: 8px 0 4px; }
.cert-status__body { margin: 0 0 24px; color: var(--nhgca-ink-2); }
.cert-status__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 24px; padding: 0; }
.cert-status__facts div { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.cert-status__facts dt { margin: 0; }
.cert-status__facts dd { margin: 0; font-family: var(--nhgca-font-display); font-size: 22px; line-height: 1; }
.cert-status__cta { align-self: flex-start; }
.cert-status__sidebar { padding: 24px; }
.cert-status__topics { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.cert-status__topics li::before { content: '✓'; color: var(--nhgca-primary); margin-right: 8px; font-weight: 700; }
.cert-status__note { margin: 16px 0 0; }

.cert-taking { padding-bottom: 80px; }
.cert-form { display: flex; flex-direction: column; gap: 24px; margin-top: 16px; }

.cert-question { padding: 32px; gap: 16px; }
.cert-question__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cert-question__num { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nhgca-ink-3); }
.cert-question__text { margin: 0; font-size: 24px; max-width: 60ch; line-height: 1.3; }
.cert-question__answers { display: flex; flex-direction: column; gap: 12px; }

.cert-option { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); cursor: pointer; text-transform: none; letter-spacing: 0; font-family: var(--nhgca-font-body); font-weight: 400; color: var(--nhgca-ink); font-size: 15px; transition: border-color var(--nhgca-dur-micro) var(--nhgca-ease-standard), background var(--nhgca-dur-micro) var(--nhgca-ease-standard); margin: 0; }
.cert-option:hover { border-color: var(--nhgca-ink); }
.cert-option:has(input:checked) { background: var(--nhgca-primary-soft); border-color: var(--nhgca-primary); }
.cert-option input[type='radio'] { width: auto; height: auto; flex: none; margin: 0; }
.cert-option__marker { width: 24px; height: 24px; border: 1px solid var(--nhgca-ink); border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; }
.cert-option:has(input:checked) .cert-option__marker { background: var(--nhgca-primary); color: #fff; border-color: var(--nhgca-primary); }
.cert-option__text { flex: 1; }

.cert-submit { display: flex; gap: 12px; align-items: center; padding-top: 16px; }

/* Paginated take-quiz flow: one question per page; the locked variant
   is what browser-back lands on for a previously-answered question. */
.cert-take__progress { margin-top: 8px; }
.cert-take__notice { padding: 16px 20px; margin-bottom: 16px; font-size: 14px; }
.cert-option--locked { cursor: default; opacity: 0.85; }
.cert-option--locked:hover { border-color: var(--nhgca-ink-4); }
.cert-option--picked { background: var(--nhgca-primary-soft); border-color: var(--nhgca-primary); opacity: 1; }
.cert-option--picked .cert-option__marker { background: var(--nhgca-primary); color: #fff; border-color: var(--nhgca-primary); }
/* Practice quiz: when the correct answer wasn't the one the coach
   picked, also highlight the correct row so it's easy to spot. */
.cert-option--correct { background: var(--nhgca-primary-soft); border-color: var(--nhgca-primary); opacity: 1; }
.cert-option--correct .cert-option__marker { background: var(--nhgca-primary); color: #fff; border-color: var(--nhgca-primary); }
.cert-option__pill { margin-left: auto; flex: none; }

.manage-quiz__completion { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; margin-bottom: 24px; flex-wrap: wrap; }
.manage-quiz__completion-main { display: flex; flex-direction: column; gap: 4px; }
.manage-quiz__completion-headline { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.manage-quiz__completion-headline strong { font-family: var(--nhgca-font-display); line-height: 1; }

.practice-stats { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 20px; margin-bottom: 24px; }
.practice-stats__line { margin: 4px 0 0; font-size: 18px; }
.practice-question { gap: 16px; }
.practice-question__explanation { margin-top: 12px; font-style: italic; color: var(--nhgca-ink-2); }
.rules-practice-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px; margin-bottom: 32px; flex-wrap: wrap; }
.rules-practice-cta__title { margin: 6px 0 8px; }
.rules-practice-cta__body { margin: 0; color: var(--nhgca-paper); opacity: 0.85; max-width: 60ch; }
.rules-practice-cta__action { flex: none; }

.cert-review { padding-bottom: 80px; }
.cert-review__heading { margin-bottom: 24px; }
.cert-review__list { display: flex; flex-direction: column; gap: 16px; }
.cert-review__item { padding: 24px; gap: 8px; }
.cert-review__head { display: flex; gap: 8px; flex-wrap: wrap; }
.cert-review__question { margin: 8px 0; }
.cert-review__line { margin: 0; font-size: 14px; }
.cert-review__line--correct { color: var(--nhgca-primary); font-weight: 600; }
.cert-review__explanation { margin: 8px 0 0; font-size: 13px; color: var(--nhgca-ink-2); font-style: italic; }

/* The #386 minimal-profile stub left behind a second .profile-card rule
   plus several unused BEM classes (.profile-grid, .profile-card__title,
   .profile-card__body, .profile-card__cta, .profile-details*). Those
   were shadowing the canonical .profile-card { padding: 32px } above
   and have been removed — the #387 redesign uses .profile-edit and
   .profile-side blocks instead. */

/* ─── PAGE HEADER (interior pages) ─────────────────────── */
.page-header { padding: 48px 0 32px; border-bottom: 1px solid var(--nhgca-ink); margin-bottom: 48px; }
/* page-header__top usually has either:
   - one child (e.g. /about): heading-only, stays left-aligned
   - two children: heading + side widget; we want the side widget pushed
     to the right edge.
   `justify-content: space-between` does both naturally without the
   margin-left:auto hack (which previously yanked the only child to the
   right edge as well). */
.page-header__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.page-header h1 { font-family: var(--nhgca-font-display); font-weight: 700; font-size: 64px; line-height: 0.95; letter-spacing: 0.005em; text-transform: uppercase; margin: 8px 0 0; max-width: 16ch; }
.page-header__sub { font-size: 16px; color: var(--nhgca-ink-2); margin-top: 12px; max-width: 60ch; }

/* Bulleted helper-text under a page-header h1 (e.g. the Add Admin form
   page intro). Tighter line-height + green bullet keeps it scannable
   without competing with the headline. */
.manage-admins__bullets {
  margin: 16px 0 0;
  padding-left: 20px;
  max-width: 60ch;
  font-size: 15px;
  color: var(--nhgca-ink-2);
  line-height: 1.55;
}
.manage-admins__bullets li { margin: 4px 0; }
.manage-admins__bullets li::marker { color: var(--nhgca-primary); }

/* ─── PRICE CARDS ──────────────────────────────────────── */
.price-card { background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); padding: 32px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.price-card--featured { background: var(--nhgca-primary-soft); border: 2px solid var(--nhgca-primary); }
.price-card__name { font-family: var(--nhgca-font-display); font-weight: 700; font-size: 36px; line-height: 1; text-transform: uppercase; letter-spacing: 0.005em; }
.price-card__price { font-family: var(--nhgca-font-display); font-weight: 700; font-size: 56px; line-height: 1; }
.price-card__price small { font-family: var(--nhgca-font-body); font-weight: 500; font-size: 16px; color: var(--nhgca-ink-3); margin-left: 8px; }
.price-card__features { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.price-card__features li { display: flex; align-items: flex-start; gap: 10px; }
.price-card__features li::before { content: '✓'; color: var(--nhgca-primary); font-weight: 700; }
.price-card__foot { font-family: var(--nhgca-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nhgca-ink-3); margin-top: auto; }
.price-card .pill { align-self: flex-start; }

/* ─── BENEFITS GRID ────────────────────────────────────── */
.benefit {
  position: relative;
  padding: 28px 24px 28px 28px;
  border-top: 3px solid var(--nhgca-primary);
  background: var(--nhgca-paper-2);
  border-radius: var(--nhgca-radius-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--nhgca-dur-fast), box-shadow var(--nhgca-dur-fast);
}
.benefit:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.benefit__num {
  position: absolute; top: 16px; right: 20px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--nhgca-primary); color: #fff;
  font-family: var(--nhgca-font-mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.benefit__name {
  font-family: var(--nhgca-font-display);
  font-weight: 700; font-size: 26px;
  letter-spacing: 0.005em; text-transform: uppercase;
  line-height: 1.05; padding-right: 48px;
}
.benefit__desc { font-size: 15px; line-height: 1.5; color: var(--nhgca-ink-2); }

/* ─── FAQ ──────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--nhgca-ink); }
.faq details { border-bottom: 1px solid var(--nhgca-ink-4); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; align-items: center; gap: 16px; font-family: var(--nhgca-font-body); font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
/* Plus / minus glyph centered in a circle.
   Using flex + explicit line-height + a tiny baseline nudge: the
   `+` and `−` glyphs in JetBrains Mono sit a hair above the box's
   optical center, so `display:grid; place-items:center` left them
   visually off — the translateY puts them dead center. */
.faq summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--nhgca-font-mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--nhgca-ink-3);
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1px solid var(--nhgca-ink-4);
  border-radius: 50%;
  transition: transform var(--nhgca-dur-fast);
}
.faq summary::after { padding-bottom: 1px; }
.faq details[open] summary::after { content: '−'; border-color: var(--nhgca-ink); padding-bottom: 3px; }
.faq__body { padding: 0 48px 24px 0; color: var(--nhgca-ink-2); font-size: 15px; max-width: 70ch; }

/* ─── TABLES ───────────────────────────────────────────── */
.table { background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); overflow: hidden; }
.table table { border-collapse: collapse; width: 100%; }
.table th { text-align: left; padding: 12px 16px; font-family: var(--nhgca-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--nhgca-ink-3); border-bottom: 1px solid var(--nhgca-ink); background: var(--nhgca-paper); }
.table td { padding: 14px 16px; font-size: 14px; border-bottom: 1px solid var(--nhgca-ink-4); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--nhgca-paper); }
.table--data td { font-variant-numeric: tabular-nums; }
.table .num { font-variant-numeric: tabular-nums; font-family: var(--nhgca-font-mono); }
.table .row-highlight td { background: var(--nhgca-primary-soft); }
.table .row-highlight:hover td { background: var(--nhgca-primary-soft); }

/* ─── FORMS ────────────────────────────────────────────── */
label { display: block; font-family: var(--nhgca-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nhgca-ink-3); margin-bottom: 6px; font-weight: 600; }
.input, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], select, textarea {
  width: 100%; height: 42px; padding: 0 14px; font-family: var(--nhgca-font-body); font-size: 14px;
  color: var(--nhgca-ink); background: var(--nhgca-surface);
  border: 1px solid var(--nhgca-ink-3); border-radius: var(--nhgca-radius-2);
}
textarea { height: auto; padding: 12px 14px; min-height: 110px; resize: vertical; line-height: 1.5; }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231A1F1C'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.input:focus, input:focus, select:focus, textarea:focus { outline: 2px solid var(--nhgca-accent); outline-offset: 1px; border-color: var(--nhgca-ink); }
.field { display: flex; flex-direction: column; gap: 0; }
.field + .field { margin-top: 14px; }
.input-search { position: relative; }
.input-search input { padding-left: 38px; }
.input-search::before { content:'⌕'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--nhgca-ink-3); font-family: var(--nhgca-font-mono); }

/* Standard "screen reader only" utility — keeps the element in the
   accessibility tree without taking layout space. The members-filter
   search input uses this for its `<label>` so the input lines up with
   the unlabeled selects beside it. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Filter row */
.filterbar { display:flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 16px; background: var(--nhgca-paper-2); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); }
.filterbar > .input-search { flex: 1; min-width: 240px; }
/* Lock every interactive element in the filter row to the same 36px
   height. The base input rule above sets 42px, which left the search
   input visibly taller than the selects sitting next to it. */
.filterbar select, .filterbar .input, .filterbar input[type="search"] { height: 36px; }
/* Override the base `select { width: 100% }` so filterbar dropdowns sit
   inline with the search input instead of wrapping to their own row. */
.filterbar select { width: auto; min-width: 180px; flex: 0 1 auto; }

.toggle-group { display:inline-flex; border: 1px solid var(--nhgca-ink); border-radius: var(--nhgca-radius-2); overflow: hidden; }
.toggle-group button { background: transparent; border: 0; padding: 8px 14px; font-family: var(--nhgca-font-body); font-weight: 500; font-size: 12px; color: var(--nhgca-ink-2); cursor: pointer; }
.toggle-group button.is-active { background: var(--nhgca-ink); color: var(--nhgca-paper); }

/* Checkbox visual */
.cb { display:inline-flex; width:18px; height:18px; border:1.5px solid var(--nhgca-ink); border-radius: 3px; background: var(--nhgca-surface); align-items:center; justify-content:center; flex: none; }
.cb.on { background: var(--nhgca-primary); border-color: var(--nhgca-primary); color: #fff; }
.cb.on::after { content:'✓'; font-size: 11px; font-weight: 700; }

/* ─── TABS ─────────────────────────────────────────────── */
.tabs { display:flex; border-bottom: 1px solid var(--nhgca-ink); gap: 0; }
.tabs button { background: transparent; border: 0; padding: 12px 18px; font-family: var(--nhgca-font-display); font-size: 18px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--nhgca-ink-3); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs button.is-active { color: var(--nhgca-ink); border-bottom-color: var(--nhgca-primary); }
.tabs button:hover { color: var(--nhgca-ink); }

/* ─── GATE ─────────────────────────────────────────────── */
.gate { background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink); border-radius: var(--nhgca-radius-2); padding: 48px; text-align: center; max-width: 560px; margin: 0 auto; }
.gate__lock { width: 64px; height: 64px; border-radius: 50%; background: var(--nhgca-primary-soft); color: var(--nhgca-primary); display: grid; place-items: center; margin: 0 auto 16px; font-size: 24px; }
.gate ul { list-style: none; padding: 0; margin: 16px 0; display: inline-flex; flex-direction: column; gap: 8px; text-align: left; font-size: 14px; }
.gate ul li::before { content: '✓'; color: var(--nhgca-primary); margin-right: 8px; font-weight: 700; }

/* ─── VIDEO TILES ─────────────────────────────────────── */
.video-tile { background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); overflow: hidden; }
.video-tile__thumb { aspect-ratio: 16 / 9; background: var(--nhgca-ink); background-image: repeating-linear-gradient(135deg, #2a3a30 0 12px, #1f2e25 12px 24px); position: relative; display:grid; place-items: center; }
.video-tile__thumb::after { content: '▶'; color: rgba(255,255,255,0.9); font-size: 28px; }
.video-tile__body { padding: 14px 16px; }
.video-tile__title { font-family: var(--nhgca-font-body); font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.video-tile__meta { font-family: var(--nhgca-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nhgca-ink-3); }

/* ─── DIRECTORY CARDS ─────────────────────────────────── */
.coach { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); }
.coach__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--nhgca-primary-soft); color: var(--nhgca-primary); border: 1px solid var(--nhgca-primary); display:grid; place-items:center; font-family: var(--nhgca-font-display); font-weight: 700; font-size: 18px; flex: none; }
.coach__name { font-family: var(--nhgca-font-display); font-weight: 600; font-size: 20px; letter-spacing: 0.005em; line-height: 1; text-transform: uppercase; }
.coach__meta { font-family: var(--nhgca-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nhgca-ink-3); margin-top: 4px; }
.coach__email { font-family: var(--nhgca-font-mono); font-size: 11px; color: var(--nhgca-ink-2); margin-top: 8px; }

/* Pagination */
.pagination { display:flex; gap: 6px; justify-content: center; padding: 32px 0; }
.pagination a, .pagination span { display:inline-flex; align-items:center; justify-content:center; min-width: 36px; height: 36px; padding: 0 12px; border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); color: var(--nhgca-ink); text-decoration: none; font-family: var(--nhgca-font-mono); font-size: 12px; font-weight: 600; background: var(--nhgca-surface); }
.pagination .is-current { background: var(--nhgca-ink); color: var(--nhgca-paper); border-color: var(--nhgca-ink); }
.pagination a:hover { border-color: var(--nhgca-ink); text-decoration: none; }

/* ─── ADMIN ────────────────────────────────────────────── */
.admin .site-header { background: var(--nhgca-ink); border-bottom-color: var(--nhgca-ink); color: var(--nhgca-paper); }
.admin .brand { color: var(--nhgca-paper); }
.admin .brand__mark { background: var(--nhgca-accent); }
.admin .brand__sub { color: rgba(245,239,225,0.5); }
.admin .nav a { color: rgba(245,239,225,0.65); }
.admin .nav a:hover { color: var(--nhgca-paper); }
.admin .nav a.is-active { color: var(--nhgca-paper); border-bottom-color: var(--nhgca-accent); }
.admin .userchip { background: rgba(245,239,225,0.1); color: var(--nhgca-paper); border-color: rgba(245,239,225,0.25); }
.admin .userchip__avatar { background: var(--nhgca-accent); color: var(--nhgca-ink); }
.admin .page-header h1 { font-size: 48px; }
.kpi { background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); padding: 20px; }
.kpi__num { font-family: var(--nhgca-font-display); font-weight: 700; font-size: 48px; line-height: 1; margin-top: 4px; }
.kpi__delta { font-family: var(--nhgca-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 6px; color: var(--nhgca-ink-3); }
.kpi--warn { background: #F5E2C4; border-color: var(--nhgca-warn); }
.kpi--green { background: var(--nhgca-primary-soft); border-color: var(--nhgca-primary); }

/* Admin task row */
.task-row { display:flex; align-items:center; gap: 16px; padding: 16px 18px; background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); }
.task-row + .task-row { margin-top: 8px; }
.task-row__title { font-family: var(--nhgca-font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.005em; text-transform: uppercase; margin: 0; line-height: 1.1; }
.task-row__meta { font-size: 13px; color: var(--nhgca-ink-2); margin-top: 4px; }
.task-row__cta { margin-left: auto; }

.activity { display:flex; flex-direction: column; gap: 8px; }
.activity__item { padding: 12px 16px; background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); display:flex; gap: 12px; align-items: baseline; }
.activity__time { font-family: var(--nhgca-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nhgca-ink-3); width: 88px; flex:none; }
.activity__text { font-size: 14px; }

/* Question editor */
.q-list .q-item { display:flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); cursor: pointer; }
.q-list .q-item.is-active { border-color: var(--nhgca-primary); background: var(--nhgca-primary-soft); }
.q-list .q-item__num { font-family: var(--nhgca-font-mono); font-size: 10px; font-weight: 600; color: var(--nhgca-ink-3); width: 32px; flex:none; }
.q-list .q-item__text { flex: 1; font-size: 13px; }
.q-list .q-item + .q-item { margin-top: 6px; }

/* ─── DEMO PANEL (toggle login state across all pages) ─── */
.demo-panel { position: fixed; bottom: 16px; right: 16px; z-index: 80; background: var(--nhgca-ink); color: var(--nhgca-paper); border-radius: var(--nhgca-radius-2); padding: 12px 14px; font-family: var(--nhgca-font-mono); font-size: 11px; letter-spacing: 0.05em; box-shadow: var(--nhgca-shadow-3); max-width: 320px; }
.demo-panel__head { display:flex; align-items:center; gap: 8px; margin-bottom: 8px; }
.demo-panel__dot { width: 8px; height: 8px; background: var(--nhgca-accent); border-radius: 50%; }
.demo-panel__title { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; flex: 1; }
.demo-panel__toggle { background: transparent; border: 0; color: rgba(245,239,225,0.5); cursor: pointer; font-family: var(--nhgca-font-mono); }
.demo-panel__row { display:flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.demo-panel__row label { color: rgba(245,239,225,0.55); margin: 0; font-size: 9px; letter-spacing: 0.14em; flex: 0 0 56px; align-self: center; }
.demo-panel__row button { background: transparent; color: var(--nhgca-paper); border: 1px solid rgba(245,239,225,0.25); padding: 4px 10px; font-family: var(--nhgca-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 4px; cursor: pointer; }
.demo-panel__row button.is-active { background: var(--nhgca-accent); color: var(--nhgca-ink); border-color: var(--nhgca-accent); }
.demo-panel.is-collapsed .demo-panel__body { display: none; }

/* ─── MISC ─────────────────────────────────────────────── */
.spacer-sm { height: 16px; } .spacer-md { height: 32px; } .spacer-lg { height: 64px; }
.flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 24px; } .gap-6 { gap: 32px; }
.ml-auto { margin-left: auto; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; } .mt-5 { margin-top: 32px; } .mt-6 { margin-top: 48px; }
.mb-2 { margin-bottom: 12px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; } .mb-5 { margin-bottom: 32px; }
.text-right { text-align: right; } .text-center { text-align: center; }
.text-sm { font-size: 13px; } .text-xs { font-size: 12px; }
.is-hidden { display: none !important; }
.is-blurred { filter: blur(4px); opacity: .5; pointer-events: none; }
.placeholder-image { background: repeating-linear-gradient(135deg, #ECE4CF 0 14px, #E2D9C0 14px 28px); border: 1px dashed var(--nhgca-ink-4); display: grid; place-items: center; font-family: var(--nhgca-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nhgca-ink-3); border-radius: var(--nhgca-radius-2); }

/* ─── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 980px) {
  .nav { display: none; }
  .header-cta { display: none; }
  .hamburger { display: inline-flex; }
  .site-footer .container { grid-template-columns: 1fr 1fr; }
  .hero__inner { padding: 56px 0 56px; }
  .hero .display-xl { font-size: 56px; }
  .page-header h1 { font-size: 44px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--6 { grid-template-columns: repeat(3, 1fr); }
  .cols-1-2, .cols-2-1, .cols-1-1, .cols-3-1 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .grid--6 { grid-template-columns: repeat(2, 1fr); }
  .site-footer .container { grid-template-columns: 1fr; }
  .hero .display-xl { font-size: 40px; }
  .page-header h1 { font-size: 36px; }
}

/* ─── Staff POY dashboard (#394) ────────────────────────────────────── */
/* Season selector + "+ New voting window" CTA strip. Mirrors the quiz
   dashboard's season-bar so staff get the same affordance shape
   across the two season-scoped admin surfaces. */
.manage-poy__season-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px; margin: 24px 0 32px; background: var(--nhgca-paper-2); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); }
.manage-poy__season-form { display: flex; align-items: center; gap: 10px; margin: 0; flex: 1 1 auto; min-width: 0; }
.manage-poy__season-form .eyebrow { margin: 0; }
.manage-poy__season-select { width: auto; min-width: 200px; height: 36px; flex: 1 1 auto; }
.manage-poy__season-bar-cta { margin-left: auto; flex: none; }

.manage-poy__candidates-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 32px 0 16px; flex-wrap: wrap; }
.manage-poy__candidates-actions { display: flex; gap: 8px; }
.manage-poy__division { margin-bottom: 24px; }
.manage-poy__division-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.manage-poy__stat-input { height: 32px; padding: 4px 8px; width: 100%; min-width: 60px; border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-1, 4px); font-family: var(--nhgca-font-mono); font-size: 13px; transition: background-color 200ms ease-out, border-color 200ms ease-out; }
.manage-poy__stat-input--narrow { max-width: 80px; }
.manage-poy__stat-input--saved { animation: manage-poy-pulse-success 800ms ease-out; }
.manage-poy__stat-input--error { background-color: #F5D8D2; border-color: var(--nhgca-danger); }
@keyframes manage-poy-pulse-success {
  0%   { background-color: var(--nhgca-primary-soft); border-color: var(--nhgca-primary); }
  100% { background-color: transparent; border-color: var(--nhgca-ink-4); }
}
.manage-poy__stats-save { margin-top: 20px; }

/* ─── Toast notifications (staff console) ───────────────────────────── */
.toast-stack { position: fixed; top: 24px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: 360px; pointer-events: none; }
.toast { padding: 12px 16px; border-radius: var(--nhgca-radius-2); background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); box-shadow: 0 4px 16px rgba(0,0,0,0.12); font-size: 14px; pointer-events: auto; animation: toast-in 200ms ease-out; }
.toast--error { background: #F5D8D2; border-color: var(--nhgca-danger); color: var(--nhgca-danger); }
.toast--success { background: var(--nhgca-primary-soft); border-color: var(--nhgca-primary); color: var(--nhgca-primary); }
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ─── Staff Quiz authoring (#395) ────────────────────────────────────── */
.manage-quiz__header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* "Create a new draft for season N" mini form — breathes inside its
   own vertical rhythm so it doesn't crowd the divider or the settings
   card below. */
.manage-quiz__new-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 24px 0 32px; padding: 16px 18px; background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); }
.manage-quiz__new-form label { font-family: var(--nhgca-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nhgca-ink-3); flex-basis: 100%; margin-bottom: 0; }
.manage-quiz__new-form input[type="number"] { flex: 1 1 200px; height: 36px; }

/* Replaced by ``.manage-quiz__season-bar`` below — kept for any
   straggling reference; safe to delete once nothing renders it. */
.manage-quiz__season-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; }
.manage-quiz__season-picker .eyebrow { margin-right: 4px; }

/* Create-draft form + season picker share a row so they don't burn
   a whole viewport height on two big bars. 2-col on wide, stacks
   on narrow. ``align-items: stretch`` keeps both halves the same
   height for a tidy paired-control look. */
.manage-quiz__season-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin: 24px 0 32px;
}
.manage-quiz__season-controls > .manage-quiz__new-form,
.manage-quiz__season-controls > .manage-quiz__season-bar {
  margin: 0;
}
@media (max-width: 720px) {
  .manage-quiz__season-controls { grid-template-columns: 1fr; }
}

/* Season picker = dropdown + adjacent Show/Hide archived button.
   Sits flush left like a filterbar so it reads as a control strip,
   not as content. */
.manage-quiz__season-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px; background: var(--nhgca-paper-2); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); }
.manage-quiz__season-form { display: flex; align-items: center; gap: 10px; margin: 0; flex: 1 1 auto; min-width: 0; }
.manage-quiz__season-form .eyebrow { margin: 0; }
.manage-quiz__season-select { width: auto; min-width: 180px; height: 36px; flex: 1 1 auto; }

/* Settings card — drop the bigger "Mechanics & constraints" h3 from
   the chrome; the "Quiz settings" eyebrow is enough of a header.

   The grid uses ``display: contents`` on each .field so the label /
   input / hint trios become direct grid children with explicit
   ``grid-row`` assignments. This guarantees row alignment across all
   four columns regardless of what's inside any one .field — the
   previous flex-column approach had label/input/hint stacked
   independently per column, so any sub-pixel variance in (e.g.) a
   number input's intrinsic padding offset its row's baseline. Now
   row N's height = max(child height in row N) across all columns,
   so labels-with-labels, inputs-with-inputs, hints-with-hints
   all share the same baseline. */
.manage-quiz__settings { margin-bottom: 48px; padding: 28px 32px; }
.manage-quiz__settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto 38px auto;
  column-gap: 20px;
  row-gap: 6px;
  align-items: stretch;
  margin-top: 4px;
}
.manage-quiz__settings-grid .field { display: contents; }
.manage-quiz__settings-grid .field > label { grid-row: 1; align-self: end; }
.manage-quiz__settings-grid .field > input,
.manage-quiz__settings-grid .field > select { grid-row: 2; align-self: stretch; box-sizing: border-box; width: 100%; }
.manage-quiz__settings-grid .field > .signup-form__hint { grid-row: 3; align-self: start; }
.manage-quiz__settings-grid .field > .field-error { grid-row: 3; align-self: start; }
.manage-quiz__settings-actions { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--nhgca-ink-4); }
@media (max-width: 900px) {
  /* At narrower viewports drop to two columns. The display:contents
     approach still works — auto-placement just shifts rows 4-6 into
     a new band below. */
  .manage-quiz__settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* Single-column on phones — fall back to a normal block layout
     because display:contents + 1 column doesn't buy us anything. */
  .manage-quiz__settings-grid { display: flex; flex-direction: column; gap: 16px; }
  .manage-quiz__settings-grid .field { display: flex; flex-direction: column; gap: 6px; }
}

/* Questions list — give each question a card-style row with subtle
   alternating background, so the eye can pick out one question
   without parsing tag pills. */
.manage-quiz__questions { margin-top: 48px; }
.manage-quiz__questions-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--nhgca-ink); }
.manage-quiz__questions-actions { display: flex; gap: 8px; }

/* Attach-from-bank modal: scrollable list of bank Questions with
   tick boxes. Lives inside the existing #quiz-modal-body so it
   inherits the modal chrome. */
.manage-quiz__attach { display: flex; flex-direction: column; gap: 12px; max-height: 70vh; }
.manage-quiz__attach-search { display: flex; gap: 8px; align-items: center; }
.manage-quiz__attach-search > .input-search { flex: 1 1 auto; }
.manage-quiz__attach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); padding: 6px; }
.manage-quiz__attach-item { margin: 0; }
.manage-quiz__attach-label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; cursor: pointer; border-radius: var(--nhgca-radius-2); }
.manage-quiz__attach-label:hover { background: var(--nhgca-paper-2); }
.manage-quiz__attach-label input[type="checkbox"] { margin-top: 4px; flex: none; }
.manage-quiz__attach-body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.manage-quiz__attach-text { font-weight: 600; }
.manage-quiz__attach-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.manage-quiz__attach-empty { padding: 24px; text-align: center; color: var(--nhgca-ink-2); }
.manage-quiz__attach-empty p { margin: 0 0 12px; }
.manage-quiz__qlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.manage-quiz__qitem { background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); padding: 14px 18px; transition: border-color var(--nhgca-dur-fast), box-shadow var(--nhgca-dur-fast); }
.manage-quiz__qitem:hover { border-color: var(--nhgca-primary); box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.manage-quiz__qhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.manage-quiz__qnum { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--nhgca-ink-3); }
.manage-quiz__qtag { font-size: 10px; }
.manage-quiz__qmeta { margin: 0; }
.manage-quiz__qactions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.manage-quiz__qmove { display: inline-flex; gap: 2px; }
.manage-quiz__qtext { display: block; color: var(--nhgca-ink); text-decoration: none; font-size: 14px; line-height: 1.5; }
.manage-quiz__qtext:hover { color: var(--nhgca-primary); }

/* Question editor */
.manage-quiz__answers { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; padding: 0; border: 0; }
.manage-quiz__answers legend { font-family: var(--nhgca-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nhgca-ink-3); padding: 0 0 8px; }
.manage-quiz__answer-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); }
.manage-quiz__answer-row.has-error { border-color: var(--nhgca-danger); }
.manage-quiz__answer-row input[type="radio"]:checked + .manage-quiz__answer-letter { color: var(--nhgca-primary); }
.manage-quiz__answer-letter { font-size: 11px; font-weight: 700; width: 18px; text-align: center; }
.manage-quiz__answer-row input[type="text"] { flex: 1; border: 0; background: transparent; padding: 4px 0; height: auto; }
.manage-quiz__remove-form { margin-top: 16px; }

/* Completion view */
.manage-quiz__filters { margin-bottom: 20px; }
.manage-quiz__completion-table { margin-bottom: 32px; }

/* Number/text/date/datetime inputs should fill their grid column. The
   default for ``<input type="number">`` is content-sized in Chrome,
   which made the Season input visibly narrower than the date pickers
   next to it. */
.manage-quiz__settings-grid .field input { width: 100%; box-sizing: border-box; }

/* Per-question drag handle — left-edge ☰ grip, only the cursor changes
   to "grab" so users discover the affordance. SortableJS does the
   actual drag. */
.manage-quiz__qitem { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; }
.manage-quiz__qdrag { display: inline-flex; align-items: center; justify-content: center; height: 28px; width: 24px; cursor: grab; color: var(--nhgca-ink-3); user-select: none; font-size: 16px; line-height: 1; border-radius: var(--nhgca-radius-1, 4px); }
.manage-quiz__qdrag:hover { color: var(--nhgca-primary); background: var(--nhgca-primary-soft); }
.manage-quiz__qdrag:active { cursor: grabbing; }
.manage-quiz__qbody { min-width: 0; }
.manage-quiz__qitem--ghost { opacity: 0.5; background: var(--nhgca-primary-soft); }
.manage-quiz__qempty { padding: 24px; border: 1px dashed var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); text-align: center; }

/* Bottom rhythm: the question list is the last block on this page, so
   give it room before the footer. */
.manage-quiz__qlist { margin-bottom: 64px; }

/* ─── Reusable file-input control (#396) ────────────────────────────────
   Native `<input type="file">` is ugly cross-browser. The pattern here:
   hide the input visually (still focusable + keyboard-accessible) and
   present a styled `<label>` as a tap target. Alpine on the wrapping
   element exposes the selected file name so staff get instant feedback
   without having to peek at a tiny "1 file chosen" text the browser
   renders inconsistently.

   Usage:
       <div class="file-input" x-data="{ name: '' }">
         <label class="file-input__drop">
           <input type="file" x-on:change="name = $event.target.files[0]?.name || ''" />
           <span class="file-input__icon">⬆</span>
           <span class="file-input__primary">Choose a file…</span>
           <span class="file-input__hint">or drag &amp; drop</span>
         </label>
         <p class="file-input__filename" x-text="name" x-show="name"></p>
       </div>
*/
.file-input { display: flex; flex-direction: column; gap: 8px; }
.file-input__drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 28px 24px; text-align: center;
  background: var(--nhgca-surface);
  border: 1.5px dashed var(--nhgca-ink-4);
  border-radius: var(--nhgca-radius-2);
  cursor: pointer;
  transition: border-color var(--nhgca-dur-fast), background var(--nhgca-dur-fast);
}
.file-input__drop:hover,
.file-input__drop:focus-within { border-color: var(--nhgca-primary); background: var(--nhgca-primary-soft); }
.file-input__drop input[type="file"] {
  /* visually hidden but still operable for keyboard / screen reader. */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.file-input__icon { font-family: var(--nhgca-font-display); font-size: 28px; line-height: 1; color: var(--nhgca-primary); }
.file-input__primary { font-weight: 600; color: var(--nhgca-ink); }
.file-input__hint { font-family: var(--nhgca-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nhgca-ink-3); }
.file-input__filename { margin: 0; padding: 8px 12px; font-family: var(--nhgca-font-mono); font-size: 12px; background: var(--nhgca-primary-soft); border-radius: var(--nhgca-radius-1, 4px); color: var(--nhgca-ink); }

/* ─── Staff Schedule admin (#396) ───────────────────────────────────────
   The PDF card sits directly above Season settings; without explicit
   bottom-margin both cards collide visually. The CSV import card uses
   the same .file-input control. */
/* Demo seed/clear button — lives top-right of staff dashboard. Single
   column at narrow widths so it doesn't squeeze the welcome block. */
.manage-dashboard__demo { display: flex; align-items: center; gap: 8px; }

.manage-schedule__pdf { margin-bottom: 32px; padding: 28px 32px; }
.manage-schedule__pdf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.manage-schedule__pdf-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.manage-schedule__pdf-form > .btn { align-self: flex-start; }
.manage-schedule__week-head { display: flex; align-items: baseline; gap: 16px; margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--nhgca-ink); }
.manage-schedule__week-table { margin-bottom: 24px; }
.manage-schedule__event-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.manage-schedule__events { margin-top: 48px; margin-bottom: 64px; }
.manage-schedule__import-help { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.manage-schedule__import-help code { font-family: var(--nhgca-font-mono); font-size: 12px; padding: 1px 6px; background: var(--nhgca-primary-soft); border-radius: 3px; }

/* ─── Modal (Alpine + HTMX) ────────────────────────────────────────── */
[x-cloak] { display: none !important; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 25, 20, 0.55); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow-y: auto; }
.modal { background: var(--nhgca-surface); border: 1px solid var(--nhgca-ink-4); border-radius: var(--nhgca-radius-2); width: 100%; max-width: 720px; padding: 28px 32px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--nhgca-ink-4); margin-bottom: 20px; }
.modal__title { margin: 0; }
.modal__close { background: transparent; border: 0; font-size: 20px; line-height: 1; padding: 4px 8px; cursor: pointer; color: var(--nhgca-ink-3); border-radius: var(--nhgca-radius-1, 4px); }
.modal__close:hover { color: var(--nhgca-ink); background: var(--nhgca-ink-4); }
.modal__actions { display: flex; gap: 12px; justify-content: flex-end; padding-top: 20px; border-top: 1px solid var(--nhgca-ink-4); margin-top: 24px; }
.modal__body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--nhgca-ink-2); }
.modal--confirm { max-width: 480px; }