/* ──────────────────────────────────────────────────────────────────
   SUPPORTING PAGES  — payment returns, join, contact, grievance,
   report, help, status, changelog, security, sub-processors, consent.

   These sit on top of css/legal.css, not beside it. legal.css already
   owns the page shell every one of them uses (.lg-wrap / .lg-head /
   .lg-tldr / .lg-foot / .lg-todo) and re-declaring a second measure and
   a second type scale is how two page families drift apart. What lives
   HERE is only what a policy document never needed: a result banner, a
   card grid, a numbered flow, form fields, a status board, a log.

   Everything reads from base.css tokens. No new colours are invented —
   --ac carries every "this worked / this is included" state, --rd every
   failure, --am every "needs a decision from the operator" state, which
   is the same job .lg-todo does in legal.css.
   ────────────────────────────────────────────────────────────────── */

/* ── Buttons ───────────────────────────────────────────────────────
   The landing page has its own (.ld-btn) but landing.css is 60 KB of
   hero and mockup machinery that a four-paragraph contact page has no
   business downloading. Same shape, same accent, declared locally. */
.pg-btns{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 4px}
/* The box comes from .ld-btn in landing.css — one button across the public
   pages. This says only what a page button adds: it has a resting fill and
   a visible edge, where a landing button is a bare primary or a ghost. */
.pg-btn{border-color:var(--bm);color:var(--t);background:var(--s2);
  transition:background var(--dur),border-color var(--dur),transform var(--dur)}
.pg-btn:hover{background:var(--s3);border-color:var(--bs)}
.pg-btn:active{transform:translateY(1px)}
.pg-btn.primary{background:var(--ac);border-color:var(--ac);color:var(--on-ac)}
.pg-btn.primary:hover{filter:brightness(1.06);background:var(--ac)}
.pg-btn.ghost{background:transparent}
.pg-btn.wide{width:100%}
.pg-btn svg{width:17px;height:17px;flex:none}

/* ── Result banner ─────────────────────────────────────────────────
   Payment success / failure / invite accepted. One big answer to one
   question, because that is the only thing the reader wants on arrival.
   The icon is a ring rather than a filled circle: a solid green disc at
   64px reads as an alert, and this is a confirmation. */
.pg-res{text-align:center;padding:52px 0 8px}
.pg-ico{width:66px;height:66px;border-radius:50%;margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;
  background:var(--acd);border:1.5px solid var(--acb);color:var(--ac)}
.pg-ico svg{width:30px;height:30px}
.pg-ico.bad{background:var(--rdd);border-color:color-mix(in srgb,var(--rd) 40%,transparent);color:var(--rd)}
.pg-ico.wait{background:var(--amd);border-color:color-mix(in srgb,var(--am) 40%,transparent);color:var(--am)}
.pg-res h1{font-size:var(--fs-ld-h1);font-weight:700;letter-spacing:-.7px;line-height:1.15;margin-bottom:12px}
.pg-res .pg-lead{font-size:15px;line-height:1.7;color:var(--t2);max-width:52ch;margin:0 auto}
.pg-res .pg-btns{justify-content:center;margin-top:28px}

/* Order summary / invite summary — the receipt-shaped block under a
   result banner. Mono for every figure, sans for every label, which is
   the rule the whole app follows (see the type-scale note in base.css). */
.pg-sum{background:var(--s1);border:1px solid var(--b);border-radius:var(--r);
  padding:6px 20px;margin:34px 0 8px;text-align:left}
.pg-sum-r{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--b)}
.pg-sum-r:last-child{border-bottom:0}
.pg-sum-k{font-size:var(--fs-ld-body);color:var(--t2)}
.pg-sum-v{font-family:var(--mono);font-size:var(--fs-ld-body);color:var(--t);text-align:right}
.pg-sum-r.total .pg-sum-k{color:var(--t);font-weight:600}
.pg-sum-r.total .pg-sum-v{color:var(--ac);font-size:var(--fs-ld-h3)}

/* ── Cards ─────────────────────────────────────────────────────────
   Used by help (topic tiles), sub-processors (vendor tiles) and the
   security page. auto-fit rather than a fixed column count so a page
   with three cards and a page with six both look deliberate. */
.pg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:20px 0 32px}
.pg-card{background:var(--s1);border:1px solid var(--b);border-radius:var(--r);padding:18px 19px;
  text-decoration:none;display:block;transition:border-color var(--dur),background var(--dur)}
a.pg-card:hover{border-color:var(--bs);background:var(--s2)}
.pg-card h3{font-size:var(--fs-ld-h3);font-weight:600;margin:0 0 7px;color:var(--t)}
.pg-card p{font-size:var(--fs-body);line-height:1.65;color:var(--t2);margin:0}
.pg-card .pg-eyebrow{font-family:var(--sans);font-weight:600;font-size:var(--fs-xs);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--ac);display:block;margin-bottom:9px}

/* ── Numbered flow ─────────────────────────────────────────────────
   "What happens next" on the payment and join pages. The number is the
   anchor, so it gets the mono face and the accent; the text stays
   ordinary body copy. */
.pg-steps{list-style:none;margin:20px 0 30px;padding:0;counter-reset:pgs}
.pg-steps li{position:relative;padding:0 0 20px 46px;counter-increment:pgs}
.pg-steps li::before{content:counter(pgs);position:absolute;left:0;top:-2px;
  width:30px;height:30px;border-radius:50%;background:var(--acd);border:1px solid var(--acb);
  color:var(--ac);font-family:var(--mono);font-size:var(--fs-body);
  display:flex;align-items:center;justify-content:center}
/* The connecting rule between steps. Stops at the last one — a line
   trailing off under the final step implies a step that isn't there. */
.pg-steps li:not(:last-child)::after{content:'';position:absolute;left:15px;top:32px;bottom:4px;
  width:1px;background:var(--b)}
.pg-steps b{display:block;color:var(--t);font-weight:600;font-size:var(--fs-ld-body);margin-bottom:4px}
.pg-steps span{display:block;font-size:var(--fs-body);line-height:1.7;color:var(--t2)}

/* ── Forms ─────────────────────────────────────────────────────────
   Contact, grievance intake, abuse report. Field styling is copied in
   spirit from the app's .ai input (base.css) rather than shared with
   it, because these pages deliberately do not load the app's CSS. */
.pg-form{background:var(--s1);border:1px solid var(--b);border-radius:var(--r);padding:22px;margin:22px 0 34px}
.pg-f{margin-bottom:16px}
.pg-f:last-of-type{margin-bottom:20px}
.pg-lbl{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--t);margin-bottom:7px}
.pg-lbl .req{color:var(--rd);margin-left:2px}
.pg-hint{font-size:var(--fs-sm);line-height:1.6;color:var(--t3);margin-top:6px}
.pg-in{width:100%;height:42px;padding:0 13px;border-radius:var(--rsm);
  border:1px solid var(--bm);background:var(--bg);color:var(--t);
  font-family:var(--sans);font-size:var(--fs-ld-body);outline:none}
