/* ==========================================================================
   Crystal Clear Cleans — guide pages (/guides and /guides/<slug>)
   Loaded only by pages generated by build.mjs, after site.css and blocks.css.

   This file adds NO tokens and NO new palette. Everything below is built from
   the ramp in site.css, and every component that already exists there (.card,
   .cta, .faq-list, .btn, .chip, .grid-cards) is reused rather than restated.
   What is here is the long-form reading layout site.css has no equivalent for:
   an article measure, an answer block, a cited-facts list and a myth list.
   ========================================================================== */

/* The header is sticky at 62px. Without this every jump from the "on this
   page" nav lands the heading underneath it. */
html { scroll-padding-top: 78px; }

/* ---------- Article shell ------------------------------------------------- */
/* 68ch, matching .prose in site.css. Long-form prose set to the full 1180px
   wrap is unreadable, and .wrap-narrow (860px) is still wide for 17px body. */
.guide { --guide-measure: 68ch; }
.guide-wrap {
  max-width: var(--guide-measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Blocks that carry their own box (tables, figures, columns) may use the
   slightly wider measure without breaking the text column above them. */
.guide-wrap-wide { max-width: 980px; margin-inline: auto; padding-inline: var(--gutter); }
/* When nested inside .wrap (the "more help" band), .wrap already supplies the
   gutter. Doubling it left a 216px content box at 320px viewport. */
.wrap .guide-wrap-wide { padding-inline: 0; }

.guide-section { padding-block-start: 56px; }
.guide-band { background: var(--surface-2); margin-top: 64px; padding: 56px 0; }

/* ---------- Hero ---------------------------------------------------------- */
.guide-hero { padding-block: 44px 0; text-align: left; }
.guide-hero .h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  margin: 0 0 18px;
  max-width: 20em;
}
.guide-hero .lede { font-size: clamp(16.5px, 2vw, 20px); max-width: 34em; margin: 0; }

.breadcrumb { margin-bottom: 18px; font-size: 13.5px; color: var(--ink-4); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; }
.breadcrumb li { display: flex; align-items: center; gap: 10px; }
.breadcrumb li + li::before { content: "/"; color: var(--ink-4); }
.breadcrumb a { color: var(--ink-4); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb a:hover { color: var(--ink); }

.guide-meta {
  margin-top: 22px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-4);
}
.guide-meta b { font-weight: 500; color: var(--ink-2); }

/* ---------- Answer block -------------------------------------------------- */
/* The verbatim-lift target for AI answer engines, and the first thing a human
   reads. Kept visually loud and structurally first, per SEO-CONTENT-PLAN §3. */
.answer {
  margin-top: 34px;
  border-left: 4px solid var(--brand-600);
  background: var(--surface-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 22px 24px;
}
.answer__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: 10px;
}
.answer__text { font-size: 17.5px; font-weight: 300; line-height: 1.6; color: var(--ink); text-wrap: pretty; }

/* ---------- On this page -------------------------------------------------- */
.on-this-page { margin-top: 28px; }
.toc {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface, #fff);
}
.toc__summary {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 18px;
  cursor: pointer; list-style: none;
  border-radius: 16px;
}
.toc__summary::-webkit-details-marker { display: none; }
.toc__summary:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }
.toc__title {
  font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink);
}
.toc__count { font-size: 13px; color: var(--ink-4); }
.toc__chev {
  margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-4); border-bottom: 2px solid var(--ink-4);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.toc[open] .toc__chev { transform: translateY(2px) rotate(-135deg); }
.toc__list {
  list-style: none; margin: 0; padding: 4px 10px 12px;
  border-top: 1px solid var(--line);
  columns: 2; column-gap: 8px;
}
.toc__list li { break-inside: avoid; }
.toc__list a {
  display: flex; align-items: baseline; gap: 12px;
  min-height: 44px; padding: 11px 10px;
  border-radius: 10px;
  font-size: 15px; line-height: 1.35; color: var(--ink-3);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.toc__list a:hover,
.toc__list a:focus-visible { background: var(--surface-2); color: var(--ink); }
.toc__text { text-wrap: pretty; }
@media (max-width: 700px) {
  .toc__list { columns: 1; padding: 4px 6px 8px; }
  .toc__list a { padding: 10px; }
}

/* ---------- Guide body (markdown output) ---------------------------------- */
.guide-body {
  font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--ink-3);
  /* A bare URL or a long unbroken token must wrap rather than push the page
     sideways at 390px. Tables get their own scroll box in blocks.css. */
  overflow-wrap: break-word;
}
.guide-body > :first-child { margin-top: 0; }
.guide-body p { margin: 0 0 18px; text-wrap: pretty; }
.guide-body h2 {
  font-size: clamp(24px, 3.1vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 52px 0 16px;
}
.guide-body h3 {
  font-size: clamp(18px, 2.1vw, 21px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  margin: 32px 0 12px;
}
.guide-body h4 { font-size: 16.5px; font-weight: 500; color: var(--ink); margin: 24px 0 10px; }
.guide-body ul, .guide-body ol { margin: 0 0 20px; padding-left: 22px; display: grid; gap: 9px; }
.guide-body li { text-wrap: pretty; }
.guide-body li > ul, .guide-body li > ol { margin: 9px 0 0; }
.guide-body strong { font-weight: 500; color: var(--ink); }
.guide-body a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.guide-body blockquote {
  margin: 24px 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--line); color: var(--ink-4);
}
.guide-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em; background: var(--surface-2); padding: 2px 6px; border-radius: 6px;
}
.guide-body hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
/* Anchor targets sit behind the sticky header without this on the element too,
   because scroll-padding-top only covers scrolling, not :target focus. */
