/* ── The User Manual ────────────────────────────────────────────────────────────
   Loaded ONLY on /manual* (content_for :head → stylesheet_link_tag "web/manual",
   the same way about.html.erb links web/pages).

   ONE HARD RULE, and it is what makes this file work: **every value is a token.
   Zero hex literals. Zero [data-brand] blocks.** Every token has a value under
   BOTH brands, so this renders correctly under the legacy violet today and under
   Press the moment WEB_BRAND_PRESS deploys — with no conditional code and no
   second design pass. The two accents leaned on here (--brass-text, --badge-amber)
   are declared in the base :root and are brand-INDEPENDENT by design.

   Shape rule (press): actions square, surfaces soft, avatars round. A manual is a
   document, and documents are square → --r-action (3px) throughout, never
   --r-lg/--r-xl. */

/* ── The reading column ─────────────────────────────────────────────────────── */
.manual-page {
  max-width: var(--measure);
}
.manual-page p,
.manual-page > ul {
  font: 400 var(--fs-body-lg) / 1.65 var(--font-read);
  color: var(--ink-2);
  margin-bottom: var(--space-lg);
}
.manual-page a { color: var(--primary); text-underline-offset: 3px; }
.manual-page code {
  font: 500 var(--fs-body-sm) / 1.5 ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--surface-2);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-action);
  padding: 1px 6px;
}

/* ── Masthead (hub + chapter head) ──────────────────────────────────────────── */
.manual-mast {
  border-bottom: 1px solid var(--outline);
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-xxl);
}
.manual-mast__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font: 700 var(--fs-eyebrow) / var(--lh-eyebrow) var(--font-body);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brass-text);
  margin-bottom: var(--space-md);
}
.manual-mast__kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--outline-variant);
}
.manual-mast h1 {
  font: 600 var(--fs-display) / var(--lh-display) var(--font-display);
  color: var(--ink);
  margin-bottom: var(--space-sm);
}
.manual-mast__dek {
  font: 400 var(--fs-subtitle) / 1.45 var(--font-read);
  font-style: italic;
  color: var(--ink-2);
  max-width: 52ch;
}
.manual-mast__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-xl);
  margin-top: var(--space-lg);
  font: 600 var(--fs-caption) / 1.6 var(--font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.manual-mast__meta b { color: var(--ink); }

/* The per-chapter heading on /manual/all (the read-it-all view). */
.manual-chapter-head {
  font: 600 var(--fs-heading) / var(--lh-heading) var(--font-display);
  color: var(--ink);
  margin: var(--space-xxxl) 0 var(--space-xs);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--outline-variant);
}

/* The chapter note under an h1/h2 — the same italic register as the dek. */
.manual-note-line {
  font: 400 var(--fs-body) / 1.5 var(--font-read);
  font-style: italic;
  color: var(--ink-2);
  margin-bottom: var(--space-xl);
}

/* ── Chapter index (the hub's list of 8) ────────────────────────────────────── */
.manual-index { display: grid; gap: var(--space-md); margin: var(--space-xl) 0; }
.manual-index__row {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--r-action);
  background: var(--surface-elevated);
  padding: var(--space-lg) var(--space-xl);
  text-decoration: none;
}
.manual-index__row:hover { border-color: var(--outline); }
.manual-index__n {
  font: 700 var(--fs-eyebrow) / 1 var(--font-body);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brass-text);
}
.manual-index__row h2 {
  font: 600 var(--fs-title) / var(--lh-title) var(--font-display);
  color: var(--ink);
  margin: var(--space-xs) 0 var(--space-xs);
}
.manual-index__row p {
  font: 400 var(--fs-body) / 1.5 var(--font-read);
  color: var(--ink-2);
  margin: 0;
}

/* ── A task = one how-to card ───────────────────────────────────────────────── */
.manual-task {
  border: 1px solid var(--border);
  border-radius: var(--r-action);
  background: var(--surface-elevated);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  margin: var(--space-xl) 0;
  scroll-margin-top: var(--space-xl);
}
.manual-task h3 {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font: 600 var(--fs-title) / var(--lh-title) var(--font-display);
  color: var(--ink);
  margin-bottom: var(--space-sm);
}
.manual-task p,
.manual-task ul { margin: var(--space-sm) 0; }

/* The status badge ("Beta — off by default"). --badge-amber is the tokens' one
   brand-INDEPENDENT status primitive, and this is the only non-ink colour here. */