textarea.pg-in{height:auto;min-height:120px;padding:12px 13px;line-height:1.65;resize:vertical}
select.pg-in{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--t2) 50%),linear-gradient(135deg,var(--t2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.pg-in:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acd)}
.pg-in::placeholder{color:var(--t3)}
.pg-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.pg-2{grid-template-columns:1fr}}
/* Honeypot — same technique as the landing form. Off-screen rather than
   display:none, which some bots skip. */
.pg-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pg-chk{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-body);line-height:1.6;color:var(--t2);cursor:pointer}
.pg-chk input{margin-top:3px;accent-color:var(--ac);width:15px;height:15px;flex:none}

/* ── Key/value block ───────────────────────────────────────────────
   The registered-entity details on contact + grievance. A table would
   be more semantic, but every row here is a single fact about one
   organisation, which is a description list, not tabular data. */
.pg-kv{margin:18px 0 30px;border-top:1px solid var(--b)}
.pg-kv div{display:flex;gap:20px;padding:13px 0;border-bottom:1px solid var(--b)}
.pg-kv dt{flex:0 0 148px;font-size:var(--fs-sm);font-weight:600;color:var(--t)}
.pg-kv dd{font-size:var(--fs-ld-body);line-height:1.65;color:var(--t2);margin:0}
@media(max-width:560px){.pg-kv div{flex-direction:column;gap:4px}.pg-kv dt{flex:none}}
/* The email address in this list is the primary action on the Contact page and
   it is a VALUE in a key/value row, not a link inside a sentence — so the
   inline-link exemption does not cover it and it gets a real target. Links that
   do sit inside prose are deliberately left alone: padding those would break
   the line rhythm of the paragraph around them. */
@media(max-width:760px),(hover:none) and (pointer:coarse){
  .pg-kv dd a{ display:inline-flex; align-items:center; min-height:44px }
}

/* ── Status board ──────────────────────────────────────────────────
   Deliberately a hand-edited static page, not a probe. A status page
   that lies automatically is worse than one a human updates during an
   incident — see the operator note on status.html. */
.pg-stat{border:1px solid var(--b);border-radius:var(--r);overflow:hidden;margin:20px 0 30px}
.pg-stat-hd{display:flex;align-items:center;gap:12px;padding:18px 20px;background:var(--acd);
  border-bottom:1px solid var(--b)}
.pg-stat-hd.bad{background:var(--rdd)}
.pg-stat-hd.warn{background:var(--amd)}
.pg-stat-hd b{font-size:var(--fs-ld-h3);color:var(--t);font-weight:600}
.pg-stat-r{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--b);background:var(--s1)}
.pg-stat-r:last-child{border-bottom:0}
.pg-stat-nm{flex:1;font-size:var(--fs-ld-body);color:var(--t)}
.pg-stat-ds{font-size:var(--fs-sm);color:var(--t2)}
.pg-dot{width:9px;height:9px;border-radius:50%;background:var(--ac);flex:none;
  box-shadow:0 0 0 3px var(--acd)}
.pg-dot.bad{background:var(--rd);box-shadow:0 0 0 3px var(--rdd)}
.pg-dot.warn{background:var(--am);box-shadow:0 0 0 3px var(--amd)}

/* ── Changelog ─────────────────────────────────────────────────────
   Date in the margin on a wide screen, above the entry on a phone. */
.pg-log{margin:8px 0 30px}
.pg-log-e{display:flex;gap:26px;padding:22px 0;border-bottom:1px solid var(--b)}
.pg-log-e:last-child{border-bottom:0}
.pg-log-d{flex:0 0 116px;font-family:var(--mono);font-size:var(--fs-sm);color:var(--t3);padding-top:3px}
.pg-log-b{flex:1;min-width:0}
.pg-log-b h3{font-size:var(--fs-ld-h3);font-weight:600;margin:0 0 4px}
.pg-log-b .pg-ver{font-family:var(--mono);font-size:var(--fs-label);color:var(--ac);
  background:var(--acd);border:1px solid var(--acb);border-radius:4px;padding:1px 7px;margin-left:8px;
  vertical-align:2px;white-space:nowrap}
.pg-log-b ul{margin:9px 0 0 18px}
.pg-log-b li{font-size:var(--fs-body);line-height:1.7;color:var(--t2);margin-bottom:5px}
@media(max-width:560px){.pg-log-e{flex-direction:column;gap:8px}.pg-log-d{flex:none}}

/* ── Collapsible Q&A (help page) ───────────────────────────────────
   <details> rather than JS: these pages carry no scripts, and a help
   page that needs JavaScript to open a paragraph is a help page that
   fails exactly when things are already going wrong. */
