/**
 * help.css — the help centre's own stylesheet.
 *
 * This surface is deliberately self-contained. It does not load the dashboard's
 * style.css or the shared revival-ui stylesheet, for two reasons:
 *
 *   1. It is a documentation site, not an operational surface. It has no cards,
 *      no rosters, no row grammar, no modals — almost none of style.css applies,
 *      and inheriting it would mean every future dashboard style change could
 *      move a help page for no reason.
 *   2. It must render for someone who cannot sign in. Fewer moving parts is the
 *      whole point.
 *
 * The one thing it DOES share is `escHtml` from /core.js. That is not an
 * inconsistency — forking the HTML escaper is the specific mistake this project
 * has a standing rule against, so the escaper is imported and everything else is
 * local.
 *
 * The palette matches the dashboard's teal so it reads as part of Revival, but
 * the type is set wider and looser than an operational page: this is prose to be
 * read, not a table to be scanned.
 */

:root {
  --paper:      #f7f5f2;
  --card:       #ffffff;
  --ink:        #232a2e;
  --ink-2:      #4a555b;
  /* Small type still has to clear 4.5:1 — and the binding background is
     --paper, not --card. The first value here (#6b767c) measured 4.6 on the
     white card and 4.28 on the page behind it, which is where the eyebrow
     labels, the breadcrumb tail and the "Popular:" line actually sit. This one
     measures 4.70 on --paper and 4.99 on --card, and stays visibly lighter than
     --ink-2 so the type hierarchy survives the fix. */
  --ink-3:      #656f75;
  --line:       #e2ddd6;
  --line-soft:  #eee9e2;
  --accent:     #1f4e5f;
  --accent-dk:  #173b48;
  --accent-sf:  #e7eff1;
  --warn:       #8a5a10;
  --warn-bg:    #fdf4e3;
  --warn-line:  #e8d5ae;
  --mark:       #fbe9a8;
  --radius:     12px;
  --shadow:     0 1px 2px rgba(35,42,46,.05), 0 6px 20px rgba(35,42,46,.06);
  --serif:      "Lora", Georgia, serif;
  --sans:       "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* ── Chrome ─────────────────────────────────────────────────────────────
   A slim bar rather than the dashboard's app header: this page has no admin
   cog to gate and no app switcher to host, and importing that component would
   pull in the auth call this surface exists to work without. */
.hc-bar {
  background: var(--accent);
  color: #fff;
  padding: 0 clamp(16px, 5vw, 28px);
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.hc-brand {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  /* The two words are separate flex items, and flex layout drops the
     whitespace between them — hence an explicit gap rather than a space in the
     markup that silently does nothing. */
  gap: 6px;
  min-height: 44px;
}
.hc-brand span { opacity: .8; font-weight: 400; }

/* Audience switch — a segmented control made of two real links. The page you
   are on IS the state, so there is nothing to persist. The active one is
   FILLED rather than merely bold: on a dark bar a weight difference alone does
   not survive being glanced at. */
.hc-aud { display: flex; align-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; overflow: hidden; }
.hc-aud a {
  color: #fff; font-size: 13px; text-decoration: none; opacity: .78;
  padding: 0 12px; min-height: 34px; display: inline-flex; align-items: center; white-space: nowrap;
}
.hc-aud a:hover { opacity: 1; background: rgba(255,255,255,.10); }
.hc-aud a.on, .hc-aud a.on:hover { background: #fff; color: var(--accent); opacity: 1; font-weight: 500; }
@media (pointer: coarse) { .hc-aud a { min-height: 44px; } }

.hc-bar-links { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.hc-bar-links a {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  opacity: .88;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.hc-bar-links a:hover { opacity: 1; text-decoration: underline; }

.hc-wrap { max-width: 940px; margin: 0 auto; padding: clamp(22px, 5vw, 40px) clamp(16px, 5vw, 28px) 80px; }

/* ── Search ─────────────────────────────────────────────────────────────
   Search is the first thing on the page because it is the thing most people
   want. The categories below it are for the minority who would rather browse,
   and for anyone whose search came up short. */
.hc-hero { text-align: center; padding: clamp(14px, 4vw, 30px) 0 clamp(18px, 4vw, 26px); }
.hc-hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1.15;
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.hc-hero p { margin: 0 0 20px; color: var(--ink-2); font-size: 16px; }
/* Reading view: the heading stands down, the box does not. */
.hc-hero-compact { padding: 4px 0 20px; }
.hc-hero-compact .hc-searchbox input { height: 46px; }

.hc-searchbox { position: relative; max-width: 560px; margin: 0 auto; }
.hc-searchbox input {
  width: 100%;
  height: 52px;
  padding: 0 96px 0 18px;
  font: inherit;
  font-size: 16px;   /* never below 16px — iOS zooms the page on focus */
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
}
.hc-searchbox input::placeholder { color: var(--ink-3); }
/* `type="search"` earns the right semantics and the right on-screen keyboard,
   but WebKit adds its own clear widget — which sat next to ours, two crosses
   doing one job. Ours stays because it is a real 44px target and the native one
   is not. */
.hc-searchbox input::-webkit-search-cancel-button,
.hc-searchbox input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.hc-searchbox input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-sf);
}
.hc-slash {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 7px;
  pointer-events: none;
}
.hc-searchbox input:focus ~ .hc-slash,
.hc-searchbox input:not(:placeholder-shown) ~ .hc-slash { display: none; }
.hc-clear {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 0; background: transparent;
  color: var(--ink-3);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.hc-clear:hover { color: var(--ink); background: var(--paper); }

.hc-popular { margin: 14px 0 0; font-size: 14px; color: var(--ink-3); }
.hc-popular a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.hc-popular a:hover { color: var(--accent); border-color: var(--accent); }
.hc-popular .sep { padding: 0 8px; opacity: .5; }

/* ── Category grid ──────────────────────────────────────────────────────
   Tiles are real links. A tile that only responds to a plain click cannot be
   opened in a new tab, reached by keyboard, or announced as a link — a mistake
   this project has shipped twice and does not intend to ship again. */
.hc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.hc-tile {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: border-color .12s, transform .12s;
}
.hc-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.hc-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hc-tile h3 { font-family: var(--serif); font-weight: 600; font-size: 17px; margin: 0 0 5px; }
.hc-tile p { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.hc-tile .hc-count { font-size: 13px; color: var(--ink-3); }

/* The other audiences' pages, offered as full-width tiles BELOW the topic grid
   rather than inside it — each is a different kind of destination (another
   page, another audience) and sitting in the grid would file it as one more
   topic. They are siblings of each other rather than of a grid cell, so the
   gap between them is stated here; the grid's own `gap` does not reach them. */
.hc-tile-aud + .hc-tile-aud { margin-top: 14px; }

/* ── Result and article lists ───────────────────────────────────────── */
.hc-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.hc-row {
  display: block;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}
.hc-row:last-child { border-bottom: 0; }
.hc-row:hover { background: var(--accent-sf); }
.hc-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hc-row .hc-row-t { font-weight: 500; font-size: 15.5px; margin-bottom: 2px; }
.hc-row .hc-row-b { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.hc-row .hc-row-c { font-size: 13px; color: var(--ink-3); }
mark { background: var(--mark); color: inherit; padding: 0 1px; border-radius: 2px; }

.hc-sec-h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  margin: 30px 0 12px;
}
.hc-count-line { font-size: 14px; color: var(--ink-3); margin: 0 0 12px; }

/* Search-result group heading. Rendered ONLY when there are two groups to
   separate — a lone heading over the only list is a label, not a distinction. */
.hc-group-h {
  font-family: var(--serif); font-weight: 600; font-size: 15px;
  color: var(--ink-2); margin: 22px 0 8px;
}
.hc-group-h:first-of-type { margin-top: 4px; }

/* Names a volunteer answer as a volunteer answer when it is read on the staff
   page. Without it, "reply to any text from us" reads as an instruction to a
   leader rather than as the sentence a volunteer is shown. */
.hc-banner {
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: 8px; padding: 11px 14px; margin: 0 0 18px;
  font-size: 14.5px; color: var(--warn);
}
.hc-banner b { font-weight: 600; }
.hc-banner a { color: var(--warn); font-weight: 600; }

/* ── Empty state ────────────────────────────────────────────────────────
   An empty state has to offer a way on. A dead sentence saying "no results"
   leaves someone who is already stuck with nowhere to go. */
.hc-empty {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--shadow);
}
.hc-empty h3 { font-family: var(--serif); font-weight: 600; font-size: 18px; margin: 0 0 6px; }
.hc-empty p { margin: 0 0 4px; color: var(--ink-2); font-size: 15px; }

/* ── Article ────────────────────────────────────────────────────────── */
/* The view container is focused after a navigation so a screen reader lands on
   the new content. It carries tabindex="-1" and is never keyboard-reachable, so
   painting a focus ring on it would only ever be a ring nobody asked for. */
#hc-root:focus { outline: none; }

.hc-crumb { font-size: 14px; color: var(--ink-3); margin-bottom: 14px; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
/* A tap target is 44 in BOTH directions, and "Help" is a short word — hence the
   min-width and the padding, which also supply the spacing the reduced gap
   above gives up. Height alone passed a hand-rolled check and failed the shared
   one, which is the argument for having a shared one. */
.hc-crumb a {
  color: var(--ink-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 6px;
}
.hc-crumb a:hover { color: var(--accent); text-decoration: underline; }

.hc-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 34px; align-items: start; }

.hc-doc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 34px);
}
.hc-doc h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(23px, 4vw, 29px);
  line-height: 1.2;
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.hc-meta { font-size: 13.5px; color: var(--ink-3); margin: 0 0 22px; }
.hc-doc h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  margin: 30px 0 8px;
  scroll-margin-top: 18px;
}
.hc-doc h2:first-of-type { margin-top: 22px; }
.hc-doc p { margin: 0 0 14px; }
.hc-doc ul { margin: 0 0 16px; padding-left: 22px; }
.hc-doc li { margin-bottom: 7px; }
.hc-doc b { font-weight: 600; }
.hc-doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--paper); padding: 1px 5px; border-radius: 4px; }

.callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--accent-sf);
  border-radius: 0 8px 8px 0;   /* square on the accented side — a rounded
                                   corner against a single-sided border reads
                                   as a rendering fault */
  padding: 13px 16px;
  margin: 18px 0;
  font-size: 15px;
  color: var(--ink-2);
}
.callout b { color: var(--ink); }
.callout.warn { border-left-color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }

.hc-foot { border-top: 1px solid var(--line-soft); margin-top: 26px; padding-top: 16px; font-size: 14.5px; color: var(--ink-2); }
.hc-foot-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.hc-foot-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── On-this-page rail ────────────────────────────────────────────────── */
.hc-rail { position: sticky; top: 20px; font-size: 14px; }
.hc-rail-h { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.hc-rail a {
  display: block;
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--line);
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.4;
}
.hc-rail a:hover { color: var(--accent); border-left-color: var(--accent); }
.hc-rail-rel { margin-top: 24px; }
.hc-rail-rel a { border-left: 0; padding-left: 0; }

@media (max-width: 800px) {
  .hc-article-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* The rail moves BELOW the article rather than being hidden. On a phone an
     in-page index above 900 words of prose is still useful; a display:none
     rail is one someone can never reach. */
  .hc-rail { position: static; order: 2; }
}

@media (pointer: coarse) {
  .hc-popular a, .hc-rail a { min-height: 44px; display: inline-flex; align-items: center; }
  .hc-rail a { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-tile { transition: none; }
}

/* Visually hidden, still announced. */
.hc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }