/* ============================================================================
   Help - intent-based topic list + search, in BACKBONE.

   Scoped to /help/ only (not shared like home.css), so this is the small,
   local stylesheet the design system asks for instead of growing the shared
   four-page home.css file. Builds entirely on primitives home.css already
   ships and this page already loads - .wrap, .doc, .doc-head, .toc, .empty,
   h1..h3 - and adds only what those primitives do not cover: the search bar,
   the intent filter chips' pressed state, and the topic disclosures.

   The topic content itself lives in index.html, not in help.js, on purpose:
   with JS disabled every group and topic must still be present and readable
   (search degrades to "do nothing", not "show nothing" - see help.js's header
   comment). help.js reads this markup to build its search index rather than
   generating the markup from a JS-only data source.
   ========================================================================= */

/* ── Search + live count ─────────────────────────────────────────────────── */
.help-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 18px;
}
.help-tools .search {
  flex: 1 1 280px; min-width: 220px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--control-border);
  background: var(--slab);
  transition: border-color 160ms ease, background-color 160ms ease;
}
.help-tools .search:hover { border-color: var(--text); }
.help-tools .search:focus-within { border-color: var(--sig); outline: 2px solid var(--sig); outline-offset: 1px; }
.help-tools .search svg { color: var(--sig); flex: 0 0 auto; }
.help-tools .search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  color: var(--text);
  font: 400 14.5px/1.5 var(--sans);
  padding: 14px 0;
}
.help-tools .search input:focus { outline: none; }
.help-tools .search input::placeholder { color: var(--muted); opacity: 1; }
.help-tools .search input::-webkit-search-cancel-button { filter: grayscale(1); cursor: pointer; }

.help-count {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Expand all ───────────────────────────────────────────────────────────
   Injected by help.js (a control that does nothing without JS should not be
   in the markup at all). Deliberately quiet: it is an escape hatch for
   printing or reading end to end, not the primary way to use this page, and
   giving it the accent would argue for expanding everything — which is the
   8,435-pixel default this release removed. Same square geometry and same
   mono micro-label as the intent chips beside it. 44px tall on touch. */
.help-expand {
  flex: 0 0 auto;
  padding: 12px 14px;
  min-height: 44px;
  border: 1px solid var(--control-border);
  background: transparent;
  color: var(--muted);
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: border-color 160ms ease, color 160ms ease;
}
.help-expand:hover { border-color: var(--text); color: var(--text); }
.help-expand:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }
.help-expand[aria-pressed="true"] { border-color: var(--sig); color: var(--sig-text); }

/* ── Intent chips ─────────────────────────────────────────────────────────
   `.toc` / `.toc a` are home.css's square-chip primitive, reused as-is for
   the visual language; this file only adds the >=44px hit target (the plain
   TOC on the other three doc pages stays at its smaller 29px box, since
   those links are one-shot jumps, not a repeatedly-clicked filter control)
   and the "currently selected" state `.toc a:hover` does not already cover. */
.intent-nav { margin-bottom: 26px; }
.intent-nav .toc a {
  min-height: 44px;
  padding: 0 16px;
  display: inline-flex; align-items: center;
}
.intent-nav .toc a[aria-pressed="true"] {
  border-color: var(--sig);
  color: var(--sig-ink);
  background: var(--sig);
}
.intent-nav .toc a[aria-pressed="true"]:hover { color: var(--sig-ink); }

/* ── Topic groups + topics ───────────────────────────────────────────────
   Groups reuse `.doc section`'s divider rule (border-top between groups,
   none before the first) for free, since `.topic-group` IS a `<section>`.
   Topics are native <details>, open by default: the accordion is a scanning
   aid, not a content gate - see the help.js header comment on why nothing
   here may start hidden until a person or a script asks for it. */
/* `.empty` is included deliberately: home.css:455 gives it an explicit
   `display:flex`, which OUTRANKS the bare `[hidden]` attribute's UA
   `display:none` — so the no-results card renders permanently, on every load,
   even while all 21 topics match. Same trap already documented for b.css. */
.topic-group[hidden], .topic[hidden], .empty[hidden] { display: none !important; }

.topic {
  border-top: 1px solid var(--line);
  padding: 4px 0;
  /* Clears the sticky header when a topic is scrolled to. Now that topics are COLLAPSED by
     default, /help/#embed and its ~20 siblings are real navigation targets rather than anchors
     into an already-open wall of text — and without this the summary landed at top:0 with the
     header covering it to 69px, so a visitor following a deep link arrived at the ANSWER with the
     QUESTION hidden behind the chrome. `.doc section` in home.css already carries 88px for
     exactly this reason; this is the same number for the same header. */
  scroll-margin-top: 88px;
}
.topic:first-of-type { border-top: 0; }
.topic > summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  padding: 12px 0;
  display: flex; align-items: center; gap: 12px;
  font: 700 15.5px/1.35 var(--sans);
  color: var(--text);
}
.topic > summary::-webkit-details-marker { display: none; }
.topic > summary::marker { content: ""; }
.topic > summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-left: auto;
  border-right: 1px solid var(--sig);
  border-bottom: 1px solid var(--sig);
  rotate: 45deg;
  transition: rotate 180ms ease;
}
.topic[open] > summary::after { rotate: 225deg; }
.topic > summary:hover { color: var(--sig-text); }
.topic > summary:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }

.topic-body { padding: 0 0 16px; }
.topic-body > *:last-child { margin-bottom: 0; }

/* ── Empty search state ──────────────────────────────────────────────────
   `.empty` is home.css's shared no-results card (icon mark + h2 + p), reused
   verbatim - see /browse/'s emptyState() for the DOM-node precedent this
   mirrors. It sits inside `.doc`, so it also gets the mobile gutter fix. */