.pg-q{border:1px solid var(--b);border-radius:var(--r);background:var(--s1);margin-bottom:9px;overflow:hidden}
.pg-q summary{padding:15px 18px;cursor:pointer;font-size:var(--fs-ld-body);font-weight:600;color:var(--t);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px}
.pg-q summary::-webkit-details-marker{display:none}
.pg-q summary::after{content:'';width:8px;height:8px;flex:none;border-right:1.8px solid var(--t3);
  border-bottom:1.8px solid var(--t3);transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.pg-q[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.pg-q summary:hover{background:var(--s2)}
.pg-q-b{padding:0 18px 16px}
.pg-q-b p,.pg-q-b li{font-size:var(--fs-body);line-height:1.75;color:var(--t2)}
.pg-q-b p{margin-bottom:10px}
.pg-q-b p:last-child{margin-bottom:0}

/* ── Printable document (parental consent template) ────────────────
   The one page whose real output is paper. On screen it keeps the site
   chrome; printed, the chrome goes and the form gets the whole sheet in
   black on white, because a club is going to hand this to a parent. */
.pg-doc{background:var(--s1);border:1px solid var(--b);border-radius:var(--r);padding:30px 32px;margin:22px 0 30px}
.pg-doc h3{margin-top:24px}
.pg-doc h3:first-child{margin-top:0}
.pg-fill{display:inline-block;min-width:190px;border-bottom:1px solid var(--bs);height:1.25em;
  vertical-align:-3px;margin:0 3px}
.pg-fill.sm{min-width:96px}
.pg-sign{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
@media(max-width:560px){.pg-sign{grid-template-columns:1fr}}
.pg-sign div{border-top:1px solid var(--bs);padding-top:9px;font-size:var(--fs-sm);color:var(--t3)}
@media print{
  .lg-top,.lg-foot,.lg-draft,.pg-btns,.pg-noprint{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  .lg-wrap{max-width:none;padding:0}
  .pg-doc{background:#fff;border:0;padding:0;border-radius:0}
  .lg-wrap p,.lg-wrap li,.pg-doc p{color:#000}
  .pg-fill{border-bottom:1px solid #000}
}

/* ── Shared small bits ─────────────────────────────────────────────*/
/* ── THE TYPE RULE ON THE PUBLIC PAGES ──────────────────────────────
   The same rule the app states in css/base.css, applied here because
   these pages had drifted away from it:

     DM Mono  counts, timecodes, dates, versions, key caps  -- a figure
     Outfit   everything that is a word                     -- a label

   Mono had become the decorative face for every micro-label on this
   site — eyebrows, "QUESTIONS", mocked screen titles, field captions,
   whole sentences of .pg-meta. None of those is a figure, and at 9-12px
   uppercase the two faces read as two different designs on one page.
   Uppercase micro-labels are now Outfit 600 with tighter tracking, which
   is what the app's own .fi-kpi-l does.

   Before moving a rule INTO mono, ask whether the thing inside it can be
   counted. If a human would read it aloud as a word, it is Outfit. */
.pg-meta{font-size:var(--fs-sm);line-height:1.65;color:var(--t3);margin:-4px 0 26px}
.pg-callout{background:var(--s1);border:1px solid var(--b);border-left:2px solid var(--ac);
  border-radius:0 var(--r) var(--r) 0;padding:16px 18px;margin:20px 0 26px}
.pg-callout p{margin:0;font-size:var(--fs-body);line-height:1.7;color:var(--t2)}
.pg-callout.warn{border-left-color:var(--am)}
.pg-callout.bad{border-left-color:var(--rd)}


/* ══════════════════════════════════════════════════════════════════
   HELP PAGE  — a grid of chapter cards, each opening as an overlay,
   and inside them mock-ups of the real app screens.

   THE RULE FOR EVERYTHING BELOW: if the app already has the component,
   USE THE APP'S CLASS. help.html loads base.css, so the chapter cards
   are real `.match-card`s, the overlays are real `.settings-overlay` /
   `.settings-box`, the season grid is the real `.fi-grid` and the stat
   tiles are real `.fi-kpi`s — not lookalikes. A reader who has seen
   Home recognises this page's cards because they ARE Home's cards.

   What is re-declared here is only what lives in a stylesheet help.html
   deliberately does not load — `.tag-btn` (css/tagger.css), the Review
   clip row (css/review.css), the Clip Library table
   (css/clipexplorer.css). Those are copied VALUE FOR VALUE from the
   originals, including the light-theme overrides, so the mock matches
   the screen it is describing in both themes. When one of those
   components changes, this block is the thing to change with it.

   Screenshots were considered and rejected: they cost image bytes on a
   precached offline page, they cannot re-theme with the reader, and
   they are wrong the first time a button moves. Same rule the landing
   page and the guided tour already follow.
   ══════════════════════════════════════════════════════════════════ */

/* ── The chapter cards ─────────────────────────────────────────────
   `.match-card` + `.match-open` come from base.css. Only the things a
   MATCH card does not have to do are added: an anchor that carries no
   underline, a name that may wrap to two lines (a chapter title is
   longer than "vs City FC"), and a description that is prose. */
/* THE GRID BREAKS OUT OF THE READING MEASURE. legal.css holds the document
   to 760px because a policy page is READ; twelve chapter cards are SCANNED,
   and at 760px they can only ever be two columns of very wide cards. The
   width is clamped to the viewport so the break-out never causes a
   horizontal scroll, and the column floor is Home's own card width, so the
   grid reflows to two and then one exactly as Home's does. */
/* ── ONE LEFT MARGIN FOR THE WHOLE PAGE ────────────────────────────
   The reading column is 760px and the chapter grid is 1060px, and the two
   used to be centred INDEPENDENTLY on the viewport — so the prose began
   about 170px to the right of the cards, and every band down the page
   started somewhere new. The page now has ONE container at the wider
   measure and ONE left edge; the prose is capped to a readable line
   length inside it rather than being re-centred against it.

   Wide things and narrow things therefore begin at the same place, which
   is all the eye was asking for. The overlays are excluded because they
   are position:fixed with inset:0 — a max-width there fights the inset.
   .lg-wrap keeps its own 760px on the legal pages, which have no wide
   content and are better centred. */
.hp-wrap{max-width:1060px}
.hp-wrap > *:not(.hp-cards):not(.hp-legend):not(.settings-overlay){max-width:760px}

/* 232px, not 250: the container is 1060 wide less 22px of padding a side, and
   four 250s plus three gaps is 1048 against 1016 of room — so the grid dropped
   to three columns and left the eighth card alone on a row of its own. Four
   columns is exactly two rows for eight chapters, with nothing left over. */
.hp-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
/* ── Chapter groups, as colour rather than as headings ─────────────
   Three grids under three headings cost four empty cells and three rows
   of chrome on a page whose whole job is presenting eight doors. One grid
   of eight fills four columns exactly twice over, and the grouping moves
   onto the card as a hue: accent for what to read first, sky for the
   screens, apricot for the club. The key above the grid is what makes
   the hue mean something — a colour nobody has been told the meaning of
   is decoration.

   Colour is never the ONLY carrier: the cards are still in group order,
   and every card says what it is in words. */
.hp-legend{margin:22px 0 14px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  font-size:var(--fs-sm);font-weight:600;color:var(--t2)}
.hp-leg{display:inline-flex;align-items:center;gap:8px}
.hp-leg i{width:9px;height:9px;border-radius:50%;background:var(--ac);flex:none}
.hp-leg.g-work i{background:var(--bl)}
.hp-leg.g-club i{background:var(--am)}

/* The icon tile carries the group's colour, and the card's hover border
   follows it, so the whole card reads as belonging to a set. */
.hp-card.g-work .match-ic{background:var(--bld);border-color:var(--bl);color:var(--bl)}
.hp-card.g-work .match-ic svg{color:var(--bl)}
.hp-card.g-work:hover{border-color:var(--bl)}
.hp-card.g-work .match-open{border-color:var(--bl);background:var(--bld);color:var(--bl)}
.hp-card.g-club .match-ic{background:var(--amd);border-color:var(--am);color:var(--am)}
.hp-card.g-club .match-ic svg{color:var(--am)}
.hp-card.g-club:hover{border-color:var(--am)}
.hp-card.g-club .match-open{border-color:var(--am);background:var(--amd);color:var(--am)}
.hp-card.g-start .match-ic{background:var(--acd);border-color:var(--acb)}
a.hp-card{text-decoration:none;color:inherit;cursor:pointer}
/* display:block undoes the two-line clamp base.css puts on a match card's
   name (-webkit-box + -webkit-line-clamp). A help card's title is a question
   and has to be readable in full however many lines that takes — it is not
   competing for room with a footage line and an action row. */
.hp-card .match-nm{display:block;white-space:normal;overflow:visible;line-height:1.35}
.hp-card .match-meta{line-height:1.5;margin-top:4px}
.hp-card .match-open{width:100%}
.hp-card .match-actions{width:100%}
/* ── Chapter cards, three levels deep ──────────────────────────────
   The page is a drill: eight cards -> nine questions -> one answer, with
   the old long-form chapter kept behind a "read the whole thing" link for
   people who would rather have the document. Every level is a `:target`
   overlay, so all of it works with scripting off and any single answer
   can be linked to directly.

   The cards are deliberately SQUARE-ish rather than the app's wide match
   rows: eight of them are a menu to be scanned, not a list to be read, and
   a tall card puts the icon, the name and the promise on three lines your
   eye takes in at once. */
a.hp-card.match-card{display:flex;flex-direction:column;align-items:stretch;gap:0;
  padding:26px 24px 20px;min-height:250px;border-radius:18px}
.hp-card .match-ic{width:50px;height:50px;border-radius:14px;margin:0 0 22px}
.hp-card .match-ic svg{width:21px;height:21px}
.hp-card .match-tx{flex:1}
.hp-card .match-nm{font-size:18px;line-height:1.28;margin-bottom:9px}
.hp-card .match-meta{font-size:var(--fs-h3);line-height:1.62}
.hp-card .match-actions{width:100%;margin-top:22px;padding-top:16px;gap:12px}
.hp-card .match-vid{margin:0;flex:1;text-align:left;color:var(--t3)}
.hp-card .match-open{flex:0 0 auto;min-width:0;height:30px;padding:0 15px}

/* ── The nine questions ────────────────────────────────────────────
   Three across on a laptop, two on a tablet, one on a phone. A tile is a
   whole question rather than a heading, because the reader is looking for
   THEIR question, not for a topic they then have to translate. */
.hp-lead{font-size:15px;line-height:1.7;color:var(--t2);margin:6px 0 0}
.hp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 0}
.hp-tile{display:flex;flex-direction:column;gap:16px;min-height:148px;padding:20px 18px;
  background:var(--s1);border:1px solid var(--b);border-radius:14px;
  text-decoration:none;color:inherit;transition:border-color var(--dur),background var(--dur),transform var(--dur)}
.hp-tile:hover{border-color:var(--acb);background:var(--s2);transform:translateY(-2px)}
.hp-tile .n{font-family:var(--mono);font-weight:500;font-size:var(--fs-label);color:var(--t3);letter-spacing:.04em}
.hp-tile .q{flex:1;font-size:14.5px;font-weight:600;line-height:1.42;color:var(--t)}
.hp-tile .go{width:26px;height:26px;border-radius:50%;background:var(--acd);color:var(--ac);
  display:flex;align-items:center;justify-content:center;align-self:flex-start}
.hp-tile .go svg{width:13px;height:13px}
.hp-tile:hover .go{background:var(--ac);color:var(--bg)}
@media(max-width:820px){.hp-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.hp-tiles{grid-template-columns:1fr;gap:11px}
  .hp-tile{min-height:0;flex-direction:row;align-items:center;gap:14px;padding:16px}
  .hp-tile .n{display:none}.hp-tile .go{align-self:center}}

/* ── An answer ─────────────────────────────────────────────────────
   Its header is a way BACK to the nine, not a title: the question itself
   is the first thing in the body, at heading size, so the answer opens on
   what was asked. */
.hp-ans-hd{justify-content:space-between}
.hp-back{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-body);font-weight:600;
  color:var(--t2);text-decoration:none;padding:4px 0}
.hp-back svg{width:15px;height:15px}
.hp-back:hover{color:var(--ac)}
.hp-ov .settings-body h2.hp-ans-q{font-size:21px;line-height:1.3;letter-spacing:-.2px;
  margin:6px 0 22px;color:var(--t)}
.hp-step-nav{display:flex;align-items:center;gap:14px;margin-top:36px;padding-top:22px;
  border-top:1px solid var(--b)}
.hp-step-l{font-size:var(--fs-h3);font-weight:600;color:var(--t2);text-decoration:none}
.hp-step-l:hover{color:var(--ac)}
.hp-step-l.next{margin-left:auto}

/* ── The long-form fallback ────────────────────────────────────────
   Offered at the foot of every grid, because some people would rather read
   a chapter than pick a question, and the whole document already exists. */
.hp-manual{display:flex;align-items:center;gap:16px;margin-top:30px;padding:20px 22px;
  border:1px dashed var(--bm);border-radius:14px;text-decoration:none;color:inherit;
  transition:border-color var(--dur),background var(--dur)}
.hp-manual:hover{border-color:var(--acb);background:var(--s1)}
.hp-manual-ic{width:38px;height:38px;flex:none;border-radius:var(--r);background:var(--s3);
  border:1px solid var(--bm);color:var(--ac);display:flex;align-items:center;justify-content:center}
.hp-manual-ic svg{width:18px;height:18px}
.hp-manual-tx{flex:1}
.hp-manual-tx b{display:block;font-size:14.5px;font-weight:600;color:var(--t);margin-bottom:3px}
.hp-manual-tx i{display:block;font-style:normal;font-size:var(--fs-body);line-height:1.6;color:var(--t2)}
.hp-manual-go{color:var(--t3);font-size:17px;flex:none}
.hp-manual:hover .hp-manual-go{color:var(--ac)}
.hp-manual-hd{font-weight:600;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--t3);margin:2px 0 20px}
.hp-rule{border:0;border-top:1px solid var(--b);margin:40px 0 0}
.hp-ov .settings-body h3.hp-manual-h3{font-size:18px;margin:26px 0 14px}
@media(max-width:520px){
  /* A square card is a poster, and eight posters is 1,800px of scrolling
     before a phone reader reaches the last chapter. On a phone the same
     eight become rows — icon, name, what is in it, a way in — which is
     the shape a menu wants when it cannot be seen all at once.
     display:contents on .match-tx lets the name and the description be
     grid items of the card itself, so the icon can span both lines. */
  a.hp-card.match-card{display:grid;grid-template-columns:42px 1fr auto;
    grid-template-areas:"ic nm go" "ic mt mt";align-items:center;
    gap:2px 14px;padding:15px 17px;min-height:0;border-radius:14px}
  .hp-card .match-ic{grid-area:ic;align-self:start;width:42px;height:42px;margin:0}
  .hp-card .match-tx{display:contents}
  .hp-card .match-nm{grid-area:nm;font-size:var(--fs-ld-h3);margin:0}
  .hp-card .match-meta{grid-area:mt;font-size:var(--fs-sm);line-height:1.5;margin-top:5px}
  .hp-card .match-actions{grid-area:go;border-top:0;padding:0;margin:0;width:auto}
  /* The count is the first thing to go: the card is already saying what the
     chapter is, and nine is the same everywhere. */
  .hp-card .match-vid{display:none}
  .hp-card .match-open{height:34px;min-width:0;padding:0 13px;font-size:var(--fs-label)}
  .hp-manual{gap:13px;padding:16px}
  .hp-ov .settings-body h2.hp-ans-q{font-size:19px;margin-bottom:18px}
}

/* .match-vid is a FIGURE slot on a real match card (“Video available · 1.2 GB”).
   Here it carries words, so it takes the word face — THE TYPE RULE, below. */
.hp-card .match-vid{font-family:var(--sans);font-weight:600;letter-spacing:0}

/* ── The chapter overlay ───────────────────────────────────────────
   OPENED BY CSS, NOT BY SCRIPT. `.settings-overlay` is display:none
   until `.show`; here `:target` does the same job, so a chapter opens
   from an ordinary link, deep-links from outside the page, and is on
   the browser's back stack for free. The only script on the page
   closes it with Escape and holds the page behind it still — both
   comforts, neither load-bearing. */
.settings-overlay.hp-ov:target{display:flex}
.hp-scrim{position:absolute;inset:0;cursor:default}
.hp-ov .settings-box{position:relative;z-index:1;max-width:780px}
/* margin:0 is load-bearing. legal.css gives every h2 inside .lg-wrap a
   38px top margin for the document's heading rhythm, and the chapter
   title is an h2 inside .lg-wrap — so the dialog header was carrying
   50px of document rhythm it has no use for, which on a phone is a
   tenth of the screen spent above the first word. */
.hp-ov .settings-hdr h2{font-size:var(--fs-ld-h3);letter-spacing:-.2px;margin:0}
/* .settings-x is a <button> in the app and a link here, so it needs the
   centring a button gets for free. */
a.hp-x{display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:19px}
/* The close, the back link and the two step links are the only controls in a
   chapter; on a phone they all have to be thumb-sized. Padding, not height,
   so the header keeps its rhythm. */
@media(max-width:560px){
  .hp-back{min-height:44px;padding:0}
  .hp-step-l{display:inline-flex;align-items:center;min-height:44px}
  .hp-step-nav{margin-top:28px;padding-top:14px}
}
.hp-ov .settings-body{padding:10px 34px 34px}
.hp-ov .settings-body>h3:first-child{margin-top:14px}
/* The page shell sets a 90px bottom padding for the document; inside a
   scrolling modal that is just a hole at the end. */
.hp-ov .settings-body>*:last-child{margin-bottom:0}
body.hp-locked{overflow:hidden}

/* The run of questions at the foot of a chapter gets a quiet rule above it,
   so "here is how it works" and "here is what people ask about it" read as
   two things without needing a second heading level. */
.hp-qs{margin-top:36px;padding-top:28px;border-top:1px solid var(--b)}
.hp-qs-h{font-weight:600;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--t3);margin-bottom:12px}

/* ── Figures ──────────────────────────────────────────────────────*/
.hp-fig{margin:26px 0 30px}
.hp-fig figcaption{font-size:var(--fs-h3);line-height:1.72;color:var(--t3);margin-top:14px}
.hp-fig figcaption b{color:var(--t2);font-weight:600}
/* A mocked screen sits on the app's page background, inside the app's
   hairline — the same frame every panel in the app has. */
.hp-scr{background:var(--bg);border:1px solid var(--bm);border-radius:12px;padding:12px;overflow:hidden}
.hp-scr-t{font-weight:600;font-size:var(--fs-xs);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--t3);margin:0 2px 10px;display:flex;gap:8px;align-items:center}
.hp-scr-t .sp{margin-left:auto}
.hp-card-plain{background:var(--s1);border:1px solid var(--b);border-radius:12px;padding:12px}
.hp-draw{background:var(--s1);border:1px solid var(--b);border-radius:14px;padding:24px 22px}
.hp-draw svg{display:block;width:100%;height:auto;max-width:540px;margin:0 auto}

/* ── The pitch plate — what the app's own footage looks like ───────
   Stays dark in both themes: it stands for video, and the app's video
   stages are black in both themes for the same reason. */
/* The app's video stages are a BLACK PANEL with the picture letterboxed
   inside it — the footage almost never matches the panel's aspect. So the
   wrapper is the black plate (and stretches to the row), and the picture
   sits centred in it. */
.hp-vwrap{position:relative;background:#000;border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.hp-vid{width:100%;display:block}
.hp-vid svg{display:block;width:100%;height:auto}

/* ── Tag buttons — copied from css/tagger.css + css/responsive.css ──
   The WINDOWED chip: a keycap badge on the left, the label centred, a
   4px bar of the tag's own colour down the left edge. (The stacked,
   mirrored dock is the FULLSCREEN layout and is a different shape.) */
.hp-taggrid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.hp-tag{position:relative;height:36px;padding:4px 11px;border-radius:9px;overflow:hidden;
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;
  font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;color:var(--t);
  background:color-mix(in srgb,var(--tc) 8%,var(--s2));
  border:1px solid color-mix(in srgb,var(--tc) 20%,var(--bm))}
.hp-tag::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;
  background:var(--tc);opacity:.85}
.hp-tag .k{flex-shrink:0;font-family:var(--mono);font-weight:500;font-size:9px;padding:2px 5px;border-radius:4px;
  border:1px solid color-mix(in srgb,var(--tc) 45%,var(--bm));
  background:color-mix(in srgb,var(--tc) 14%,transparent);color:var(--tc)}
:root[data-theme="light"] .hp-tag{background:color-mix(in srgb,var(--tc) 12%,#fff);
  border-color:color-mix(in srgb,var(--tc) 32%,transparent)}
:root[data-theme="light"] .hp-tag::before{opacity:1;background:color-mix(in srgb,var(--tc) 62%,#2b2734)}
:root[data-theme="light"] .hp-tag .k{color:color-mix(in srgb,var(--tc) 58%,#2b2734)}

/* The Tag Panels preview card — copied from css/tools.css .prev-tag. */
.hp-prev{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hp-prevtag{height:52px;border-radius:var(--rsm);border:1px solid var(--b);background:var(--s2);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:8px 10px;position:relative;overflow:hidden}
.hp-prevtag::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--tc)}
.hp-prevtag .h{font-weight:600;font-size:9px;letter-spacing:.04em;color:var(--t3);margin-bottom:3px}
.hp-prevtag .n{font-size:var(--fs-label);font-weight:600;color:var(--tc)}

/* ── Review clip rows — copied from css/review.css .rev-clip-item ──*/
.hp-side{background:var(--s1);border:1px solid var(--b);border-radius:var(--r);overflow:hidden}
.hp-cliprow{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--b)}
.hp-cliprow:last-child{border-bottom:0}
.hp-cliprow.on{background:var(--s2);border-left:3px solid var(--ac);padding-left:9px}
.hp-cb{display:inline-block;width:13px;height:13px;border:1px solid var(--bs);border-radius:3px;flex:none;
  vertical-align:middle}
.hp-thumb{width:52px;height:34px;border-radius:4px;background:var(--s3);flex:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;color:var(--t3)}
.hp-clipinfo{flex:1;min-width:0}
.hp-clipact{display:block;font-size:var(--fs-sm);font-weight:600;line-height:1.3}
.hp-clipmeta{display:block;font-family:var(--mono);font-size:var(--fs-xs);color:var(--t3);margin-top:2px}
.hp-kebab{flex:none;color:var(--t3);font-size:15px;letter-spacing:1px;line-height:1}

/* Transport + action pills — copied from .rev-ctrl-btn / .match-open. */
.hp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.hp-pill{height:30px;padding:0 11px;border-radius:var(--rsm);border:1px solid var(--bm);background:var(--s2);
  font-family:var(--sans);font-size:var(--fs-label);font-weight:600;color:var(--t2);
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.hp-pill.on{border-color:var(--acb);background:var(--acd);color:var(--ac)}
.hp-pill.solid{border-color:var(--ac);background:var(--ac);color:var(--on-ac)}
.hp-pill.mono{font-family:var(--mono);font-weight:500}

/* The match timeline: a track of coloured ticks and an accent playhead. */
.hp-track{position:relative;height:8px;border-radius:4px;background:var(--s3);flex:1;min-width:120px}
.hp-track i{position:absolute;top:-3px;width:3px;height:14px;border-radius:2px}
.hp-track b{position:absolute;top:-2px;left:2%;width:12px;height:12px;border-radius:50%;background:var(--ac)}

/* ── Clip Library table — copied from css/clipexplorer.css ─────────*/
.hp-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);background:var(--s1);
  border:1px solid var(--b);border-radius:12px;overflow:hidden}
.hp-tbl thead th{background:var(--s2);color:var(--t2);text-align:left;font-weight:600;
  font-size:var(--fs-xs);letter-spacing:var(--ls-label);text-transform:uppercase;padding:9px 12px}
.hp-tbl td{padding:10px 12px;border-top:1px solid var(--b);vertical-align:middle;color:var(--t2)}
.hp-tbl td.m{color:var(--t)}
.hp-tbl td.t{font-family:var(--mono);font-size:var(--fs-label)}
.hp-cetag{display:inline-block;font-size:var(--fs-label);font-weight:700;padding:2px 9px;border-radius:20px;
  border:1px solid var(--bm);background:var(--s3);color:var(--t)}
.hp-none{font-weight:600;font-size:9.5px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t3);margin-left:7px}

/* ── Presentation editor ───────────────────────────────────────────
   The tool rail is a VERTICAL list of named tools down the left of the
   stage, which is what the editor actually shows on a laptop. */
.hp-pr{display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:start}
.hp-tools{display:flex;flex-direction:column;gap:1px}
.hp-tool{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:var(--rsm);
  font-size:var(--fs-label);color:var(--t2)}
.hp-tool.on{background:var(--acd);color:var(--ac);font-weight:600}
.hp-tool span{width:13px;height:13px;flex:none;display:block}
.hp-tool svg{width:13px;height:13px;display:block}
.hp-marks{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;
  font-size:var(--fs-label);color:var(--t2);align-items:center}
.hp-marks i{width:9px;height:9px;border-radius:50%;background:#F5C518;display:inline-block;margin-right:6px}
@media(max-width:560px){.hp-pr{grid-template-columns:1fr}
  .hp-tools{flex-direction:row;flex-wrap:wrap;gap:5px}
  .hp-tool{border:1px solid var(--b);background:var(--s1);padding:5px 8px;font-size:var(--fs-label)}
  .hp-tool.on{border-color:var(--acb)}}

/* ── Small shared bits ────────────────────────────────────────────*/
.hp-parts{display:grid;gap:10px;margin:20px 0 6px}
.hp-part{display:flex;gap:15px;align-items:flex-start;padding:14px 16px;background:var(--s1);
  border:1px solid var(--b);border-radius:var(--rsm)}
.hp-part .chip{flex:0 0 56px;min-height:26px;border-radius:5px;background:var(--s3);border:1px solid var(--bm);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);color:var(--t2)}
.hp-part b{display:block;font-size:var(--fs-sm);color:var(--t);font-weight:600;margin-bottom:2px}
.hp-part i{display:block;font-style:normal;font-size:var(--fs-sm);line-height:1.6;color:var(--t2)}

.hp-two{display:grid;grid-template-columns:1fr auto 1fr;gap:11px;align-items:center}
.hp-step{background:var(--s1);border:1px solid var(--b);border-radius:var(--rsm);padding:11px}
.hp-step-h{display:flex;align-items:center;gap:7px;font-size:var(--fs-label);color:var(--t2);margin-bottom:9px}
.hp-step-h b{width:17px;height:17px;border-radius:50%;background:var(--acd);border:1px solid var(--acb);
  color:var(--ac);font-family:var(--mono);font-size:9.5px;display:flex;align-items:center;justify-content:center;
  flex:none;font-weight:400}
.hp-step .row{display:flex;flex-direction:column;gap:5px}
.hp-arw{color:var(--t3);font-size:15px;text-align:center}
@media(max-width:560px){.hp-two{grid-template-columns:1fr;gap:8px}.hp-arw{transform:rotate(90deg)}}

.hp-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:8px;margin:14px 0 6px}
.hp-key{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--s1);
  border:1px solid var(--b);border-radius:var(--rsm);font-size:var(--fs-sm);color:var(--t2);line-height:1.5}
.hp-key kbd{font-family:var(--mono);font-size:var(--fs-label);color:var(--t);background:var(--s3);
  border:1px solid var(--bm);border-radius:4px;padding:3px 8px;flex:none}

.hp-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 26px}
.hp-half{background:var(--s1);border:1px solid var(--b);border-radius:12px;padding:20px 22px}
.hp-half h4{font-size:var(--fs-ld-body);font-weight:600;color:var(--t);margin:0 0 12px}
.hp-half ul{margin:0 0 0 17px}
.hp-half li{font-size:var(--fs-h3);line-height:1.7;color:var(--t2);margin-bottom:7px}
@media(max-width:560px){.hp-split{grid-template-columns:1fr}}

