/* NextStep Education — shared design system (2026-11 redesign).
   One family (Archivo, width + weight axes), the two logo colours, square
   corners. This file owns tokens, base type, controls and the site shell.
   The homepage lives in community-home.css; operational views keep
   components-refresh.css and inherit everything here through tokens. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("/assets/fonts/Archivo-Latin-Variable.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Logo colours */
  --navy: #0b2a5b;
  --navy-deep: #061a3d;
  --green: #3a7a21;
  --lime: #8cc63f;
  --lime-soft: #e7f2d6;

  /* Roles */
  --ink: #0b2a5b;
  --ink-soft: #27324a;
  --muted: #56627a;
  --canvas: #ffffff;
  --paper: #ffffff;
  --mist: #eef2f7;
  --paper-warm: var(--mist);
  --line: #d5dce7;
  --line-strong: #9aa7bd;
  --brand: #0b2a5b;
  --brand-strong: #061a3d;
  --brand-soft: #e6ecf5;
  --accent: var(--green);
  --accent-strong: #2b5d17;
  --accent-soft: var(--lime-soft);
  --tint: #d7e9b8;
  --surface-soft: var(--mist);
  --linen: var(--mist);
  --footer-bg: #0b2a5b;
  --footer-ink: #ffffff;
  --footer-muted: #b8c6de;
  --on-brand: #ffffff;
  --focus: #3a7a21;
  --positive: #2b6a1f;
  --positive-soft: #e7f2d6;
  --warning: #7a5410;
  --warning-soft: #fbf0d6;
  --danger: #a3202d;
  --danger-soft: #f9e3e4;
  --primary: var(--navy);
  --primary-light: #34507f;
  --shadow-float: 0 1px 0 var(--line), 0 18px 40px -18px rgb(11 42 91 / 28%);
  --shadow-card: none;
  --shadow-sm: none;
  --shadow: none;
  --control-radius: 0;
  --panel-radius: 0;
  --shell: 78rem;
  --nav-height: 4.5rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --font-sans: "Archivo", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-stretch: 80%;
}

html { color-scheme: light; background: var(--canvas); }
body {
  background: var(--canvas);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-stretch: 100%;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
html:root body :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-sans); }
h1, h2, h3 { color: var(--ink); font-weight: 750; font-stretch: var(--display-stretch); }
h4 { color: var(--ink); font-weight: 700; }
.heading-phrase { display: inline-block; }
h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.04; letter-spacing: -.012em; }
h3 { letter-spacing: -.005em; }
html:root body.zh :is(h1, h2, h3, h4) { font-stretch: 100%; letter-spacing: 0; line-height: 1.3; font-weight: 700; }
html:root body.zh :is(p, li, dd) { line-height: 1.85; }
html:root body :is(h1, h2, h3, h4) { overflow-wrap: break-word; }
p { color: var(--ink-soft); }
::selection { color: var(--navy-deep); background: var(--tint); }
button, a, summary, input, select, textarea { -webkit-tap-highlight-color: rgb(11 42 91 / 12%); }
:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px; }

/* Square corners everywhere. Only true circles that carry meaning keep
   their shape: loading spinners and small status dots. */
html:root body *:not(.ns-spinner, .guide-spinner, .guide-load-mark, [class*="spinner"], [class$="-dot"], [class*="-dot "]),
html:root body *:not(.ns-spinner, .guide-spinner, .guide-load-mark, [class*="spinner"], [class$="-dot"], [class*="-dot "])::before,
html:root body *:not(.ns-spinner, .guide-spinner, .guide-load-mark, [class*="spinner"], [class$="-dot"], [class*="-dot "])::after {
  border-radius: 0 !important;
}