.manual-badge {
  font: 700 var(--fs-caption) / 1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--badge-amber);
  border-radius: var(--r-action);
  padding: 4px 6px;
  color: var(--badge-amber);
}

/* ── Numbered steps ─────────────────────────────────────────────────────────── */
.manual-steps {
  counter-reset: manual-step;
  list-style: none;
  margin: var(--space-md) 0 var(--space-xs);
  padding: 0;
}
.manual-steps li {
  counter-increment: manual-step;
  position: relative;
  padding: 7px 0 7px 40px;
  border-bottom: 1px dashed var(--outline-variant);
  font: 400 var(--fs-body) / 1.6 var(--font-read);
  color: var(--ink-2);
}
.manual-steps li:last-child { border-bottom: 0; }
.manual-steps li::before {
  content: counter(manual-step);
  position: absolute;
  left: 0;
  top: 9px;
  width: 24px;
  height: 24px;
  border-radius: var(--r-action);
  background: var(--ink);
  color: var(--canvas);
  font: 700 12px / 24px var(--font-body);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ── Key-cap: a label you actually tap (Settings → Appearance) ──────────────── */
.manual-key {
  font: 600 var(--fs-body-sm) / 1 var(--font-body);
  background: var(--surface-2);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-action);
  padding: 2px 7px;
  white-space: nowrap;
  color: var(--ink);
}

/* ── The two panels ─────────────────────────────────────────────────────────── */
.manual-fact,
.manual-warn {
  border-radius: var(--r-action);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0 var(--space-xs);
}
.manual-fact {
  background: var(--primary-container);
  border-left: 3px solid var(--primary);
  color: var(--on-primary-container);
}
.manual-warn {
  background: var(--surface-3);
  border: 1px solid var(--badge-amber);
}
.manual-fact > b,
.manual-warn > b {
  display: block;
  font: 700 var(--fs-caption) / 1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.manual-fact > b { color: var(--brass-text); }
.manual-warn > b { color: var(--badge-amber); }
.manual-fact ul { margin: 0; padding-left: 1.25em; }
.manual-fact li,
.manual-warn p {
  font: 400 var(--fs-body-sm) / 1.55 var(--font-read);
  margin: 3px 0;
}
.manual-warn p { color: var(--ink-2); }

/* ── Plates: a screenshot mounted on paper, with a hairline and a folio ─────── */
.manual-plates {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-lg);
  margin: var(--space-lg) 0 var(--space-xs);
}
/* Sizing a pair of plates to share the reading column takes both of these:
   * `min-width: 0` — a flex item's default `min-width: auto` floors at
     min-content, and a replaced <img> reports its INTRINSIC 428px there, so a
     plate could never shrink at all.
   * a GROWABLE basis under half the column — flex-wrap breaks a line on the
     items' BASIS, before any shrinking happens, so a 300px basis (2 × 300 + gap
     = 616px > the ~550px card interior) always wrapped to two rows. A 240px
     basis lets the pair share a line and grow into it (~267px each); a lone
     plate grows to the 300px cap, which is the phone capture's natural size. */
.manual-plate { flex: 1 1 240px; max-width: 300px; min-width: 0; margin: 0; }
/* NO device frame, NO bezel, NO shadow: press retires every elevation shadow to
   none, so a floating phone mockup would be the one shadowed object on the site.
   A paper mount + a hairline + a plate number is the press-native answer. */
.manual-plate__mount {
  display: block;
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-action);
  background: var(--surface-1);
  padding: 8px;
}
.manual-plate img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1px;
}
.manual-plate figcaption {
  margin-top: var(--space-sm);
  font: 500 var(--fs-caption) / 1.5 var(--font-body);
  color: var(--ink-2);
  max-width: 44ch;
}
.manual-plate figcaption .manual-key { font-size: var(--fs-caption); }