/* Inside an overlay the reading measure is the box, so the document's
   own heading rhythm is a touch too airy. */
.hp-ov .settings-body h3{font-size:16.5px;margin:32px 0 12px}
.hp-ov .settings-body p,.hp-ov .settings-body li{font-size:15px;line-height:1.78}
.hp-ov .settings-body li{margin-bottom:9px}
.hp-ov .settings-body ul,.hp-ov .settings-body ol{margin:14px 0 20px}
.hp-ov .settings-body table{font-size:var(--fs-h3)}
.hp-ov .settings-body table th,.hp-ov .settings-body table td{padding:13px 15px}

/* ── The setup card's controls, at mock scale ──────────────────────
   The right-hand column of Record & Tag: a name field, the tag-panel
   ticks, the folded quality summary, the record button. Same shapes as
   .ai / .set-row / .rec-btn in the app, drawn small. */
.hp-fld{height:30px;border-radius:var(--rsm);border:1px solid var(--bm);background:var(--s2);
  display:flex;align-items:center;padding:0 10px;font-size:var(--fs-label);color:var(--t3);margin-bottom:6px}
.hp-fld.v{color:var(--t)}
.hp-fld .sp{margin-left:auto;font-family:var(--mono);font-size:var(--fs-xs);color:var(--t3)}
.hp-lbl{font-weight:600;font-size:9.5px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t3);
  display:flex;align-items:center;gap:6px;margin:12px 2px 7px}
.hp-lbl .sp{margin-left:auto;color:var(--ac);font-size:var(--fs-xs);font-weight:600;
  text-transform:none;letter-spacing:0}
.hp-row{display:flex;align-items:center;gap:8px;font-size:var(--fs-label);color:var(--t);padding:4px 2px}
.hp-row.off{color:var(--t3)}
.hp-row .n{margin-left:auto;font-size:9.5px;color:var(--t3)}
.hp-tick{width:13px;height:13px;border-radius:3px;border:1px solid var(--bs);flex:none}
.hp-tick.on{background:var(--ac);border-color:var(--ac)}
.hp-go{height:34px;border-radius:var(--rsm);background:var(--ac);color:var(--on-ac);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:700;margin-top:9px}
.hp-note{display:flex;gap:7px;align-items:center;margin-top:8px;padding:7px 10px;border-radius:var(--rsm);
  background:var(--acd);border:1px solid var(--acb);font-size:var(--fs-xs);color:var(--t2);line-height:1.45}

/* Chips over the footage — the REC dot + clock and the tag counter the
   camera screen actually carries. */
.hp-vchip{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:6px;
  padding:3px 8px;border-radius:5px;background:rgba(0,0,0,.55);color:#fff;font-family:var(--mono);font-size:var(--fs-xs)}
.hp-vchip .dot{width:6px;height:6px;border-radius:50%;background:var(--rd);flex:none}
.hp-vfoot{position:absolute;left:9px;right:9px;bottom:8px;display:flex;justify-content:space-between;
  font-weight:600;font-size:var(--fs-xs);color:rgba(255,255,255,.85);
  /* the readout sits over the picture, not over chrome — same trick the
     camera HUD uses so a white pitch line never swallows it */
  text-shadow:0 1px 3px rgba(0,0,0,.9)}
.hp-2col{display:grid;grid-template-columns:1.45fr 1fr;gap:10px;align-items:stretch}
/* Review puts its clip list on the LEFT and the stage on the right. */
.hp-2col.side-first{grid-template-columns:1fr 1.45fr}
/* One column on a phone. Stated for the .side-first variant too — it is
   declared after this rule, so a bare `.hp-2col` selector here would lose
   to it at every width. */
@media(max-width:760px){.hp-2col,.hp-2col.side-first,.hp-3col{grid-template-columns:1fr}}
/* The Clip Library's three search boxes. A class rather than an inline
   grid-template on the element, because an inline style outranks the phone
   breakpoint above and would leave three unreadable boxes on a 390px
   screen. */
.hp-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}