/* Forms */
html:root body :is(.form-label, .form-group > label) { line-height: 1.5; margin-bottom: .45rem; color: var(--ink); font-weight: 600; }
html:root body :is(.hint, .form-hint, .form-help, .form-privacy-note, .privacy-note, .privacy-box p, .consent-note, .consent-row label, .nonprofit-login-note) { font-size: .875rem; line-height: 1.65; }
html:root body :is(.form-input, .form-select, .form-textarea) { font-size: 1rem; line-height: 1.6; }
html:root body:is([data-page="join"], [data-page="volunteer"], [data-page="account"]) :is(input, textarea, select):not([type="checkbox"], [type="radio"], [type="color"]) { font-size: 1rem; line-height: 1.6; }
html:root body main :is(input, textarea, select):not([type="checkbox"], [type="radio"], [type="color"], [type="range"]) {
  border: 1px solid var(--line-strong);
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
}
html:root body main :is(input, textarea, select):not([type="checkbox"], [type="radio"], [type="color"], [type="range"]):hover { border-color: var(--ink-soft); }
html:root body main :is(input, textarea, select):not([type="checkbox"], [type="radio"], [type="color"], [type="range"]):focus {
  border-color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--lime);
  outline: none;
}
html:root body :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--navy); }
/* Safari's native menu face ignores the requested control height. */
html:root body[data-page] main select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  min-height: 2.75rem;
  padding-inline-end: 2.25rem;
  background-image: url('/assets/select-chevron.svg');
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: .75rem .5rem;
}

/* Buttons: flat, square, heavy label. Primary is navy; secondary is an
   outlined navy box. No lift, no glow. */
