/* ─── help.css — the Help (/faq) and Contact pages ───────────────────────────────────
   Restructured 2026-10-15 to match the redesign language: a big italic lowercase verb with an accent
   full stop, rounded containers with soft hairlines, an asymmetric 2-column broadsheet (sticky index left,
   content right), accent as punctuation (never a side bar), plugin colour only on plugin things.
   Radii come from the global tokens (--r-ctl / --r-card / --r-tray in tokens.css). No literal colours: tokens and colour-mix() of tokens only.
   The accordion mechanics are still product.css's .p-faq-*; this only re-skins them inside #faq. */

/* ── FAQ accordion mechanics (moved here from product.css 2026-10-16 so only the pages that use it load it:
   product, /faq; the product page and /faq re-skin them below) ── */
.p-faq-list { list-style: none; }

.p-faq-item { border-top: 1px solid var(--rule); }
.p-faq-item:first-child { border-top: 0; }
/* On the standalone FAQ page, this static rule is replaced by the animated
   stroke-draw line (base.css) — hidden here so the draw-in isn't just
   retracing an already-visible line. prefers-reduced-motion restores it:
   motion.js never builds the SVG overlay in that case, so this is the only
   line those visitors get. */
#faq .p-faq-item[data-stroke-draw] { border-top-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  #faq .p-faq-item[data-stroke-draw] { border-top-color: var(--rule); }
}
.p-faq-q {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  width: 100%; padding: var(--s5) var(--gutter);
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: var(--fs-h3); font-family: var(--font-display); letter-spacing: var(--track-display); color: inherit;
}
/* A plus that becomes a minus. Two rules, no icon set, no rotation. */
.p-faq-mark { position: relative; flex: none; width: 1.4rem; height: 1.4rem; }
.p-faq-mark::before,
.p-faq-mark::after {
  content: ""; position: absolute; background: var(--fg-muted);
  left: 0; right: 0; top: 50%; height: 1px;
}
.p-faq-mark::after { transform: rotate(90deg); }
.p-faq-q[aria-expanded="true"] .p-faq-mark::after { display: none; }
/* Height animates via max-height (0 → a generous cap) rather than the
   `hidden` attribute — `hidden` is display:none, which can't be
   transitioned. Tried grid-template-rows (0fr -> 1fr) first, but a grid
   item's padding doesn't shrink with its track the way it does under
   max-height + overflow:hidden, so a "closed" item still showed a sliver
   of its first line — max-height clamps the whole border-box, padding
   included, which is what actually gets to 0. The cap (60rem) only has to
   clear the longest real answer; overflow:hidden makes the exact number
   harmless. */
.p-faq-a {
  display: grid; grid-template-rows: 0fr;   /* 0fr -> 1fr opens to the answer's real height: no fixed cap, no dead time */
  overflow: hidden;
  color: var(--fg-muted);
  max-width: 62ch;
}
/* Specificity note: base.css's theme-crossfade rule (`.sheet
   *:not(img):not(video)`) sets the whole `transition` shorthand at
   (0,1,2) specificity — higher than a bare `.p-faq-a` (0,1,0) — and a
   shorthand fully replaces rather than merges, so a same-or-lower-
   specificity `transition` here would just get silently dropped. Scoping
   through the parent is what wins the fight.
   Opening: the row grows on a long ease-out while the answer fades in a beat later; closing: the answer
   fades first, then the row folds. Same device as the buy box's accordion. */