.guide-body h2[id] { scroll-margin-top: 78px; }

/* blocks.css styles the :::blocks themselves. Two re-assertions are needed
   because the rules above out-specify its zero-specificity :where() defaults. */
.guide-body .cb-col :where(h2, h3, h4):first-child { margin-top: 0; font-size: 17px; }
.guide-body .cb-body > :last-child,
.guide-body .cb-col > :last-child,
.guide-body .cb-stat-note > :last-child { margin-bottom: 0; }
.guide-body .cb-steps ol { padding-left: 0; gap: 0; display: block; }
.guide-body .cb-check ul { padding-left: 0; gap: 0; display: block; }

/* ---------- Cited facts --------------------------------------------------- */
.facts { display: grid; gap: 14px; margin: 26px 0 0; }
.fact { background: var(--surface); border: 1px solid #d9d9de; border-radius: var(--r-sm); padding: 20px 22px; }
.fact dt {
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-4);
}
.fact dd { margin: 10px 0 0; font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--ink-3); }
.fact dd.fact__src { margin-top: 12px; font-size: 13px; overflow-wrap: anywhere; }
.fact dd.fact__src a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Myths --------------------------------------------------------- */
.myths { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 26px; }
.myth { padding-top: 24px; border-top: 1px solid var(--line); }
.myth:first-child { padding-top: 0; border-top: 0; }
.myth__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.myth__verdict {
  flex: none; border-radius: var(--r-pill); padding: 5px 13px;
  font-size: 12.5px; font-weight: 500; background: var(--surface-3); color: var(--ink);
}
.myth__verdict--false { background: var(--ink); color: #fff; }
.myth__claim { flex: 1 1 14em; font-size: 17px; font-weight: 500; color: var(--ink); }
.myth__tldr {
  margin-top: 14px; padding-left: 16px; border-left: 3px solid var(--brand-600);
  font-size: 16.5px; font-weight: 400; line-height: 1.6; color: var(--ink);
}
.myth__detail { margin-top: 14px; font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--ink-3); }
.myth__src { margin-top: 10px; font-size: 13px; color: var(--ink-4); overflow-wrap: anywhere; }
.myth__src a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- First-hand ---------------------------------------------------- */
.firsthand { background: var(--ink); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 44px); }
.firsthand h2 { color: #fff; }
.firsthand p { margin-top: 16px; font-size: 17.5px; font-weight: 300; line-height: 1.65; color: var(--ink-dark-2); }

/* ---------- Related links ------------------------------------------------- */
.link-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; }
.link-pills a {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--surface-2); border-radius: var(--r-pill); padding: 10px 18px;
  font-size: 14.5px; color: var(--ink-2);
}
.link-pills a:hover { background: var(--surface-3); color: var(--ink); }

.related-guides { list-style: none; display: grid; gap: 8px; margin: 18px 0 0; padding: 0; }
.related-guides a {
  display: flex; align-items: center; min-height: 44px; padding: 10px 0;
  font-size: 16px; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Section headings outside the markdown body -------------------- */
.guide-h2 {
  font-size: clamp(24px, 3.1vw, 32px); font-weight: 600; line-height: 1.15;
  letter-spacing: -.02em; color: var(--ink); scroll-margin-top: 78px;
}
.guide-h3 { font-size: 17px; font-weight: 500; color: var(--ink); }
.guide-sub { margin-top: 10px; font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--ink-3); }

/* ---------- Hub ----------------------------------------------------------- */
.guide-card__date {
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-4);
}
.guide-card h2, .guide-card h3 { font-size: 20px; font-weight: 500; letter-spacing: -.015em; margin: 10px 0 10px; }
.hub-empty { text-align: center; color: var(--ink-3); font-size: 17px; font-weight: 300; }

@media (max-width: 700px) {
  .guide-section { padding-block-start: 44px; }
  .guide-band { margin-top: 48px; padding: 44px 0; }
}
.area-map { margin-top: 10px; aspect-ratio: auto; min-height: 150px; }