/* help-homeschool.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. */

/*
  The homeschool FAMILY help page — the third audience shell, and the
  sibling of help.html rather than of help-center.html.

  ── Why it is a page and not a pill on the staff centre ──────────────
  A pill on /help-center.html is how a member of STAFF crosses over to read
  it; that pill exists and points here. But the reading surface itself has
  to be its own page for the reason the volunteer page is: a dozen short
  answers want to be on one screen where scrolling is the interface, not
  behind a search box with one article per URL. It is also what keeps the
  audience crossing structural — this page loads ONE content file, so it
  cannot show a staff article by any bug in the renderer.

  ── Self-contained, like its two siblings ────────────────────────────
  No style.css, no utils.js, no app-header. It shares the dashboard's
  origin and `escHtml` and nothing else, and it makes no /api call at all —
  which is what lets it answer "it says I don't have access" for the person
  who cannot get in. A Playwright case asserts the empty request list.

  ── Palette ─────────────────────────────────────────────────────────
  Teal rather than the volunteer page's purple, because a parent arrives
  from /homeschool.html and should not feel handed to a different product.
  Every value below is lifted from help/help.css, where each one was already
  contrast-measured against THIS paper — --faint is 4.70 on --paper and
  4.99 on --card, which is what small text needs. Do not swap in a lighter
  grey that looks nicer at 16px; the eyebrow and the count line are 11.5px
  and 14px.
*/
/* The palette (the help theme — help.css's own values), the ground and the
   column are Shell D's — doorway.css, Phase 6e. 640px, as its siblings:
   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}
/* This surface has its own chrome, so style.css's tap-target rules never
   reach these links — the same fix help.html carries, for the same reason. */
@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, as it does on the volunteer
   page: someone who opened a help page is already stuck, and burying the
   human at the bottom asks them to read a dozen 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> rather than a scripted accordion, so open/close,
   keyboard support and screen-reader semantics come from the platform. */
.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 — there is no 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 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 sit inside one container, so the wrap's flex gap does not
   reach them and has to be restated here. */
#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
   families, and that link is for the occasional office staffer who lands
   here rather than something to advertise to a parent. */
.h-staff{margin-left:auto;color:var(--muted) !important;font-weight:400 !important}
@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}