.p-faq-item .p-faq-a { transition: grid-template-rows 350ms ease; }
.p-faq-item .p-faq-a-inner { min-height: 0; opacity: 0; transition: opacity 350ms ease; }
.p-faq-a.is-open { grid-template-rows: 1fr; }
.p-faq-item .p-faq-a.is-open .p-faq-a-inner { opacity: 1; }
/* bottom breathing room is content (clipped when closed), not padding, so a closed row has no dead space */
.p-faq-a-inner::after { content: ""; display: block; height: var(--s5); }
@media (prefers-reduced-motion: reduce) {
  .p-faq-item .p-faq-a, .p-faq-item .p-faq-a-inner { transition: none; }
}
@media (min-width: 48em) {
  /* No cap here: .p-faq-q/.p-faq-a-inner already use --gutter directly, so
     its own 1.6rem→3.2rem step applies without restating it smaller. */

  /* open — no button affordance, every answer showing. */
  [data-pfaq="open"] .p-faq-mark { display: none; }
  [data-pfaq="open"] .p-faq-q { cursor: default; }

  /* twocol — all open, in two columns. Items keep their own rules, so the
     column break never lands mid-answer. */
  [data-pfaq="twocol"] .p-faq-list { columns: 2; column-gap: var(--s8); padding: var(--s5); }
  [data-pfaq="twocol"] .p-faq-item { break-inside: avoid; border-top: 0; margin-bottom: var(--s5); }
  [data-pfaq="twocol"] .p-faq-q { padding: 0 0 var(--s3); font-size: var(--fs-text); }
  [data-pfaq="twocol"] .p-faq-a-inner { padding: 0; font-size: var(--fs-small); }
  [data-pfaq="twocol"] .p-faq-mark { display: none; }
}



#faq, #contact, .p-faq {
  --help-line: var(--rule);
}

/* ── Intro ───────────────────────────────────────────────────────────────────────── */
.help-intro { padding: var(--s6) var(--gutter) var(--s6); }
.help-title {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(8.4rem, 24vw, 18rem); line-height: .86; letter-spacing: var(--track-display);
}
.help-title b { font-weight: 400; color: var(--accent); }
.help-lead { text-wrap: balance; max-width: 46ch; margin: var(--s4) 0 0; color: var(--fg-muted); font-size: var(--fs-lead); line-height: var(--lh-snug); }
@media (min-width: 48em) { .help-intro { padding: var(--s7) var(--gutter) var(--s7); } }
@media (min-width: 64em) { .help-intro { padding-inline: var(--s6); } }

/* Search: a hairline field with its own mono label. */
.help-search { display: flex; align-items: center; gap: var(--s3); max-width: 56rem; margin-top: var(--s5); padding: 0 var(--s4); border: 1px solid var(--help-line); border-radius: var(--r-ctl); background: var(--surface); transition: border-color var(--hover-dur) var(--hover-ease); }
.help-search:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.help-search-label { flex: none; color: var(--fg-faint); }
.help-search-input { flex: 1; min-width: 0; padding: var(--s3) 0; border: 0; outline: 0; background: transparent; color: var(--fg); font-family: var(--font-text); font-size: var(--fs-text); }
.help-search-input::placeholder { color: var(--fg-faint); }
.help-search-input::-webkit-search-cancel-button { appearance: none; }

/* ── Shell: sticky index + content (asymmetric, ~35/65) ──────────────────────────── */
.help-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding: 0 var(--gutter) var(--s8); }
.help-shell > * { min-width: 0; }   /* a grid item defaults to min-content width: the scrolling pills made the whole column wider than the screen */
@media (min-width: 64em) {
  .help-shell { grid-template-columns: minmax(20rem, .5fr) minmax(0, 1.5fr); gap: var(--s8); align-items: start; padding-inline: var(--s6); }
  .help-index { position: sticky; top: 10.4rem; }
}