/* legal.css left-aligns every <td>/<th> in the document, which is right for
   the prose tables on this page and wrong for the season grid, where the
   heat cells are centred and the figures are right-aligned. Scoped to the
   mock so the policy-page tables are untouched. */
.hp-fig .fi-grid .fi-g-c,.hp-fig .fi-grid .fi-g-mh{text-align:center}
.hp-fig .fi-grid .fi-g-n,.hp-fig .fi-grid .fi-g-tc{text-align:right}

/* A three-column comparison crushes to one word per line inside a modal on a
   390px screen. legal.css already wraps these in .lg-scroll; give the table
   a floor so that wrapper actually scrolls, instead of the columns
   collapsing into unreadable ribbons. */
.hp-ov .lg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hp-ov .lg-scroll table{min-width:520px}


/* ── The pre-match checklist ───────────────────────────────────────
   A prose callout listing three things to do reads as a paragraph you can
   skim past; a ticked list reads as something to work through. Same accent
   rail as .pg-callout so it belongs to the same family, but each line
   carries its own box so the reader can count what is left. The ticks are
   drawn rather than typed — a ✓ character inherits the body font and lands
   at a different size in every theme. */
.hp-check{background:var(--s1);border:1px solid var(--b);border-left:2px solid var(--ac);
  border-radius:12px;padding:20px 22px;margin:24px 0 28px}
