/* ============================================================================
   Brute Info — css/pages/support.css
   Shared page styles for the three support surfaces:
     help.html (.hc-*) · faq.html (.faq-*) · 404.html (.nf-*)

   Nothing shared is restyled: every rule below is scoped to a page-local
   class. Every colour, radius, shadow, duration, size and space is a token
   from css/tokens.css — there is not one literal value in this file except
   the geometry of the hand-drawn 404 artwork.
   ========================================================================== */

/* ==========================================================================
   1. SHARED SUPPORT PIECES
   ========================================================================== */

/* The big search panel that opens help.html and faq.html. */
.sup-search {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
}
.sup-search::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-mesh);
  opacity: 0.4;
  pointer-events: none;
}
.sup-search-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
/* One step below .page-title on purpose. The panel sits directly under the
   <h1>, and on --fs-4xl the two titles were the same size and fought each
   other. Tracking --fs-4xl (which is itself fluid) at 0.8 keeps the panel
   title under the h1 at every width, floored at --fs-2xl so it never drops
   below the category headings and capped at --fs-3xl on wide screens —
   the 38 → 30 → 24 → 16 ladder the rest of the page already uses. */
.sup-search-title {
  font-size: clamp(var(--fs-2xl), calc(var(--fs-4xl) * 0.8), var(--fs-3xl));
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.sup-search .field { text-align: left; }
.sup-search-field .input {
  min-height: var(--control-h-lg);
  font-size: var(--fs-lg);
}
.sup-search-status {
  /* Reserved so the line never collapses between two status messages. */
  min-height: var(--space-5);
  font-size: var(--fs-md);
  color: var(--text-muted);
}
.sup-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--fs-md);
  /* --text-subtle drops under 4.5:1 on --surface in both themes; muted holds. */
  color: var(--text-muted);
}

/* "Still need help?" contact panel — used on help.html and faq.html. */
.sup-help-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-10));
  align-items: start;
}
@media (max-width: 860px) {
  .sup-help-panel { grid-template-columns: minmax(0, 1fr); }
}
.sup-channel-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sup-channel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.sup-channel-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.sup-channel-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  /* 11–12px on --surface-2: --text-subtle measures 3.3:1 light / 4.4:1 dark. */
  color: var(--text-muted);
}
.sup-channel-value {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text);
  overflow-wrap: anywhere;
}
.sup-channel-note { font-size: var(--fs-md); color: var(--text-muted); }

/* ==========================================================================
   2. HELP CENTRE — category grid
   ========================================================================== */
/* Six tiles. auto-fit gave four across at container-wide and left a ragged
   two-tile second row, so the columns are pinned to the site's 3-up tile
   rhythm (home.css, courses.css) and step down 3 → 2 → 1. */
.hc-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tile-gap);
}
@media (max-width: 1000px) {
  .hc-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .hc-cat-grid { grid-template-columns: minmax(0, 1fr); }
}
.hc-cat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-out);
}
.hc-cat:hover,
.hc-cat:focus-visible {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.hc-cat:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}
.hc-cat-name {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.hc-cat-desc { font-size: var(--fs-md); color: var(--text-muted); }
.hc-cat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--primary);
}

/* ==========================================================================
   3. HELP CENTRE — article sections
   ========================================================================== */
.hc-section { scroll-margin-top: calc(var(--header-h) + var(--space-8)); }
.hc-section + .hc-section { margin-top: var(--space-12); }
.hc-section[hidden] { display: none; }

.hc-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  /* --border-subtle sits on --surface; against the page --bg it disappears. */
  border-bottom: 1px solid var(--border);
}
.hc-section-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.hc-section-count {
  font-size: var(--fs-md);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.hc-article { scroll-margin-top: calc(var(--header-h) + var(--space-8)); }
.hc-article[hidden] { display: none; }
.hc-article .accordion-title { display: block; }
.hc-article-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* Article body — a compact prose block that never fights .prose. */
.hc-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  max-width: 68ch;
}
.hc-body h5 {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: var(--tracking-tight);
}
.hc-body ol,
.hc-body ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
}
.hc-body li { line-height: var(--lh-relaxed); }
.hc-body strong { color: var(--text); font-weight: var(--fw-semibold); }

/* The button row under an article body, and under the copy in the
   "Still need help?" / "Not covered here?" panels. Unscoped on purpose —
   scoped to .hc-body it left the panel rows as plain inline text with a
   word space between the buttons instead of the token gap. */
.hc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.hc-body .hc-actions { padding-top: var(--space-1); }

/* Small definition table used inside a couple of articles. */
.hc-facts {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.hc-facts > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
.hc-facts dt { color: var(--text-muted); font-size: var(--fs-md); margin: 0; }
.hc-facts dd {
  margin: 0;
  font-weight: var(--fw-semibold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hc-facts .is-total { border-top: 1px solid var(--border); padding-top: var(--space-2); }

.hc-noresult[hidden] { display: none; }

/* ==========================================================================
   4. FAQ
   ========================================================================== */
.faq-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
}
.faq-toolbar-status {
  font-size: var(--fs-md);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.faq-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-10));
  align-items: start;
}
/* With the rail retired (a search that matched nothing) the answers column
   takes the full width rather than being squeezed into the 15rem rail track. */
.faq-layout:has(> .faq-rail[hidden]) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .faq-rail { position: static; }
}
.faq-rail {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
}
.faq-rail-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.faq-rail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 900px) {
  .faq-rail-list { flex-direction: row; flex-wrap: wrap; }
}
.faq-rail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-h-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-decoration: none;
}
.faq-rail-link:hover,
.faq-rail-link:focus-visible { background: var(--surface-2); color: var(--text); text-decoration: none; }
.faq-rail-link:active { background: var(--surface-3); }
.faq-rail-link.is-active { background: var(--primary-soft); color: var(--primary-soft-text); }
.faq-rail-count { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.faq-rail-link:hover .faq-rail-count,
.faq-rail-link.is-active .faq-rail-count { color: inherit; }

.faq-group { scroll-margin-top: calc(var(--header-h) + var(--space-8)); }
.faq-group + .faq-group { margin-top: var(--space-12); }
.faq-group[hidden] { display: none; }
/* Matches .hc-section-head — the two support surfaces share one
   category-heading treatment. Same rule, same rhythm, same rule colour:
   --border-subtle vanishes against the page --bg in both themes. */
.faq-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.faq-group-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.faq-group-sub { font-size: var(--fs-md); color: var(--text-muted); }

.faq-item { scroll-margin-top: calc(var(--header-h) + var(--space-6)); }
.faq-item[hidden] { display: none; }
.faq-item.is-linked { border-color: var(--primary); box-shadow: var(--shadow-brand); }
.faq-item .accordion-title { display: block; }

.faq-answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  max-width: 68ch;
}
.faq-answer ul,
.faq-answer ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
}
.faq-answer strong { color: var(--text); font-weight: var(--fw-semibold); }

/* Answer footer: permalink + was this helpful */
.faq-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.faq-vote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-md);
  color: var(--text-muted);
}
.faq-vote-btn[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-soft-text);
}
.faq-vote-thanks {
  font-size: var(--fs-md);
  /* --success is a 3.8:1 fill colour in light; the soft-text ramp is the
     readable one for 14px copy on --surface. */
  color: var(--success-soft-text);
  font-weight: var(--fw-medium);
}
.faq-permalink {
  margin-left: auto;
  font-size: var(--fs-md);
}

/* ==========================================================================
   5. 404
   ========================================================================== */
.nf-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: center;
  width: 100%;
}
@media (max-width: 880px) {
  .nf-wrap { grid-template-columns: minmax(0, 1fr); }
  .nf-art { order: -1; }
}
.nf-copy { display: flex; flex-direction: column; gap: var(--space-5); }
.nf-code {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
}
.nf-title {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
}
.nf-lead { font-size: var(--fs-lg); color: var(--text-muted); line-height: var(--lh-relaxed); max-width: 46ch; }
.nf-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.nf-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nf-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-decoration: none;
}
.nf-link:hover,
.nf-link:focus-visible { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nf-link:active { background: var(--surface-3); }
.nf-link svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; color: var(--text-muted); }

/* --- the artwork: a graph node whose edge has been cut ------------------- */
.nf-art { display: flex; justify-content: center; }
.nf-art svg { width: min(100%, 30rem); height: auto; }

.nf-node-fill { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.nf-node-live { fill: var(--primary-soft); stroke: var(--primary); stroke-width: 2; }
.nf-node-lost { fill: var(--danger-soft); stroke: var(--danger); stroke-width: 2; }
.nf-node-text { fill: var(--text-muted); font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.nf-node-text-live { fill: var(--primary); }
.nf-node-text-lost { fill: var(--danger); }
.nf-edge { stroke: var(--border-strong); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.nf-edge-live { stroke: var(--primary); }
.nf-grid-line { stroke: var(--grid-line); stroke-width: 1; }
.nf-spark { stroke: var(--danger); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.nf-cut { stroke: var(--danger); stroke-width: 3; stroke-linecap: round; fill: none; }

/* The severed edge: a dashed stub that retracts, and a node that drifts. */
.nf-cut-a {
  stroke-dasharray: 7 9;
  animation: nf-retract var(--dur-slower) var(--ease-out) infinite alternate;
}
.nf-cut-b {
  stroke-dasharray: 7 9;
  animation: nf-retract var(--dur-slower) var(--ease-out) infinite alternate-reverse;
}
.nf-drift { animation: nf-drift 4.8s var(--ease-standard) infinite alternate; }
.nf-flicker { animation: nf-flicker 2.6s var(--ease-standard) infinite; }
.nf-pulse { animation: nf-pulse 3.2s var(--ease-standard) infinite; transform-origin: center; }

@keyframes nf-retract {
  from { stroke-dashoffset: 0; opacity: 0.9; }
  to   { stroke-dashoffset: 24px; opacity: 0.35; }
}
@keyframes nf-drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(9px, 12px) rotate(5deg); }
}
@keyframes nf-flicker {
  0%, 44%, 100% { opacity: 0.15; }
  50%, 62%      { opacity: 1; }
  70%           { opacity: 0.35; }
}
@keyframes nf-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* base.css already disables animation under prefers-reduced-motion and
   data-motion="reduced"; this only makes the still frame read correctly. */
@media (prefers-reduced-motion: reduce) {
  .nf-flicker { opacity: 1; }
}
:root[data-motion="reduced"] .nf-flicker { opacity: 1; }

.nf-search { display: flex; flex-direction: column; gap: var(--space-2); }
.nf-search-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.nf-search-row .field-control { flex: 1 1 14rem; }