/* Index: horizontal pills on phones, a vertical list on desktop. */
.help-index ol { display: flex; gap: var(--s2); margin: 0; padding: 0 0 var(--s2); list-style: none; overflow-x: auto; scrollbar-width: none; }
.help-index ol::-webkit-scrollbar { display: none; }
.help-index a {
  display: flex; align-items: baseline; gap: var(--s2); padding: var(--s2) var(--s3); white-space: nowrap; text-decoration: none; color: var(--fg-muted);
  border: 1px solid var(--help-line); border-radius: var(--r-ctl);
  font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase;
  transition: background-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease), border-color var(--hover-dur) var(--hover-ease);
}
.help-index-no { color: var(--fg-faint); }
.help-index-n { margin-left: auto; padding-left: var(--s3); color: var(--fg-faint); }
.help-index a[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.help-index a[aria-current="true"] :is(.help-index-no, .help-index-n) { color: inherit; opacity: .7; }
@media (hover: hover) { .help-index a:hover { border-color: var(--rule-strong); color: var(--fg); } .help-index a[aria-current="true"]:hover { color: var(--accent-fg); } }
@media (min-width: 64em) {
  .help-index ol { flex-direction: column; overflow: visible; gap: var(--s2); }
  .help-index a { padding: var(--s3) var(--s4); border-radius: var(--r-ctl); }
}

/* ── Sections ────────────────────────────────────────────────────────────────────── */
.help-sec { scroll-margin-top: 12rem; }
.help-sec + .help-sec { margin-top: var(--s8); }
.help-sec-head { display: grid; gap: var(--s1); margin-bottom: var(--s4); }
.help-sec-no { color: var(--fg-faint); }
.help-sec-title { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(5.6rem, 11vw, 9.6rem); line-height: .9; letter-spacing: var(--track-display); }
.help-sec-title b { font-weight: 400; color: var(--accent); }
.help-sec-sub { margin: var(--s2) 0 0; font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--fg-muted); }

