/* help.html — the page's own rules. Moved out of its inline <style>
   (Phase 8 of the shell plan, 2026-10-11); linked where the block stood, so
   the cascade order is unchanged. Shared looks live in style.css /
   doorway.css — a rule here is this page's alone. */

/* Self-contained, and it carries NO app-header — this is a volunteer-facing
   page, so it follows volunteer-nextsteps.html's chrome (a brand bar and a
   way back) rather than the admin pages' nav + full-admin settings cog.
   That is the same call the next-step surface already made, which is why
   neither page appears in app-header.spec.js's HEADER_PAGES. */
/* The palette (the volunteer theme), the ground and the column are Shell D's
   — doorway.css, Phase 6e. One override, on the role class AND the shared
   one: 640px rather than 560, because this page is long answers read
   top to bottom. */
.v-wrap.door-wrap{max-width:640px}
.v-brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:15px;font-weight:600}
.v-brand b{color:var(--accent);font-weight:600}
.v-brand-links{margin-left:auto;display:flex;align-items:center;gap:14px}
.v-brand a{font-size:13px;color:var(--muted);text-decoration:none;font-family:var(--sans)}
.v-brand a:hover{color:var(--accent);text-decoration:underline}
/* VS9-2: this surface has its own chrome, so style.css's tap-target rules
   never reach these links — they were measured at 51x20 on the next-step
   page before the equivalent fix. */
@media (pointer: coarse){
  .v-brand-links a{min-height:44px;display:inline-flex;align-items:center}
}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(26px,7vw,34px);line-height:1.12;
  margin:0 0 4px;letter-spacing:-.01em}
.v-sub{margin:0;color:var(--muted);font-size:15px}

/* "Still stuck?" sits ABOVE the questions on purpose. Someone who opened a
   help page is already stuck, and burying the human at the bottom asks them
   to read fifteen answers first to find out there was a person all along. */
.h-contact{background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:clamp(16px,4vw,20px);position:relative;overflow:hidden}
.h-contact::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--accent)}
.h-contact p{margin:0;font-size:15.5px;color:var(--muted)}
.h-contact b{color:var(--ink);font-weight:600}

.h-group h2{font-family:var(--serif);font-weight:600;font-size:18px;margin:0 0 10px}
.h-list{display:flex;flex-direction:column;gap:8px}

/* <details>/<summary> is used rather than a scripted accordion so the
   open/close behaviour, keyboard support and screen-reader semantics come
   from the platform. This page works with JavaScript switched off. */
.h-q{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.h-q summary{list-style:none;cursor:pointer;padding:13px 16px;font-size:15.5px;
  font-weight:600;display:flex;align-items:center;gap:10px;min-height:44px}
.h-q summary::-webkit-details-marker{display:none}
.h-q summary::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg);transition:transform .15s}
.h-q[open] summary::after{transform:rotate(-135deg)}
.h-q summary:hover{background:var(--accent-soft)}
.h-q-body{padding:0 16px 15px;font-size:15px;color:var(--muted)}
.h-q-body p{margin:0 0 10px}
.h-q-body p:last-child{margin-bottom:0}
.h-q-body b{color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:reduce){.h-q summary::after{transition:none}}

/* A filter, not a search. It hides non-matching questions in place rather
   than navigating to a results page — over fifteen items on one screen a
   results page is a worse version of scrolling, and it would add a second
   view to get lost in on the surface a stuck person reaches first. */
.h-filter{position:relative}
.h-filter input{
  width:100%;height:48px;padding:0 52px 0 16px;font:inherit;
  /* Never below 16px: iOS zooms the whole page when a smaller field takes
     focus, and this page is read on a phone more than anywhere else. */
  font-size:16px;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.h-filter input::placeholder{color:var(--faint)}
.h-filter input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* WebKit adds its own clear widget, which sits beside ours doing the same
   job. Ours stays: it is a real 44px target and the native one is not. */
.h-filter input::-webkit-search-cancel-button,
.h-filter input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.h-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:0;background:transparent;color:var(--faint);
  font-size:20px;line-height:1;cursor:pointer;border-radius:50%}
.h-clear:hover{color:var(--ink);background:var(--paper)}
.h-count{margin:-10px 0 0;font-size:14px;color:var(--muted)}
/* The groups used to be direct children of .v-wrap and inherited its 22px
   flex gap. They are now inside one container, so the gap has to be
   restated here or every heading sits flush against the group above it. */
#h-root{display:flex;flex-direction:column;gap:22px}

.h-foot{border-top:1px solid var(--line);padding-top:18px;font-size:14px;color:var(--muted);
  display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.h-foot a{color:var(--accent);font-weight:600}
/* The way across to the staff centre, kept quiet: this page belongs to
   volunteers, and that link is for the occasional leader who lands here. */
.h-staff{margin-left:auto;color:var(--muted) !important;font-weight:400 !important}
/* Measured 167x17 before this — the same gap the brand links have, and for
   the same reason: no shared stylesheet reaches this page's links. */
@media (pointer: coarse){
  .h-foot a{min-height:44px;display:inline-flex;align-items:center}
  /* A link inside an answer is a way to ANOTHER answer, tapped by somebody
     already stuck — same 44px as the footer. Both accordion pages carry it
     because they share one renderer (help/volunteer.js). */
  .h-q-body a{min-height:44px;display:inline-flex;align-items:center}
}

/* Visually hidden, still announced. The contact block needs a heading so it
   is a labelled landmark rather than a stray <p>, but showing one would put
   a redundant title above a single sentence. */
.v-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}