/* ==========================================================================
   PULSE V2 — guides.css · "ION ATMOSPHERE"
   Shared by guides.html (index) + guides/*.html (articles).
   The article surface mirrors the legal/doc template (legal.css): quiet
   whisper auroras, sticky numbered TOC on desktop, accent section numerals,
   70ch measure. Kept STANDALONE (values mirrored, file not imported) so the
   legal pages and the guides can evolve independently.
   Adds: guide cards (index grid), breadcrumb, reading-meta chip, <kbd>
   keyboard chips, settings-path <code>, PULSE callout panel, print rules.
   Requires tokens.css + base.css loaded first. Tokens only — zero hardcoded
   colors (print block exempt per DESIGN_SPEC §14.1).
   I18N EXCEPTION (documented): guide ARTICLE BODIES are English-only by
   design — long-form editorial content is outside the locale pipeline, so
   article copy carries NO data-i18n. The shell (nav/footer) stays annotated.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — shared by index + articles (.has-aurora needs a positioned box)
   -------------------------------------------------------------------------- */
.guides-hero {
  position: relative;
  padding-block: var(--sp-9) var(--sp-7);
}
.guides-hero h1 { margin-top: var(--sp-4); max-width: 24ch; }

/* Breadcrumb back to /guides (articles only) — micro mono register */
.crumb {
  margin-bottom: var(--sp-5);
  font: 700 var(--fs-micro) / 1.4 var(--font-mono);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}
.crumb a {
  color: var(--text-3);
  text-decoration: none;
  transition: color var(--dur-1) ease;
}
.crumb a:hover,
.crumb a:focus-visible { color: var(--accent-bright); }
.crumb .crumb-sep {
  margin-inline: 0.5em;
  color: var(--text-4); /* decorative separator only */
}
.crumb .crumb-here { color: var(--text-3); }

/* Reading-meta chip — same recipe as the legal "Last updated" chip */
.read-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--sp-5);
  padding: 0.5rem 0.95rem;
  background: var(--accent-tint-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  font: 700 var(--fs-micro) / 1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.read-chip::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-line);
}

/* Standfirst under the H1 (articles) */
.guide-standfirst {
  margin-top: var(--sp-5);
  max-width: 62ch;
  color: var(--text-2);
  font-size: var(--fs-lead);
}

/* Index hero trace echo */
.guides-hero .trace-wrap { margin-top: var(--sp-7); }
.guides-hero .motif-svg { width: min(100%, 34rem); }
.guides-hero .trace-caption { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   Index — guide card grid
   -------------------------------------------------------------------------- */
.guides-list {
  position: relative;
  padding-bottom: var(--sp-10);
}
.guide-grid {
  display: grid;
  gap: var(--sp-5);
  align-items: stretch;
}
@media (min-width: 52em) {
  .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.guide-card {
  display: flex;
  flex-direction: column;
}
.guide-num {
  display: block;
  margin-bottom: var(--sp-4);
  font: 700 var(--fs-micro) / 1 var(--font-mono);
  letter-spacing: var(--track-micro);
  color: var(--accent-bright);
}
.guide-card .card-title { margin-bottom: var(--sp-3); }
.guide-card .card-title a {
  color: var(--text-1);
  text-decoration: none;
}
.guide-card .card-title a:hover,
.guide-card .card-title a:focus-visible { color: var(--accent-bright); }
.guide-card .card-body { flex: 1 1 auto; }
.guide-meta {
  margin-top: var(--sp-4);
  font: 700 var(--fs-micro) / 1.4 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.guide-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--sp-4);
  color: var(--accent-bright);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  text-decoration: none;
}
.guide-link svg { transition: transform var(--dur-1) var(--ease-glide); }
.guide-link:hover svg,
.guide-link:focus-visible svg { transform: translateX(3px); }
[dir="rtl"] .guide-link:hover svg,
[dir="rtl"] .guide-link:focus-visible svg { transform: translateX(-3px); }

/* --------------------------------------------------------------------------
   Article layout — TOC sidebar (desktop) + 70ch doc (mirrors legal.css)
   -------------------------------------------------------------------------- */
.guide-body {
  position: relative;
  padding-bottom: var(--sp-9);
}
.guide-body > .aurora {
  inset: auto -6% -12% -6%;
  height: min(70vh, 42rem);
}
.guide-layout {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}
@media (min-width: 64em) {
  .guide-layout {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--sp-8);
  }
  .toc {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
  }
}