.hp-check-h{font-weight:600;font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--t3);margin-bottom:12px}
.hp-check ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hp-check li{position:relative;padding:0 0 0 27px;margin:0}
.hp-check li::before{content:'';position:absolute;left:0;top:2px;width:16px;height:16px;
  border-radius:4px;border:1.5px solid var(--acb);background:var(--acd)}
.hp-check li::after{content:'';position:absolute;left:5.5px;top:5.5px;width:4px;height:8px;
  border-right:1.8px solid var(--ac);border-bottom:1.8px solid var(--ac);
  transform:rotate(42deg)}
.hp-check b{display:block;font-size:var(--fs-body);color:var(--t);font-weight:600;margin-bottom:3px}
.hp-check span{display:block;font-size:var(--fs-sm);line-height:1.65;color:var(--t2)}

/* ══ PHONES AND TABLETS ════════════════════════════════════════════
   A chapter is a DIALOG on a laptop and a PAGE on a phone, and it was
   only ever dressed as the first. At 390px the scrim's 20px gutter plus
   the body's 22px padding spend a fifth of the line on nothing, and the
   rounded box floating in a short viewport gives you a scroll inside a
   scroll. So below 760px the sheet takes the screen: no gutter, no
   rounding, the header fixed as the flex row it already is, and the body
   the only thing that moves. 100dvh, not vh, because iOS Safari's toolbar
   makes vh taller than the screen and buries the last line of every
   chapter under it. */
@media(max-width:760px){
  /* FULL-BLEED SIDEWAYS, BEZEL-AWARE VERTICALLY. Killing the padding
     outright is what made the × unreachable in the installed app: with
     `viewport-fit=cover` (the meta in help.html) a `height:100dvh` sheet
     starts ABOVE the status bar, so the header row holding the only way out
     of a full-bleed chapter was painted under the clock. The sheet still
     takes the whole width — the gutter there was never the problem — but it
     is now --safeh tall and sits below the notch. */
  .settings-overlay.hp-ov{padding:var(--sat) var(--sar) var(--sab) var(--sal)}
  .hp-ov .settings-box{max-width:none;width:100%;height:var(--safeh);max-height:var(--safeh);
    border:0;border-radius:0}
  .hp-ov .settings-hdr{padding:12px 14px}
  .hp-ov .settings-hdr h2{font-size:var(--fs-ld-h3);line-height:1.3;padding-right:10px}
  /* The × is the only way out of a full-bleed sheet — the scrim is behind it,
     so it has to be a thumb-sized target rather than a glyph. */
  a.hp-x{width:44px;height:44px;flex:none;margin:-6px -10px -6px 0}
  /* env() so the last line clears the home indicator on a gesture-bar phone. */
  .hp-ov .settings-body{padding:8px 18px calc(30px + env(safe-area-inset-bottom))}
  .hp-ov .settings-body h3{font-size:15.5px;margin:26px 0 10px}
  .hp-ov .settings-body p,.hp-ov .settings-body li{font-size:14.5px;line-height:1.75}
  .hp-ov .settings-body table{font-size:var(--fs-body)}
  .hp-scr{padding:9px;border-radius:var(--r)}
  .hp-draw{padding:12px 10px}
  .hp-fig{margin:15px 0 18px}
  .hp-fig figcaption{font-size:var(--fs-sm)}
  .hp-qs{margin-top:22px;padding-top:16px}
  .pg-q summary{padding:13px 14px;font-size:var(--fs-h3)}
  .pg-q-b{padding:0 14px 14px}
  .pg-steps li{padding-left:40px}
  .hp-pill{height:28px;padding:0 9px;font-size:var(--fs-label)}
  .hp-part{padding:9px 10px;gap:10px}
  .hp-part .chip{flex-basis:46px}
  .hp-half{padding:13px 14px}
  .hp-check{padding:12px 13px}
  /* The mock tables carry real columns; scroll them rather than crushing
     them, and drop the prose-table floor that would otherwise force a
     two-column mock 520px wide. */
  .hp-ov .lg-scroll .hp-tbl{min-width:380px}
}

