/* =============================================================================
   help-content.css — the merged tool page's prose article.

   WHY THIS FILE EXISTS
   Help pages used to be their own URL, carrying ~250 lines of inline style that
   included a full reset and a :root token block. Since 2026-08-30 that content is
   spliced into the tool page instead (scripts/merge-help.mjs), and a reset dropped
   into a React page would fight the app's own CSS. So only the rules that apply to
   content inside the article live here, scoped under .tool-article.

   THE CONTAINER MIRRORS THE APP. .tool-article uses the SAME geometry as each
   app's own .main — same max-width token, same horizontal padding token, same
   centering. The tool and the prose below it are then one column with one set of
   edges, which is the whole point: the article must read as part of the page, not
   as something bolted underneath it. If an app's .main changes, this follows.

     .main { padding: var(--space-6) var(--space-4) calc(...); max-width: var(--max-w) }

   TOKENS COME FROM tokens.css, not from a copy here. That file ships inside the
   React CSS bundle, which is a render-blocking link earlier in the head, so the
   tokens are always resolved before first paint. An earlier version redefined them
   locally to dodge a load-order worry that measurement showed does not exist; one
   source of truth is worth more.

   NEVER WRITE THE COMMENT-CLOSE SEQUENCE INSIDE A COMMENT HERE. The first version
   of this header described the source as "apps SLASH STAR SLASH help/index.html".
   That embedded star-slash ENDED THE COMMENT EARLY, so the rest of the header
   parsed as CSS, and the parser ate the entire .tool-article rule that followed it.
   The file still returned 200, still parsed, still reported 26 rules — and the
   article rendered edge-to-edge with no padding at all, on every page and every
   locale. scripts/test/site-css.test.mjs now fails the build on this.
   ============================================================================= */

.tool-article {
  display: block;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  /* Identical to .main, including the bottom clearance for the fixed WizardNav. */
  padding: var(--space-6) var(--space-4) calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--space-6));
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.tool-article a { color: var(--accent); text-decoration: none; }
.tool-article a:hover { text-decoration: underline; }

.tool-article .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--space-4); display: block;
}

.tool-article h1 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 600; letter-spacing: -0.03em;
  color: var(--ink); margin: 0 0 var(--space-5); line-height: var(--lh-heading);
}

.tool-article .intro {
  font-size: var(--text-lg); line-height: 1.75;
  color: var(--ink-soft); margin: 0 0 var(--space-8);
}
.tool-article .intro strong { color: var(--ink); font-weight: 400; }

.tool-article hr {
  border: none; border-top: 1px solid var(--rule);
  margin: var(--space-10) 0;
}

.tool-article h2 {
  font-size: 1.125rem; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink);
  margin: var(--space-8) 0 var(--space-3);
}
.tool-article h2:first-of-type { margin-top: 0; }

.tool-article p {
  font-size: var(--text-base); line-height: 1.75;
  color: var(--ink-soft); margin: 0 0 var(--space-4);
}
.tool-article p strong { color: var(--ink); font-weight: 400; }

.tool-article ol,
.tool-article ul { padding-inline-start: var(--space-6); margin: 0 0 var(--space-4); }

.tool-article li {
  font-size: var(--text-base); line-height: 1.75;
  color: var(--ink-soft); margin-bottom: var(--space-1);
}
.tool-article li strong { color: var(--ink); font-weight: 400; }

.tool-article .format-list {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  list-style: none; padding: 0; margin-bottom: var(--space-4);
}
.tool-article .format-list li {
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3);
  color: var(--ink-soft); margin: 0;
}

/* Related tools — crawlable interlinks. The card markup itself is styled by
   assets/card.css, which the merged page also links. */
.tool-article .related { margin-top: var(--space-10); }
.tool-article .related-heading {
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}

.tool-article .foot-nav {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  margin-top: var(--space-8);
}
.tool-article .foot-uplink {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.05em; color: var(--ink-soft); text-decoration: none;
}
.tool-article .foot-uplink:active { color: var(--accent); }
.tool-article .home-link {
  display: inline-flex; align-items: center;
  min-height: var(--touch-target); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.72rem;
  font-weight: 500; letter-spacing: 0.05em; color: var(--ink-soft); text-decoration: none;
}
.tool-article .home-link img {
  width: 23px; height: 23px; margin-inline-end: var(--space-1); flex-shrink: 0;
}
.tool-article .home-link:active { color: var(--accent); }

/* h3 as a BASE rule, not only inside .faq-section. Corpus-wide almost every <h3> is an FAQ
   question, but pure-red-screen's help page uses four in plain prose — those rendered as
   browser-default headings because the only h3 rule was scoped to .faq-section. */
.tool-article h3 {
  font-size: var(--text-base); font-weight: 600;
  color: var(--ink); margin: var(--space-6) 0 var(--space-2);
}
.tool-article .faq-section p { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE REST OF THE CORPUS
   Everything below is ported from the help pages' own inline <style> blocks — the merge discards
   those, so without this ~340 of the 765 merged pages render unstyled. The declarations are COPIED
   from the source pages (values mapped onto tokens where they were literals); they are not
   redesigned. scripts/test/site-css.test.mjs fails the build if a class used in any help <main>
   has no rule here or in card.css.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── inline code — 1,678 uses across 75 slugs ─────────────────────────────────────────────── */
.tool-article code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: light-dark(rgba(120,113,108,0.12), rgba(168,162,158,0.14));
  padding: 0.08em 0.4em;
  border-radius: 5px;
  color: var(--ink);
}