#help-empty { padding-block: clamp(36px, 6vw, 60px); }

/* ── Breadcrumb top bar ───────────────────────────────────────────────────
   One crumb (`Home / Help`) — this page sits one level below the marketing
   root and nothing here is deep enough to need more. Same micro-label
   register as `.help-index-h` / `.help-count`: mono, uppercase, wide
   tracking, muted — chrome that reads as chrome, not a second heading. */
.crumb { padding: 14px 0 0; }
.crumb ol {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.crumb li {
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.crumb li[aria-current] { color: var(--text); }
.crumb li:not(:first-child)::before { content: "/"; margin: 0 8px; color: var(--muted); opacity: 0.5; }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--sig-text); }
.crumb a:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }

/* ── Three-column docs layout ─────────────────────────────────────────────
   Markup: index.html (`.intent-nav`, left) + `.doc` (centre) as siblings in
   `.help-layout`, plus the sticky index help.js's mountTopicIndex() appends
   on the right. `.doc` is capped at a 74ch reading measure and this page's
   last content pixel sat at x=780 in a 1440 viewport with only a right rail
   — the left 45% was ALSO empty once the intent chips stopped needing a full
   row for themselves. Widening the measure would have been the wrong trade
   (prose is the one thing on this page that must stay narrow), so both
   margins get something load-bearing: browse-by-topic on the left, a view of
   all 22 questions on the right, while every answer on the page is collapsed.

   900px: below it the rail columns would squeeze `.doc` past a readable
   measure, so both collapse to the single stacked column this page has
   always had below its old 1080px break — the intent chips stay exactly
   where they already were (a horizontal bar at the top of the content), and
   the index is `display: none` rather than stacked, because a second copy of
   every question directly above the questions is noise on a phone. That is
   also why this is built in JS and not authored into the document: nothing
   is hidden from a no-JS visitor, the aside simply never exists for them. */
.help-layout { display: block; }
.help-index { display: none; }

@media (min-width: 900px) {
  /* Wider than the shared `--maxw` (1240px) on purpose: a fixed left rail
     plus a fixed right rail leaves too little of that width for `.doc` to
     read as a docs page rather than a squeezed one. Scoped to this page's
     own layout wrapper, so no other `.wrap` on the site is affected. */
  .wrap.help-layout { max-width: 1360px; }
  .help-index { display: block; }
  .help-layout {
    display: grid;
    grid-template-columns: clamp(160px, 18vw, 232px) minmax(0, 1fr) clamp(200px, 20vw, 260px);
    align-items: start;
    gap: clamp(24px, 3vw, 56px);
  }
  .help-layout > .doc { max-width: 800px; }
  .help-layout > .intent-nav {
    position: sticky;
    top: 88px;                          /* clears the 68px sticky header, plus a breath */
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    margin-bottom: 0;
  }
  /* Flat 14px links in a column, not chips in a row — the chip look earns its
     keep as a one-line filter bar; stacked eleven-deep it would read as a
     column of buttons rather than a nav. `aria-pressed` is still the state;
     only its paint changes. */
  .help-layout > .intent-nav .toc { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .help-layout > .intent-nav .toc a {
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-left: 2px solid transparent;
    background: transparent;
    font: 500 14px/1.4 var(--sans);
    letter-spacing: normal;
    text-transform: none;
  }
  .help-layout > .intent-nav .toc a:hover { border-left-color: var(--line); background: transparent; }
  .help-layout > .intent-nav .toc a[aria-pressed="true"] {
    border-left-color: var(--sig);
    background: transparent;
    color: var(--sig-text);
  }
  .help-layout > .intent-nav .toc a[aria-pressed="true"]:hover { color: var(--sig-text); }
}

.help-index {
  position: sticky;
  /* Clears the 68px sticky header plus a breath. */
  top: 88px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.help-index-h {
  margin: 0 0 14px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sig-text);
}
.help-index-group + .help-index-group { margin-top: 18px; }
.help-index-group[hidden] { display: none; }
.help-index-label {
  margin: 0 0 6px;
  font: 600 10px/1.4 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.72;
}
.help-index ul { list-style: none; margin: 0; padding: 0; }
.help-index li { margin: 0; }
.help-index li[hidden] { display: none; }
.help-index a {
  display: block;
  padding: 5px 0 5px 10px;
  margin-left: -12px;
  border-left: 2px solid transparent;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease;
}
.help-index a:hover { color: var(--text); border-left-color: var(--sig); }
.help-index a:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }
/* The question currently in view — help.js's spyTopics(). `aria-current` is the state, so it is
   also the selector: there is no second class that could drift out of step with what a screen
   reader is told. Same mechanism as `.doc-index a[aria-current]` in home.css. */
.help-index a[aria-current] { color: var(--text); border-left-color: var(--sig); font-weight: 600; }

/* ── Utility row: Copy page / Back to console ────────────────────────────
   help.js's mountUtilRow(). Quiet on purpose — a docs page's utility links
   are a footnote to the index, not a second set of primary actions, so this
   stays a plain-text list rather than reaching for the accent. */
.help-util {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.help-util-btn, .help-util-link {
  border: 0; background: transparent; padding: 0; margin: 0;
  font: 500 12.5px/1.4 var(--sans);
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
}
.help-util-btn:hover, .help-util-link:hover { color: var(--sig-text); }
.help-util-btn:focus-visible, .help-util-link:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }

@media (max-width: 640px) {
  .help-tools { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .help-index a { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .topic > summary::after { transition: none; }
}