.btn {
  gap: .65rem;
  min-height: 2.875rem;
  padding: .7rem 1.2rem;
  border: 2px solid var(--brand);
  font-family: var(--font-sans);
  font-weight: 650;
  font-size: .95rem;
  letter-spacing: 0;
  box-shadow: none;
  transform: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { transform: none; box-shadow: none; }
.btn-primary, .btn-primary:hover { color: var(--on-brand); box-shadow: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn-secondary, .btn-outline { color: var(--brand); background: transparent; border-color: var(--brand); box-shadow: none; }
.btn-secondary:hover, .btn-outline:hover { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
/* Older page styles (the admin page's inline sheet) recolor only the text on
   hover, which left the label the same color as the fill. Keep text and fill
   paired everywhere, and leave disabled buttons unfilled. */
html:root .btn:is(.btn-secondary, .btn-outline):hover:not(:disabled) { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
html:root .btn:is(.btn-secondary, .btn-outline):disabled { color: var(--brand); background: transparent; border-color: var(--brand); }
.btn:active { transform: translateY(1px); }
.btn-lg { min-height: 3.25rem; padding: .85rem 1.5rem; font-size: 1rem; }
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.text-action { color: var(--brand); font-size: .95rem; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.text-action:hover { color: var(--brand-strong); text-decoration-thickness: 2px; }

/* Inner page headers: left-aligned, a thick navy rule above, no decoration. */
.page-hero, .subject-page-hero { background: var(--canvas); background-image: none; text-align: left; }
.page-hero::before, .page-hero::after, .cta-banner::before, .cta-banner::after { display: none; }
html:root .page-hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
html:root .page-hero .page-hero-inner { max-width: 52rem; margin-inline: 0; text-align: left; padding-top: 1.5rem; border-top: 6px solid var(--navy); }
/* The page title says what the page is; the old badge above it repeated it. */
html:root .page-hero .page-hero-inner > .badge { display: none; }
/* About values are not a sequence, so they carry no numbers. */
html:root body[data-page="about"] .value-icon { display: none; }
html:root .page-hero h1 { font-size: clamp(2.4rem, 5vw, 4.25rem); line-height: 1; letter-spacing: -.015em; margin-bottom: 1.1rem; }
html:root body.zh .page-hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.25; }
html:root .page-hero p { max-width: 40rem; margin-inline: 0; font-size: 1.125rem; line-height: 1.6; color: var(--ink-soft); }
html:root .section-header.centered { text-align: left; margin-inline: 0; max-width: 48rem; }
html:root .section-header.centered p { margin-inline: 0; }
html:root .divider { width: 3rem; height: 6px; margin: 0 0 1.25rem; background: var(--navy); }
html:root .divider-center { margin-inline: 0; }
html:root :is(.badge, .badge-primary, .badge-gold, .badge-success, .guide-card-badge, .resource-tag) {
  border-radius: 0;
  font-family: var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}
html:root .badge { padding: .3rem .6rem; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font-size: .8rem; font-weight: 600; }

/* Cards and panels: hairline box, no shadow; hover only darkens the rule. */
html:root :is(.card, .value-card, .team-card, .request-card, .guide-card, .resource-card, .subject-card, .event-card, .forum-card, .info-card, .stat-card, .panel) {
  box-shadow: none !important;
}
html:root :is(.value-card, .team-card, .request-card, .info-card, .panel) { border: 1px solid var(--line); background: var(--paper); }
html:root .value-icon {
  width: auto; height: auto; margin-bottom: .75rem;
  background: none; color: var(--green);
  font-size: .95rem; font-weight: 750; font-variant-numeric: tabular-nums;
}

/* ─── Navigation ─────────────────────────────────────────────────────── */
/* Nav, footer and homepage share one content edge. */
html:root :is(.nav, .footer) > .container {
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
html:root .nav,
html:root .nav.scrolled {
  height: var(--nav-height);
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.nav-inner { gap: 1.75rem; }
html:root .nav-logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; }
html:root .nav-logo-icon { width: 2.6rem; height: auto; aspect-ratio: 1024 / 450; border: 0; background: none; color: var(--navy); flex: none; }
html:root .nav-wordmark { display: inline; white-space: nowrap; color: var(--ink); font-size: 1.2rem; font-weight: 800; font-stretch: 78%; letter-spacing: -.01em; line-height: 1; }
html:root .nav-wordmark .highlight { color: var(--ink); font-weight: 450; font-stretch: 78%; }
.nav-links { gap: .25rem; }
html:root .nav-links > a,
html:root .nav-cluster > summary {
  position: relative;
  padding: .55rem .7rem;
  color: var(--ink-soft) !important;
  font-size: .92rem !important;
  font-weight: 560 !important;
  background: transparent !important;
}
html:root .nav-links > a[data-nav-domain]:hover, html:root .nav-links > a[data-nav-domain].active,
html:root .nav-about-link:hover, html:root .nav-about-link.active,
html:root .nav-cluster > summary:hover, html:root .nav-cluster.active > summary, html:root .nav-cluster[open] > summary {
  color: var(--ink) !important;
  background: transparent !important;
  text-decoration: none;
}
html:root .nav-links > a.active::after,
html:root .nav-cluster.active > summary::after {
  content: "";
  position: absolute;
  left: .7rem; right: .7rem; bottom: -.15rem;
  height: 3px;
  background: var(--lime);
}
html:root .nav :is(.nav-links > a, .nav-cluster > summary, .nav-account-link, .language-menu-trigger, .nav-hamburger),
html:root .nav :is(.nav-links > a, .nav-cluster > summary):is(:hover, .active) {
  border: 0;
  box-shadow: none;
  text-decoration: none;
}
html:root .nav :is(.nav-notification-link, .nav-admin-link) { border: 0; box-shadow: none; }
.nav-actions { gap: .9rem; }
html:root .language-menu-trigger { border: 0; padding-inline: .35rem; background: transparent; color: var(--ink); }
html:root .nav-actions > .nav-account-link { color: var(--ink); font-size: .92rem; font-weight: 560; }
html:root .nav-actions > .nav-account-link:hover { text-decoration: underline; text-underline-offset: .25em; }
html:root .nav-actions > .nav-request-link {
  display: inline-flex; align-items: center;
  min-height: 2.6rem;
  padding-inline: 1.1rem;
  border: 0;
  background: var(--brand);
  color: var(--on-brand);
  font-size: .9rem;
  font-weight: 650;
  box-shadow: none;
}
html:root .nav-actions > .nav-request-link:hover { background: var(--brand-strong); color: var(--on-brand); box-shadow: none; }
html:root :is(.nav-popover, .language-menu-popover) {
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);
  background: var(--paper);
  box-shadow: var(--shadow-float);
}
html:root .nav-popover a { color: var(--ink); font-weight: 600; }
html:root .nav-popover a small { color: var(--muted); font-weight: 400; }
html:root .nav-popover a:hover, html:root .nav-popover a.active { background: var(--mist); color: var(--ink); }
html:root .lang-btn.active { background: var(--mist); color: var(--ink); }
html:root .nav-hamburger { border: 1px solid var(--line-strong); background: transparent; }
html:root .nav-hamburger span { background: var(--ink); }
html:root .nav-mobile { top: var(--nav-height); background: var(--canvas); }
html:root .nav-mobile-head p { color: var(--muted); font-size: .9rem; font-weight: 600; }
html:root .nav-mobile-grid h2 { color: var(--green); font-size: .85rem; font-weight: 700; font-stretch: 100%; letter-spacing: 0; text-transform: none; }
html:root .nav-mobile a { color: var(--ink); }
html:root .nav-mobile a:hover, html:root .nav-mobile a.active { color: var(--ink); background: var(--mist); }
html:root .nav-mobile-cta { background: var(--brand); color: var(--on-brand) !important; box-shadow: none; font-weight: 650; }
.nav-environment-slot a, .nav-environment-link { box-shadow: none; }

/* ─── Closing invitations on inner pages ─────────────────────────────── */
.cta-banner { padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 0; background: var(--lime); }
.cta-banner-inner { border: 0; background: transparent; box-shadow: none; text-align: left; margin-inline: 0; }
.cta-banner h2 { color: var(--navy-deep); font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 750; }
.cta-banner p { color: var(--navy-deep); font-size: 1.05rem; }
.cta-banner .btn-primary { color: #fff; border-color: var(--navy); background: var(--navy); }
.cta-banner .btn-primary:hover { color: #fff; border-color: var(--navy-deep); background: var(--navy-deep); }
body[data-page] .cta-primary-row [data-cta-kind="volunteer"] { padding-inline: 1.4rem; color: #fff; border-color: var(--navy); background: var(--navy); }
body[data-page] .cta-primary-row [data-cta-kind="volunteer"]:hover { color: #fff; border-color: var(--navy-deep); background: var(--navy-deep); }
html:root body[data-page="about"] .cta-primary-row [data-cta-kind="volunteer"] {
  width: fit-content;
  min-height: 3.25rem;
  padding: .85rem 1.5rem;
  gap: .85rem;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
}
html:root body[data-page="about"] .cta-primary-row [data-cta-kind="volunteer"]:hover { border-color: var(--navy-deep); background: var(--navy-deep); color: #fff; }
.cta-banner .cta-or-divider, html[data-site-environment="beta"] .cta-or-divider { color: var(--navy-deep); border-color: rgb(6 26 61 / 35%); }
.cta-banner .cta-email { color: var(--navy-deep); font-size: .95rem; font-weight: 600; text-decoration: underline; text-underline-offset: .22em; }
.cta-banner .cta-email:hover, .cta-banner .cta-email:focus-visible { color: var(--navy-deep); text-decoration-thickness: 2px; }
.cta-banner :focus-visible { outline-color: var(--navy-deep) !important; }

/* ─── Footer: the one solid navy band on every page ──────────────────── */
html:root .footer { border-top: 0; background: var(--footer-bg); color: var(--footer-ink); }
html:root .footer .nav-logo { color: var(--footer-ink); font-size: 1.15rem; font-weight: 750; font-stretch: 80%; }
html:root .footer .nav-logo-icon { color: #fff; }
.footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 3rem; padding-block: 3.5rem 3rem; }
html:root .footer-brand p { max-width: 34ch; color: var(--footer-muted); font-size: .9rem; line-height: 1.7; }
html:root .footer-brand .footer-email { color: var(--footer-ink); font-size: .9rem; text-decoration: underline; text-underline-offset: .22em; }
html:root .footer-col h5 { margin-bottom: .9rem; color: var(--lime); font-size: .85rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.footer-col li { padding-block: .3rem; border: 0; }
html:root .footer-col ul li a { color: var(--footer-ink); font-size: .9rem; }
html:root .footer-col ul li a:hover { color: var(--footer-ink); text-decoration: underline; text-underline-offset: .25rem; }
html:root .footer-bottom { gap: 1rem; border-color: rgb(255 255 255 / 18%); padding-block: 1.2rem; color: var(--footer-muted); }
html:root .footer-bottom p { color: var(--footer-muted); font-size: .8rem; }
.theme-control { display: inline-flex; align-items: center; gap: .6rem; color: var(--footer-muted); font-size: .8rem; }
html:root .theme-control select { width: auto; min-height: 2.25rem; padding: .35rem 1.6rem .35rem .55rem; border: 1px solid rgb(255 255 255 / 35%); background-color: transparent; color: var(--footer-ink); font-size: .8rem; }
html:root .theme-control select option { color: #0b2a5b; }
html:root .footer :focus-visible { outline-color: var(--lime) !important; }

/* Previously hardcoded accent surfaces now follow the same tokens. */
html:root :is(.badge-primary, .guide-card-badge, .resource-tag) { border-color: var(--line-strong); }
html:root :is(.form-group input, .form-group select, .form-group textarea, input[type="search"]):focus { box-shadow: inset 0 -3px 0 var(--lime); }
html:root .resource-mode-reset { text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); }
html:root :is(.badge-success, .form-status[data-tone="success"]) { border-color: color-mix(in srgb, var(--positive) 35%, transparent); color: var(--positive); }
html:root :is(.badge-announcement, .form-status[data-tone="error"]) { border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); }
html:root .badge-gold { color: var(--warning); }

@media (max-width: 70rem) {
  .nav-inner { gap: .9rem; }
  html:root .nav-wordmark { font-size: 1.1rem; }
  .nav-actions { gap: .5rem; }
  html:root .nav-actions > .nav-request-link { padding-inline: .85rem; }
  .footer-grid { gap: 2rem; }
}
@media (max-width: 48rem) {
  :root { --nav-height: 4.1rem; }
  html:root .nav .nav-wordmark { display: inline; font-size: 1.1rem; }
  html:root .nav-actions > .nav-request-link { min-height: 2.4rem; padding-inline: .8rem; white-space: nowrap; font-size: .85rem; }
  .nav-mobile-grid h2 { margin-bottom: .5rem; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1rem; padding-block: 2.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  html:root .footer-brand p { max-width: 45ch; }
  .footer-bottom { align-items: start; flex-wrap: wrap; }
}
@media (max-width: 25rem) {
  html:root .nav .nav-wordmark .highlight { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col:last-child { grid-column: 1 / -1; }
}

/* ─── Detail pass ─────────────────────────────────────────────────────── */
/* Labels are sentence case: no tracked-out ALL CAPS anywhere. */
html:root body *:not(abbr, code, kbd, samp) { text-transform: none !important; }
html:root body :is([class*="eyebrow"], [class*="kicker"], [class*="label"], [class*="tag"], .badge, th, dt, small) { letter-spacing: 0 !important; }
html:root body .eyebrow { color: var(--green) !important; font-size: .9rem; font-weight: 700; }
/* Buttons say what they do; the trailing arrow added nothing. Arrows that
   mark external links (↗) are left alone. */
html:root body :is(.btn, .text-action, .nav-mobile-cta) > span[aria-hidden="true"]:last-child:not(:first-child) { display: none; }
/* Hard-coded blues left in page-local styles now follow the palette. */
html:root body[data-page="updates"] .calendar-event { background: var(--brand-soft); color: var(--ink); }
html:root body[data-page="updates"] .calendar-day.today .calendar-day-number { background: var(--brand); color: var(--on-brand); }
html:root body[data-page="updates"] .calendar-day.selected { box-shadow: inset 0 0 0 2px var(--brand); }
html:root body[data-page="updates"] .mobile-agenda-day { border-color: var(--line); }
html:root body[data-page="updates"] .mobile-agenda-day-header { background: var(--mist); }
html:root body[data-page="updates"] .mobile-agenda-day-date { color: var(--ink); }
html:root body[data-page="updates"] .mobile-agenda-today { background: var(--lime); color: #061a3d; }
html:root body :is(.login-prompt, .form-status[data-tone="info"]) { border-color: var(--line); background: var(--mist); color: var(--ink); }
html:root body .post-children { border-left-color: var(--line-strong); }
html:root body[data-page="updates"] .calendar-toolbar-end { display: flex; align-items: center; gap: .5rem; }
html:root body[data-page="updates"] .calendar-today { min-height: 44px; padding: 0 .9rem; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
html:root body[data-page="updates"] .calendar-today:hover { border-color: var(--ink); background: var(--mist); }
html:root body[data-page="admin"] .schedule-date-hint { display: block; margin-top: .3rem; color: var(--muted); font-size: .75rem; line-height: 1.4; }
/* Guide byline: who wrote it and when, under the guide title. */
html:root .page-hero .guide-byline { margin-top: 1.25rem; padding-top: .9rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; line-height: 1.6; }
html:root .page-hero .guide-byline [data-byline-author] { color: var(--ink); font-weight: 650; }
html:root body[data-page="admin"] .guide-byline-admin { display: grid; gap: 1.25rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 4px solid var(--navy); }
html:root body[data-page="admin"] .guide-byline-form { display: grid; gap: .9rem; justify-items: start; padding: 1.1rem; border: 1px solid var(--line); background: var(--paper); }
html:root body[data-page="admin"] .guide-byline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1rem; width: 100%; }
html:root body[data-page="admin"] .guide-byline-grid input { width: 100%; }
@media (max-width: 48rem) { html:root body[data-page="admin"] .guide-byline-grid { grid-template-columns: 1fr; } }
/* Legacy "gold" accents on working pages (question bank buttons, favourites,
   difficulty chips) become the logo's green. Warning badges keep their own
   semantic colour above. */
:root { --gold: var(--green); --gold-dark: #2b5d17; --gold-bg: var(--lime-soft); --primary-dark: var(--navy-deep); --primary-bg: var(--brand-soft); }
html:root body[data-page="practice"] .diff-badge { border-radius: 0; font-weight: 650; }
html:root body[data-page="practice"] .progress-fill { background: var(--green); }
html:root body[data-page="practice"] .prac-btn { box-shadow: none !important; transform: none !important; font-weight: 650; }
/* Jump links on the support page are a table of contents, not steps. */
html:root body[data-page="programs"] .support-jump a > span:first-child { display: none; }
html:root body[data-page="programs"] .support-jump a { font-weight: 600; }
/* Question lists inside guides */
html:root .guide-faq-list { max-width: 52rem; border-bottom: 1px solid var(--line); }
html:root .guide-faq-list details { border-top: 1px solid var(--line); }
html:root .guide-faq-list details:first-child { border-top: 2px solid var(--navy); }
html:root .guide-faq-list summary { padding-block: 1.1rem; color: var(--ink); font-size: 1.1rem; font-weight: 650; cursor: pointer; }
html:root .guide-faq-list details p { max-width: 62ch; padding-bottom: 1.2rem; margin: 0; line-height: 1.65; }
html:root .guide-faq-source { margin-top: 1rem; color: var(--muted); font-size: .9rem; }
html:root .guide-faq-source a { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }
/* Numbers that line up read better with fixed-width digits. */
html:root body :is(table, .calendar-day-number, .timeline-date, [data-site-stat]) { font-variant-numeric: tabular-nums; }
/* Long words and URLs in user posts wrap instead of widening the page. */
html:root body :is(.post-body, .thread-body, .forum-post, .reply-body) { overflow-wrap: anywhere; }

/* Team photos fill the round avatar; initials stay underneath as a fallback. */
html:root :is(.team-avatar, .ns-member-avatar).has-photo { position: relative; overflow: hidden; }
html:root :is(.team-avatar, .ns-member-avatar).has-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: inherit; object-fit: cover; display: block;
}

/* Team cards: the main title takes its position color, mixed toward the
   text color (the same mix the chips use) so it stays readable in both themes. */
html:root body[data-page="about"] .team-profile-card.has-role-color .team-profile-name .role {
  color: color-mix(in srgb, var(--team-role-color) 70%, var(--ink));
  font-weight: 600;
}
html:root body[data-page="about"] .team-profile-summary .team-group-list { justify-content: center; gap: .4rem; }
/* Chips mix their color into the page surface, so they also read on the dark theme. */
html:root :is(.team-position-chip, .team-group-chip) {
  border-color: color-mix(in srgb, var(--team-chip-color, #64748B) 40%, var(--paper));
  background: color-mix(in srgb, var(--team-chip-color, #64748B) 12%, var(--paper));
  color: color-mix(in srgb, var(--team-chip-color, #64748B) 70%, var(--ink));
}

/* Empty calendar cells (before the 1st and after the last day) follow the
   theme instead of the old fixed light gray. */
html:root :is(.calendar-blank, .sched-cal-blank) { background: var(--mist); border-color: var(--line); }

/* ─── Dark appearance: deep navy, lime actions ───────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eef3fb; --ink-soft: #c9d3e3; --muted: #9aa8bf;
    --canvas: #08142b; --paper: #0e1c37; --mist: #12223f; --paper-warm: #12223f;
    --line: #243658; --line-strong: #3d527a;
    --brand: #a8d65a; --brand-strong: #c4e68a; --brand-soft: #1a2c4d;
    --accent: #a8d65a; --accent-strong: #c4e68a; --accent-soft: #1c3320;
    --tint: #2d4a1f; --surface-soft: #12223f; --linen: #12223f;
    --footer-bg: #050e20; --footer-ink: #eef3fb; --footer-muted: #9aa8bf;
    --focus: #a8d65a; --on-brand: #061a3d;
    --positive: #a8d5ad; --positive-soft: #1c3320;
    --warning: #e3c17b; --warning-soft: #3a3020;
    --danger: #f3aaa1; --danger-soft: #45242a;
    --primary: #a8d65a; --primary-light: #c4e68a;
  --gold: #a8d65a; --gold-dark: #c4e68a; --gold-bg: #1c3320; --primary-dark: #c4e68a; --primary-bg: #1a2c4d;
    --shadow-float: 0 18px 40px -18px rgb(0 0 0 / 60%);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .nav-logo-icon { color: #eef3fb; }
}
:root[data-theme="dark"] {
  --ink: #eef3fb; --ink-soft: #c9d3e3; --muted: #9aa8bf;
  --canvas: #08142b; --paper: #0e1c37; --mist: #12223f; --paper-warm: #12223f;
  --line: #243658; --line-strong: #3d527a;
  --brand: #a8d65a; --brand-strong: #c4e68a; --brand-soft: #1a2c4d;
  --accent: #a8d65a; --accent-strong: #c4e68a; --accent-soft: #1c3320;
  --tint: #2d4a1f; --surface-soft: #12223f; --linen: #12223f;
  --footer-bg: #050e20; --footer-ink: #eef3fb; --footer-muted: #9aa8bf;
  --focus: #a8d65a; --on-brand: #061a3d;
  --positive: #a8d5ad; --positive-soft: #1c3320;
  --warning: #e3c17b; --warning-soft: #3a3020;
  --danger: #f3aaa1; --danger-soft: #45242a;
  --primary: #a8d65a; --primary-light: #c4e68a;
  --gold: #a8d65a; --gold-dark: #c4e68a; --gold-bg: #1c3320; --primary-dark: #c4e68a; --primary-bg: #1a2c4d;
  --shadow-float: 0 18px 40px -18px rgb(0 0 0 / 60%);
  color-scheme: dark;
}
:root[data-theme="dark"] .nav-logo-icon { color: #eef3fb; }
:is(:root[data-theme="dark"]) .page-hero .page-hero-inner { border-top-color: var(--lime); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-hero .page-hero-inner { border-top-color: var(--lime); }
  :root:not([data-theme="light"]) .divider { background: var(--lime); }
}
:root[data-theme="dark"] .divider { background: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}