/* ── tables — 14 slugs, 126 pages, previously browser-default ─────────────────────────────── */
.tool-article table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
  font-size: 0.9rem;
}
.tool-article th,
.tool-article td {
  text-align: start;
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  line-height: 1.6;
}
.tool-article th {
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
}
/* Wide tables must scroll inside themselves rather than widen the page. */
.tool-article table { display: block; overflow-x: auto; }

/* table.ref — 11 slugs. A bordered reference grid, distinct from the plain tables above. */
.tool-article table.ref { font-size: 0.9rem; }
.tool-article table.ref th,
.tool-article table.ref td {
  border: 1px solid var(--rule);
  padding: 0.55rem 0.7rem;
  text-align: start;
  font-family: var(--font-mono);
  color: var(--ink-soft);
}
.tool-article table.ref th { color: var(--ink); font-weight: 500; background: var(--surface); }
.tool-article table.ref td strong { color: var(--accent); font-weight: 500; }

.tool-article .suffix-table th,
.tool-article .suffix-table td { padding: 0.4rem 0.75rem; }
.tool-article .suffix-table td:nth-child(2),
.tool-article .suffix-table td:nth-child(4) { font-family: var(--font-mono); color: var(--accent); }
.tool-article .size-table td:last-child {
  font-family: var(--font-mono); font-size: 0.82rem; white-space: nowrap;
}
.tool-article .weight-table { font-family: var(--font-mono); font-size: 0.8rem; }
.tool-article .weight-table th,
.tool-article .weight-table td { padding: 0.45rem 0.6rem; }
.tool-article .weight-table th { font-size: 0.68rem; letter-spacing: 0.06em; }
.tool-article .weight-table th:last-child,
.tool-article .weight-table td:last-child { text-align: end; }

/* ── .example — THREE genuinely different definitions across 17 slugs ──────────────────────
   The dominant one (15 slugs) is a monospace card. The two exceptions are keyed off the
   article's data-slug, which exists for exactly this reason. */
.tool-article .example {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--ink-soft);
}
.tool-article .example strong { color: var(--accent); font-weight: 500; }
.tool-article .example em { font-style: italic; }
.tool-article .example .ex-label {
  font-family: var(--font-mono);
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); display: block; margin-bottom: 0.4rem;
}
/* alphabetize-list: a two-column before/after grid, not a card. */
.tool-article[data-slug="alphabetize-list"] .example {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  margin-bottom: var(--space-6);
  background: none; border: none; padding: 0; font-family: var(--font-sans);
}
/* citation-generator: a prose card, not monospace. */
.tool-article[data-slug="citation-generator"] .example {
  padding: 1rem 1.25rem; margin: 0 0 var(--space-6);
  font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.7;
}
.tool-article .example-col {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 0.9rem 1rem;
}
.tool-article .example-col ol { list-style: none; padding: 0; margin: 0; }
.tool-article .example-col li {
  font-family: var(--font-mono); font-size: 0.8rem;
  line-height: 1.9; color: var(--ink); margin: 0;
}
.tool-article .example-label {
  font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); display: block; margin-bottom: 0.5rem;
}

/* ── chip lists — .format-list above plus four identically-styled siblings ─────────────────── */
.tool-article .key-list,
.tool-article .op-list,
.tool-article .pattern-list {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  list-style: none; padding: 0; margin-bottom: var(--space-4);
}
.tool-article .key-list li,
.tool-article .op-list li,
.tool-article .pattern-list li {
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: 0.25rem 0.6rem;
  color: var(--ink-soft); margin: 0;
}

/* ── callout boxes ────────────────────────────────────────────────────────────────────────── */
.tool-article .caution {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  margin-bottom: var(--space-4);
}
.tool-article .caution p:last-child { margin-bottom: 0; }

.tool-article .related-note {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-xl); padding: 1.25rem 1.5rem;
  margin: var(--space-10) 0;
}
.tool-article .related-note p { margin-bottom: var(--space-2); }
.tool-article .related-note p:last-child { margin-bottom: 0; }

/* ── one-off blocks ───────────────────────────────────────────────────────────────────────── */
.tool-article .sample {
  font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.7;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 0.9rem 1rem;
  margin-bottom: var(--space-4); color: var(--ink-soft);
  overflow-x: auto; white-space: pre;
}
.tool-article .swatch-strip {
  display: block; width: 100%; height: 72px;
  background: #FF0000;               /* the literal colour the tool is about — not a token */
  border-radius: var(--radius-lg); margin: 0 0 var(--space-6);
}
.tool-article .vibe-list {
  display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: var(--space-4);
}
.tool-article .vibe-item {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 0.85rem 1rem;
}
.tool-article .vibe-item strong {
  display: block; color: var(--ink); font-weight: 600; margin-bottom: 0.2rem;
}
.tool-article .vibe-item span { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; }