/* ============================================================================
   site-adapter.css — reskins the jb1 Help replica bundle to the jblock site look.

   LOAD ORDER IS LOAD-BEARING (index.html):
       /assets/style.css   → site chrome + tokens (--fg, --muted, --bg-primary…)
       css/help.css        → the replica's component CSS (copied byte-identical)
       css/site-adapter.css → THIS FILE, loads LAST so it wins ties by order

   help.css is copied verbatim (copy-is-content); every adaptation to the site
   lives here. Three sections:
     A — the handful of jb1 main.css rules help.css silently depends on, ported
         in (help.css was authored to run under main.css).
     B — convert the in-app fixed-height app-shell scroll into document scroll.
     C — site-alignment + hardening.
   ============================================================================ */


/* ── Section A — jb1 main.css survivors ─────────────────────────────────────
   help.css assumes these main.css rules are present. We do NOT copy main.css
   (it drags in the whole game shell); instead we port only the rules the help
   view actually consumes, with provenance line-ranges into the bundle's
   css/main.css (the copy at ~/Coding/jb1/handoff/outgoing/help-page/css/main.css).

   NOTE — the bundle's universal reset `*,*::before,*::after{box-sizing:border-box;
   margin:0;padding:0}` (main.css:16-20) is DELIBERATELY NOT ported: the site
   already sets `* { box-sizing: border-box }` (style.css:24), and the help
   content the accordion generates is list-/link-/heading-free (verified: the
   js/help/* generators emit zero <h1-6>/<a>/<ul>/<ol>/<li>). The site also
   supplies sensible `p, ul, ol { margin: .875rem 0 }` / `li { margin: .3rem 0 }`
   fallbacks (style.css:288-290), and every help paragraph is a classed
   `.help-body-para` with explicit help.css margins — so no UA-margin leak. This
   drop is safe ONLY WHILE help content stays list/link/heading-free; if a future
   topic emits one, re-port the reset (or neutralize that element here). */

/* --mist-tint — main.css:12-14. Consumed by help.css's dark-family expand-all
   glyph rule ([data-family="dark"] .help-expand-all { color: var(--mist-tint) },
   help.css:107). Fixed token, palette-decoupled. */
:root {
  --mist-tint: #e6eef7;
}

/* .tray-piece + cells — main.css:1300-1327 — the static piece glyphs the help
   gallery / difficulty selector render.
   PORTED WITHOUT `filter`, `cursor`, `touch-action`, and `transition`:
   this sheet loads AFTER help.css, so those four would beat help.css's
   `.piece-static { filter: none }` (equal specificity, later order) and paint a
   drop-shadow the replica doesn't have; the page has no drag, so they're dead
   here anyway. */
.tray-piece {
  display: grid;
  gap: 3px;
  padding: 0;
  background: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.tray-piece .piece-cell {
  width: var(--cell-size, 1rem);
  height: var(--cell-size, 1rem);
  border-radius: 3px;
}

.tray-piece .piece-cell.empty {
  background: transparent;
}

/* Show the help view — main.css:737. help.css:9 declares `.help-view {
   display: none }` (the in-game view is hidden until routed to); this restores
   it on the help page. Higher specificity + later order beats the bare rule. */
body[data-page="help"] .help-view {
  display: flex;
}


/* ── Section B — app-shell scroll → document scroll ─────────────────────────
   In the game the help view lives inside a fixed-height `#app`
   (main.css: `body[data-page="help"] #app { height:100dvh; overflow:hidden }`)
   and `.help-topic-list` is the only scroller. On the site there is no `#app`
   wrapper — the view sits in `<main>` and the whole document scrolls — so we
   release the internal clamps and let content flow to natural height. Both rules
   are `body[data-page="help"]`-prefixed so they beat the bare help.css rules by
   specificity as well as order. */
body[data-page="help"] .help-view { overflow: visible; padding: 0; }
body[data-page="help"] .help-topic-list { flex: none; min-height: auto; overflow-y: visible; }


/* ── Section C — site alignment + hardening ──────────────────────────────── */

/* The expand-all toolbar button ships in the markup with `hidden` so it is never
   a dead control when JS is off; boot.js un-hides it after the accordion mounts.
   `[hidden]` alone yields `display:none`, but help.css sets `.help-expand-all`
   to `display:flex`/`inline-flex`, and a bare class beats the UA `[hidden]` rule
   — so the attribute would be ignored and the button would show pre-JS. Pin
   `[hidden] → display:none` explicitly. (Lesson carried from the superseded
   feat/how-to-play-page branch, commit 86c5129.) */
.help-expand-all[hidden] { display: none; }

/* UA buttons default to Arial, not the page font — `<button>` does not inherit
   `font-family`. The accordion + expand-all controls are buttons; make them
   inherit the site body font so their text matches the rest of the page. */
.help-view button { font-family: inherit; }

/* Ink remap: point help.css's text tokens at the site's ink ramp. setActivePalette
   writes `--text-primary`/`--text-secondary` onto <html>; pinning them on
   `.help-view` beats that inline declaration for the whole subtree — custom
   properties resolve by ancestor proximity, so the nearer `.help-view` value
   wins regardless of specificity, and every `--text-*` consumer in help.css is a
   `.help-view` descendant (verified). --fg #14213b (navy ink) / --muted #4a5468. */
.help-view { --text-primary: var(--fg); --text-secondary: var(--muted); }

/* DELIBERATELY LEFT RUNTIME-DERIVED (pending owner render review — each is a
   one-line flip here if the owner wants it):
     --accent-primary  — stays bauhaus cobalt (setActivePalette). The page shows
                         no site gold: zero <h2>s → the site's gold-tile motif
                         never appears. Flip to `var(--navy)` for a navy accent.
     --border-color    — stays runtime-derived from the active palette.
     --bg-* (secondary/…) — stay runtime-derived; the page background already
                         matches (style.css --bg-primary #e6eef7 ≡ mist_blue). */


/* ── Section D — web-optimized heading row (owner, 2026-07-23) ──────────────
   The app stacked h1-height header + a 59px toolbar band holding one 44px
   chevron — two voids (~90px) on a web page. Web-optimize: the <h1> and the
   expand-all toolbar share ONE flex row inside .help-view (markup:
   index.html .help-heading), the hairline moves under that row, and the site
   header's 2.25rem gap tightens to 1.5rem on this page only. The toolbar keeps
   its class/id so boot.js + help.css button styling are untouched. */
body[data-page="help"] header.site {
  /* 0: the heading row below owns ALL the band's spacing via symmetric padding,
     so the title sits dead-center between the two hairlines. (Site default
     margin-bottom is 2.25rem; any margin here would push the title off-center
     within the hairline-to-hairline band.) */
  margin-bottom: 0;
}

body[data-page="help"] .help-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--rule);   /* site-navy hairline under the row */
  /* SYMMETRIC padding — the h1 + chevron center vertically between the
     header.site hairline above and this row's own hairline below. */
  padding: 14px 0;
}

