/* ==========================================================================
   help.css — /help/ only (pages/help.mjs).

   Loaded AFTER tokens.css and seo-hub.css (which supplies the breadcrumb). It
   extends, never redefines: every selector is namespaced `help-`, and every
   value is a token, so the dark theme comes for free.

   The accordion is the home FAQ's, restated here. home.css (section 10) draws
   `.faq-*` for the marketing page and is 25 kB of rules about everything else on
   that page; loading it for one accordion would be the wrong trade. If the home
   FAQ's measurements change, change these with them.

   The contents list on the left is legal.css's, for the same reason: a long page
   that gets read in pieces wants somewhere to jump from.
   ========================================================================== */

.help-hero {
  padding-block-start: clamp(12px, 1.8vw, 24px);
  padding-block-end: clamp(28px, 4vw, 48px);
}
.help-hero h1 { max-width: 20ch; }
.help-lede { margin-top: 18px; max-width: 60ch; }

/* --------------------------------------------------------------------------
   Layout: contents on the left at desktop, above the topics below 980px.
   -------------------------------------------------------------------------- */

.help-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.help-toc { position: sticky; top: 24px; }
.help-toc h2 {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .16em;
  color: var(--accent-strong);
  margin-bottom: 14px;
}
.help-toc ol { counter-reset: toc; }
.help-toc li { counter-increment: toc; }
.help-toc a {
  display: flex;
  gap: 10px;
  padding-block: 7px;
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--text-copy);
  text-decoration: none;
}
.help-toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.help-toc a:hover { color: var(--accent-strong); }

@media (max-width: 980px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); }
  .help-toc { position: static; }
  .help-toc ol { columns: 2; column-gap: 28px; }
  .help-toc li { break-inside: avoid; }
}
@media (max-width: 560px) {
  .help-toc ol { columns: 1; }
}

/* --------------------------------------------------------------------------
   Topics
   -------------------------------------------------------------------------- */

.help-body { max-width: 760px; min-width: 0; }

.help-topic + .help-topic { margin-top: clamp(40px, 5vw, 64px); }
.help-topic { scroll-margin-top: 24px; }

.help-topic-title {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.12;
  letter-spacing: -.015em;
}

.help-list {
  margin-top: 18px;
  border-top: 1px solid var(--divider);
}

/* --------------------------------------------------------------------------
   One question: a <details>, like the home FAQ.
   -------------------------------------------------------------------------- */

.help-item { border-bottom: 1px solid var(--hairline); scroll-margin-top: 24px; }

.help-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
}
.help-summary::-webkit-details-marker { display: none; }
.help-summary:hover .help-q { color: var(--accent-strong); }

.help-q {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.2;
  letter-spacing: 0;
}
.help-chev { flex: none; color: var(--text-secondary); }
.help-item[open] .help-chev { transform: rotate(180deg); }

.help-a { max-width: 68ch; padding-bottom: 22px; }
.help-a p {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-copy);
  overflow-wrap: anywhere;
}
.help-a p + p { margin-top: 12px; }

@media (max-width: 560px) {
  .help-summary { gap: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .help-q {
    transition: color var(--dur-state) var(--ease-out);
  }
  .help-chev { transition: transform var(--dur-enter) var(--ease-out); }
}

@media print {
  .help-toc { display: none; }
  .help-layout { display: block; }
}