/* Narrow phones. The two-up tag grids are the first thing to give: an
   "Opp Ball Lost" chip in half of a 330px line is two words on two lines
   with the keycap badge squeezed between them. */
@media(max-width:400px){
  .hp-ov .settings-body{padding:8px 15px calc(30px + env(safe-area-inset-bottom))}
  .hp-taggrid,.hp-prev{grid-template-columns:1fr}
  /* .hp-3col's own three-column rule is declared AFTER the 760px collapse
     above and beats it at every width, exactly as the comment there warns
     for .side-first. Restated here, where nothing follows it. */
  .hp-3col{grid-template-columns:1fr}
  .hp-prevtag{height:46px}
  .hp-keys{grid-template-columns:1fr}
  .hp-check li{padding-left:24px}
}

/* Tablets and up: the box may as well use the width it has. The card grid
   already breaks out of the reading measure; the chapter behind it was
   still held to a phone-era 780. */
@media(min-width:1024px){
  .hp-ov .settings-box{max-width:min(880px,92vw)}
}

/* ── The Report Content form ───────────────────────────────────────
   The only form on the site that a distressed person might be filling in, so
   it is deliberately plainer than the rest of the marketing furniture: one
   column, generous targets, and the hint text above the field rather than
   below it, where it is read before the answer instead of after. */
.rp-form{margin:18px 0 24px}
.rp-fld{display:block;margin-bottom:18px}
.rp-lb{display:block;font-size:var(--fs-ld-body);font-weight:600;color:var(--t);margin-bottom:3px}
.rp-lb em{font-style:normal;font-weight:400;color:var(--t3)}
.rp-hint{display:block;font-style:normal;font-size:var(--fs-sm);line-height:1.6;color:var(--t3);margin-bottom:8px}
.rp-form textarea,.rp-form input[type=text],.rp-form input[type=email],.rp-form select{
  width:100%;font:inherit;font-size:var(--fs-ld-body);color:var(--t);background:var(--s1);
  border:1px solid var(--bm);border-radius:var(--rsm);padding:10px 12px;line-height:1.55;
  resize:vertical}
.rp-form textarea:focus,.rp-form input:focus,.rp-form select:focus{outline:none;border-color:var(--ac);
  box-shadow:0 0 0 3px var(--acd)}
/* The select carries the routing for the whole page, so it must not read as
   disabled. Safari greys a native select on a tinted background and iOS
   shrinks the text to 11px unless the font-size is inherited explicitly —
   both are covered above; this only restores the arrow the reset removes. */
.rp-form select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px}
/* The tick is the routing switch for the whole page, so it gets the weight of
   a decision rather than the weight of a checkbox: its own card, the accent
   rail a callout would have, and a visibly different state when it is on. */
.rp-tick{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  background:var(--s1);border:1px solid var(--b);border-left:2px solid var(--rd);
  border-radius:var(--rsm);padding:14px 16px;margin-bottom:22px}
.rp-tick:has(input:checked){background:var(--acd);border-color:var(--acb);border-left-color:var(--rd)}
.rp-tick input{width:19px;height:19px;flex:none;margin:1px 0 0;accent-color:var(--ac);cursor:pointer}
.rp-tick b{display:block;font-size:var(--fs-ld-body);color:var(--t);font-weight:600;margin-bottom:3px}
.rp-tick i{display:block;font-style:normal;font-size:var(--fs-sm);line-height:1.65;color:var(--t2)}
.rp-tagline{font-size:var(--fs-sm);line-height:1.6;color:var(--t3);margin:12px 0 0}
/* The net on report.html — the copy of the report shown after the mail
   handoff, so a handoff that silently did nothing costs a click instead of a
   retyped child-safety report. Styled as a quiet panel rather than an error:
   it appears every time, including when the mail app opened perfectly, and
   must not read as "something went wrong". */
.rp-net{border:1px solid var(--b);border-left:2px solid var(--ac);border-radius:var(--rsm);
  background:var(--s1);padding:16px 18px;margin:20px 0 26px}
.rp-net[hidden]{display:none}
.rp-net-h{margin:0 0 14px;font-size:var(--fs-h3);line-height:1.65;color:var(--t2)}
.rp-net-l{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--t3);margin:0 0 4px}
.rp-net-f{width:100%;font:inherit;font-size:var(--fs-body);color:var(--t);background:var(--bg);
  border:1px solid var(--bm);border-radius:var(--rsm);padding:9px 11px;line-height:1.6;
  margin-bottom:12px;resize:vertical}
.rp-net-f:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--acd)}
textarea.rp-net-f{font-family:var(--mono);font-size:var(--fs-sm);white-space:pre}
.rp-net .pg-btns{margin:4px 0 0}
.rp-net-s{margin:10px 0 0;font-size:var(--fs-sm);color:var(--t3);min-height:1.2em}
/* Contact-form result note. Same three states as .ld-form-note on the landing
   page (landing.css) and deliberately the same colours — a visitor who sent
   the landing form and then this one should not be shown two different
   vocabularies for "it worked". Kept here rather than shared because
   landing.css is not loaded on the support pages. */
.ct-note{margin:14px 0 0;padding:10px 12px;border-radius:var(--rsm);border:1px solid var(--bm);
  background:var(--s1);color:var(--t2);font-size:var(--fs-body);line-height:1.55}
.ct-note.ok{background:var(--okd);border-color:var(--okb);color:var(--ok)}
.ct-note.err{background:color-mix(in srgb,var(--rd-str) 14%,transparent);border-color:color-mix(in srgb,var(--rd-str) 40%,transparent);color:var(--rd-str)}
/* The mail-app escape hatch, shown only when a send has actually failed. */
.ct-alt{margin:10px 0 0;font-size:var(--fs-body)}
@media(max-width:560px){
  .rp-tick{padding:12px 13px;gap:10px}
  .rp-form .pg-btn{width:100%}
}