body[data-page="help"] .help-heading h1 {
  margin: 0;                         /* style.css h1: 0.25rem 0 1.25rem */
}

body[data-page="help"] .help-toolbar {
  padding: 0;                        /* help.css: 4px 0 10px */
  border-bottom: none;               /* hairline now lives on .help-heading */
}

body[data-page="help"] .help-expand-all {
  /* Column-align the expand/collapse glyph with the topic rows' carets below.
     The button is a 44px touch target holding a 22px glyph → the glyph sits
     (44 − 22)/2 = 11px inside the button's right edge, while the row carets
     hug their row edge. Pull the button right by that inset so the glyph's
     center lands on the carets' center (measured: 587px → 598px ≡ caret cx). */
  margin-right: calc((44px - 22px) / -2);
}

/* ── Section E · Scoring-table row headers ─────────────────────────────────
   `bonusTable()` (js/help/topic-bodies.js) emits each row's LABEL cell as
   `<th scope="row">` so assistive tech announces "1 section, +10" rather than a
   bare "+10". help.css styles that table entirely through `td` selectors —
   :831 (padding + ink), :841 (`td:first-child` weight/ink), :846
   (`tr:not(:last-child) td` row rule) — and its ≥600px block carries a `th`
   rule sized for a COLUMN header (:1006, a deliberately smaller font). So
   without the rules below the label cell would lose its padding and weight,
   render bold+centered per UA default, shrink at ≥600px, and leave only HALF a
   border under each row.

   These restore the exact `<td>` presentation: the change is a11y-only and
   pixel-neutral. Keep them in step with help.css's `td` rules. */
.help-scoring-table th {
  padding: 6px 10px;                 /* ≡ help.css:831 .help-scoring-table td */
  font-weight: 500;                  /* ≡ help.css:841 td:first-child */
  color: var(--text-primary);        /* ≡ help.css:841 td:first-child */
  text-align: left;                  /* UA default for th is center */
  font-size: inherit;                /* neutralize help.css:1006's header sizing */
}

.help-scoring-table tr:not(:last-child) th {
  border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.1));
}

@media (orientation: portrait) and (min-width: 600px) {
  body[data-page="help"] .help-scoring-table th {
    /* Match the td clamp at :1010, NOT the column-header clamp at :1006. */
    font-size: inherit;
    padding: clamp(6px, 0.91vw, 7.8px) clamp(10px, 1.51vw, 13px);
  }
}

/* ── Section F · Topic previews wrap to two lines ──────────────────────────
   help.css:181-187 caps `.help-topic-preview` at `max-height: 1.5em` against a
   1.3 line-height. In the game that column is wide enough for one line, but at
   ~320px (or with enlarged text) the site's ~198px text column wraps the longer
   previews to two — and 1.5em then reveals a 2.5px sliver of the second line
   rather than hiding or eliding it. Measured at 320px: 4 of 6 previews clipped.

   Two full lines instead. `max-height` (not `height`) still drives the
   collapse-to-0 transition on `.help-topic.is-open`, and this is a ceiling, so
   single-line previews at wider viewports are unchanged. */
.help-topic-preview {
  max-height: 2.6em;                 /* 2 lines @ line-height 1.3 */
}