/* The question list is one rounded container; dividers are hairlines inside it. */
:is(#faq, .p-faq) .help-list { margin: 0; padding: 0; border: 1px solid var(--rule-strong); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
:is(#faq, .p-faq) .help-list .p-faq-item { border-top: 1px solid var(--help-line); transition: background-color var(--hover-dur) var(--hover-ease); }
:is(#faq, .p-faq) .help-list .p-faq-item:first-child { border-top: 0; }
:is(#faq, .p-faq) .help-list .p-faq-item[data-stroke-draw] { border-top-color: transparent; }   /* the animated line (motion.js) draws it */
@media (prefers-reduced-motion: reduce) { :is(#faq, .p-faq) .help-list .p-faq-item[data-stroke-draw] { border-top-color: var(--help-line); } }
:is(#faq, .p-faq) .help-list .p-faq-q { padding: var(--s4) var(--s5); font-size: clamp(1.9rem, 2.3vw, 2.3rem); line-height: 1.2; }
:is(#faq, .p-faq) .help-list .p-faq-a-inner { padding: 0 var(--s5); }
/* On a plugin page the list sits in the section with the page gutter around it (the Help page's own rhythm). */
/* sheet.css strips the top border off whatever follows a .section-head; this box needs its full outline. */
.section-head + .help-list { border-top: 1px solid var(--rule-strong) !important; }
#product .p-faq .help-list { margin: var(--s5) var(--gutter) var(--s7); }
.help-list .p-faq-a a.is-inline { color: var(--fg); text-decoration: underline; text-underline-offset: .4rem; }
.help-list .p-faq-a strong { color: var(--fg); font-weight: 500; }

/* ── Plugin by plugin: stacked rows, each in its own plugin colour (--p) ─────────── */
.help-plugins { display: grid; gap: var(--s3); }
.help-plugin { border: 1px solid var(--help-line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.help-plugin-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); color: inherit; text-decoration: none; transition: background-color var(--hover-dur) var(--hover-ease); }
.help-plugin-dot { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--p-text, var(--p, var(--accent))); }   /* --p-text: SillySlices' --p is too dark to read as a dot on the dark page */
.help-plugin-id { display: grid; gap: .4rem; min-width: 0; }
.help-plugin-name { font-family: var(--font-display); font-size: clamp(2.6rem, 3.4vw, 3.4rem); line-height: 1; letter-spacing: var(--track-tight); }
.help-plugin-tag { font-family: var(--font-data); font-size: 1.1rem; letter-spacing: var(--track-data); text-transform: uppercase; color: var(--fg-muted); }
.help-plugin-go { font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--fg-faint); }
@media (hover: hover) { .help-plugin-head:hover { background: color-mix(in srgb, var(--p, var(--accent)) 8%, transparent); } .help-plugin-head:hover .help-plugin-go { color: var(--fg); } }
.help-plugin .help-list--in { border: 0; border-top: 1px solid var(--help-line); border-radius: 0; background: transparent; }
.help-note { margin: var(--s4) 0 0; font-family: var(--font-data); font-size: 1.1rem; letter-spacing: var(--track-data); text-transform: uppercase; color: var(--fg-faint); }
.help-empty { margin: var(--s6) 0; color: var(--fg-muted); }
.help-empty a { color: var(--fg); text-decoration: underline; text-underline-offset: .4rem; }

/* ── Still stuck ─────────────────────────────────────────────────────────────────── */
.help-stuck { margin-top: var(--s8); display: grid; gap: var(--s4); padding: var(--s6) var(--s5); border: 1px solid var(--help-line); border-radius: var(--r-tray); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.help-stuck-title { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(4.8rem, 9vw, 8rem); line-height: .9; letter-spacing: var(--track-display); }
.help-stuck-title b { font-weight: 400; color: var(--accent); }
.help-stuck p { margin: 0; max-width: 46ch; color: var(--fg-muted); }
.help-stuck-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.help-btn { display: inline-flex; align-items: center; padding: var(--s4) var(--s6); border: 1px solid var(--rule-strong); border-radius: var(--r-ctl); color: var(--fg); text-decoration: none; font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; transition: background-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease), border-color var(--hover-dur) var(--hover-ease); }
.help-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.help-btn--solid { background: var(--fg); border-color: var(--fg); color: var(--ground); }
@media (hover: hover) { .help-btn:hover { background: var(--fg); color: var(--ground); } .help-btn--solid:hover { background: transparent; color: var(--fg); } }

/* ── Contact ─────────────────────────────────────────────────────────────────────── */
/* One standalone rounded box with a big headline, like the homepage closing band; the form sits inside it.
   ?contact=ink (default): inverted band. ?contact=paper (localhost): soft tray, headline left / form right.
   The ink box swaps the tokens locally (no literal colours); fields keep forms.css behaviour. */
.contact-wrap { padding: var(--s6) var(--gutter) var(--s8); }   /* the page starts with the box (no separate page title) */
@media (min-width: 64em) { .contact-wrap { padding-inline: var(--s6); } }
.contact-box { display: grid; gap: var(--s6); padding: var(--s6) var(--s5); border: 1px solid var(--help-line); border-radius: var(--r-tray); background: var(--surface); color: var(--fg); }
.contact-box > * { min-width: 0; }
@media (min-width: 48em) { .contact-box { padding: var(--s7) var(--s6); } }
@media (min-width: 64em) { .contact-box { padding: var(--s8) var(--s7); } }
.contact-big { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(5rem, 13vw, 11rem); line-height: .9; letter-spacing: var(--track-display); text-wrap: balance; }
.contact-big b { font-weight: 400; color: var(--accent); }
.contact-lead { max-width: 40ch; margin: var(--s4) 0 0; color: var(--fg-muted); font-size: var(--fs-lead); line-height: var(--lh-snug); }
.contact-also { margin: 0; font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--fg-muted); }
.contact-also a { color: var(--fg); text-underline-offset: .3em; }

/* ink: tokens flipped inside the box */
#contact { --ink-bg: var(--fg); --ink-fg: var(--ground); }
.contact-box--ink { --fg: var(--ink-fg); --ground: var(--ink-bg); --surface: var(--ink-bg); --fg-muted: color-mix(in srgb, var(--ink-fg) 68%, transparent); --fg-faint: color-mix(in srgb, var(--ink-fg) 50%, transparent); --help-line: color-mix(in srgb, var(--ink-fg) 28%, transparent); --rule: var(--help-line); --rule-strong: color-mix(in srgb, var(--ink-fg) 45%, transparent); background: var(--ink-bg); border-color: var(--ink-bg); }

/* paper: headline column + form column at desktop */
@media (min-width: 64em) { .contact-box--paper { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s8); align-items: start; } .contact-box--paper .contact-also { grid-column: 1; grid-row: 2; align-self: end; } .contact-box--paper .contact-head { grid-row: 1; } .contact-box--paper .contact-form { grid-column: 2; grid-row: 1 / span 2; } .contact-box--paper .contact-big { font-size: clamp(5rem, 8vw, 9rem); } }

.contact-form { display: grid; gap: var(--s5); max-width: 78rem; }
.contact-form[hidden], .contact-context[hidden] { display: none; }
.contact-context, .contact-pair { display: grid; gap: var(--s5); }
@media (min-width: 40em) { .contact-context, .contact-pair { grid-template-columns: 1fr 1fr; } }
.contact-topics { margin: 0; padding: 0; border: 0; min-width: 0; }
.contact-topics legend { padding: 0; margin-bottom: var(--s3); color: var(--fg-faint); }
.contact-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.contact-chip { position: relative; cursor: pointer; }
.contact-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.contact-chip span { display: inline-flex; align-items: center; padding: var(--s2) var(--s4); border: 1px solid var(--help-line); border-radius: var(--r-ctl); font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--fg-muted); transition: background-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease), border-color var(--hover-dur) var(--hover-ease); }
.contact-chip input:checked + span { background: var(--fg); border-color: var(--fg); color: var(--ground); }
.contact-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .contact-chip:hover input:not(:checked) + span { border-color: var(--fg); color: var(--fg); } }

#contact .field-input, #contact .field-select, #contact .field-textarea { border-color: var(--help-line); border-radius: var(--r-ctl); background: transparent; color: var(--fg); transition: border-color var(--hover-dur) var(--hover-ease); }
#contact .field-select option { background: var(--ground); color: var(--fg); }
#contact .field-input:focus-visible, #contact .field-select:focus-visible, #contact .field-textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.field-opt { margin-left: var(--s2); color: var(--fg-faint); text-transform: none; letter-spacing: 0; }
.contact-send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
#contact .form-submit { padding-inline: var(--s6); background: var(--fg); border-color: var(--fg); color: var(--ground); }
@media (hover: hover) { #contact .form-submit:not(:disabled):hover { background: transparent; color: var(--fg); } }
.contact-send .form-status { margin: 0; }

/* Contact on phones (<48em): smaller headline, tighter box and fields so the form fits about one screen.
   Type ladder (page-local, tokens only): page verb 4.8rem > box headline 3.2rem > lead --fs-text > labels
   --fs-data > inputs 1.5rem. Desktop is untouched. */
@media (max-width: 47.99em) {
  #contact .help-intro { padding: var(--s4) var(--gutter) var(--s3); }
  #contact .help-title { font-size: 4.8rem; line-height: .9; }
  .contact-wrap { padding-bottom: var(--s6); }
  .contact-box { gap: var(--s4); padding: var(--s4); }
  .contact-big { font-size: 3.2rem; line-height: .95; }
  .contact-lead { margin-top: var(--s2); font-size: var(--fs-text); line-height: 1.4; }
  .contact-form { gap: var(--s3); }
  .contact-topics legend { margin-bottom: var(--s2); font-size: var(--fs-data); }
  .contact-chips { gap: var(--s1) var(--s2); }
  .contact-chip span { padding: var(--s1) var(--s3); font-size: 1.1rem; }
  .contact-context { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .contact-pair { gap: var(--s3); }
  #contact .field-opt { display: none; }
  #contact .field { gap: var(--s1); }
  #contact .field-label { font-size: 1.1rem; }
  #contact .field-input, #contact .field-select, #contact .field-textarea { padding: var(--s2) var(--s3); font-size: 1.5rem; }
  #contact .field-textarea { min-height: 8.8rem; }
  #contact .field-consent label { font-size: var(--fs-data); line-height: 1.4; }
  #contact .form-submit { padding: var(--s3) var(--s5); }
  .contact-also { font-size: 1.1rem; line-height: 1.5; }
}

/* plugin page: a full-width hairline above the FAQ section so the list doesn't look cut off under the band */
#product .p-faq { border-top: 1px solid var(--rule-strong); }