/* ── Contents (the right rail ≥1100px, and its inline <details> twin below) ─── */
.manual-rail { width: 296px; flex: 0 0 auto; border-left: 1px solid var(--border); padding: 28px 22px; min-height: 100%; }
.manual-toc__group { margin-bottom: var(--space-md); }
.manual-toc__chapter {
  display: flex;
  gap: var(--space-sm);
  padding: 5px 8px;
  margin-left: -8px;
  border-radius: var(--r-action);
  font: 400 var(--fs-body) / 1.4 var(--font-read);
  color: var(--ink);
  text-decoration: none;
}
.manual-toc__chapter:hover { background: var(--surface-2); }
.manual-toc__chapter.is-current { color: var(--primary); font-weight: 700; }
.manual-toc__n { color: var(--text-muted); }
.manual-toc__chapter.is-current .manual-toc__n { color: var(--primary); }
.manual-toc__tasks { list-style: none; margin: 2px 0 var(--space-sm); padding: 0 0 0 var(--space-lg); }
.manual-toc__tasks a {
  display: block;
  padding: 3px 0;
  font: 400 var(--fs-body-sm) / 1.45 var(--font-read);
  color: var(--ink-2);
  text-decoration: none;
}
.manual-toc__tasks a:hover { color: var(--ink); }
.manual-toc__tasks a.is-current { color: var(--primary); font-weight: 700; }
.manual-toc__foot {
  margin-top: var(--space-lg);
  font: 500 var(--fs-caption) / 1.4 var(--font-body);
}
.manual-toc__foot a { color: var(--ink-2); }

/* One control, two placements — and never both at once. Above 1100px the rail
   zone is visible and carries the contents, so the inline disclosure hides (the
   same rule .sibling-chips uses on /topics/:slug). */
.manual-toc-inline {
  border: 1px solid var(--border);
  border-radius: var(--r-action);
  background: var(--surface-elevated);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
}
.manual-toc-inline > summary {
  cursor: pointer;
  font: 700 var(--fs-eyebrow) / var(--lh-eyebrow) var(--font-body);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
}
@media (min-width: 1100px) {
  .manual-toc-inline { display: none; }
}

/* ── Search: a real GET form; the Stimulus controller only enhances it ──────── */
.manual-search { position: relative; margin-bottom: var(--space-lg); }
.manual-search__input {
  width: 100%;
  font: 400 var(--fs-body-sm) / 1.2 var(--font-body);
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-md);
  padding: 10px 12px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.manual-search__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-container);
}
.manual-search__results {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 320px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--surface-elevated);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-action);
}
.manual-search__results a {
  display: block;
  padding: 7px 9px;
  border-radius: var(--r-action);
  text-decoration: none;
  color: var(--ink);
  font: 400 var(--fs-body-sm) / 1.4 var(--font-read);
}
.manual-search__results a:hover,
.manual-search__results li.is-active a { background: var(--surface-2); }
.manual-search__results small {
  display: block;
  font: 500 var(--fs-caption) / 1.3 var(--font-body);
  color: var(--text-muted);
}
/* The dropdown's hit-highlight. WITHOUT this it inherits the browser's default
   <mark> — a raw canary yellow that belongs to no palette on this site and is
   exactly the clip-art tell press exists to avoid. Same token pair as the
   server-rendered ?q= list below. */
.manual-search__results mark {
  background: var(--primary-container);
  color: var(--ink);
}

/* The JS-off ?q= results list on the hub. */
.manual-results { list-style: none; margin: var(--space-xl) 0; padding: 0; }
.manual-results li { border-bottom: 1px solid var(--outline-variant); }
.manual-results a {
  display: block;
  padding: var(--space-md) 0;
  text-decoration: none;
  font: 400 var(--fs-body-lg) / 1.4 var(--font-read);
  color: var(--ink);
}
.manual-results small {
  display: block;
  font: 600 var(--fs-caption) / 1.4 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.manual-results mark { background: var(--primary-container); color: var(--ink); }

/* ── Prev / next chapter ────────────────────────────────────────────────────── */
.manual-pager {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: var(--space-xxxl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--outline-variant);
}
.manual-pager a {
  font: 500 var(--fs-body-sm) / 1.4 var(--font-body);
  color: var(--ink-2);
  text-decoration: none;
}
.manual-pager a:hover { color: var(--ink); }
.manual-pager span { font: 700 var(--fs-eyebrow) / 1.6 var(--font-body); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--brass-text); display: block; }

/* ── Print: people print manuals ────────────────────────────────────────────── */
@media print {
  .web-shell__nav,
  .web-shell__rail,
  .site-foot,
  .manual-search,
  .manual-toc-inline,
  .manual-pager { display: none; }
  .manual-task,
  .manual-plate { break-inside: avoid; }
  .manual-page { max-width: none; }
}