/* TOC — same anatomy as the legal pages */
.toc {
  padding: var(--sp-5);
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
}
.toc-head {
  display: block;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-1);
}
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
@media (min-width: 40em) and (max-width: 63.99em) {
  .toc-list { grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); }
}
.toc-list a {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  color: var(--text-3);
  font-size: var(--fs-body-sm);
  text-decoration: none;
  transition: color var(--dur-1) ease;
}
.toc-list a:hover,
.toc-list a:focus-visible { color: var(--text-1); }
.toc-num {
  flex: none;
  min-width: 1.7em;
  font: 700 var(--fs-micro) / 1.4 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--text-3);
  transition: color var(--dur-1) ease;
}
.toc-list a:hover .toc-num,
.toc-list a:focus-visible .toc-num { color: var(--accent-bright); }

/* Doc article — numbered sections, accent numerals */
.doc { max-width: 70ch; }
.doc p { max-width: 70ch; }

.doc-sec {
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--line-0);
}
.doc-sec:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.doc-num {
  display: block;
  margin-bottom: var(--sp-3);
  font: 700 var(--fs-micro) / 1 var(--font-mono);
  letter-spacing: var(--track-micro);
  color: var(--accent-bright);
}
.doc-sec h2 { font-size: var(--fs-h3); }

.doc-sec p,
.doc-sec ul,
.doc-sec ol { margin-top: var(--sp-4); }
.doc-sec ul,
.doc-sec ol {
  padding-left: 1.4rem;
  display: grid;
  gap: 0.6rem;
}
.doc-sec ul li::marker { color: var(--accent-line); }
.doc-sec ol li::marker {
  color: var(--accent-bright);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-body-sm);
}

.doc strong { color: var(--text-1); font-weight: 600; }
.doc code {
  padding: 0.1em 0.4em;
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  overflow-wrap: anywhere;
}

/* Keyboard chips — physical-key register for steps that reference keys */
.doc kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0.15em 0.5em;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-weight: 700;
  font-size: 0.8125em;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

/* PULSE callout — "what the app automates here" panel */
.doc-callout {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--accent-tint-2);
  border: 1px solid var(--line-1);
  border-inline-start: 2px solid var(--accent-line);
  border-radius: var(--radius-md);
}
.doc-callout .mono-label {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--accent-bright);
}
.doc-callout p {
  margin-top: 0;
  color: var(--text-2);
  font-size: var(--fs-body-sm);
}
.doc-callout p + p { margin-top: var(--sp-3); }

.doc-related {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-1);
  color: var(--text-3);
  font-size: var(--fs-body-sm);
}

/* --------------------------------------------------------------------------
   Print — just the document, black on white (mirrors legal.css; exempt
   from the tokens-only rule per DESIGN_SPEC §14.1)
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .toc,
  .skip-link,
  .aurora { display: none; }
  body { background: #fff; color: #111; }
  body::after { content: none; }
  .doc,
  .doc p { max-width: none; }
  h1, h2,
  .doc strong { color: #000; }
  a { color: #000; }
  .read-chip,
  .crumb,
  .guide-standfirst,
  .doc-num { color: #333; border-color: #999; background: none; }
  .read-chip::before { background: #333; box-shadow: none; }
  .doc code,
  .doc kbd { background: #f2f2f2; border-color: #ccc; color: #000; }
  .doc-callout { background: none; border-color: #999; }
  .doc-callout p { color: #111; }
}