/* styles-guides.css — Guides sub-surface (content articles + hub).
   Loads AFTER styles-foundation.css. Token-only; no hex/rgba/oklch/px literals.
   Scope: article furniture only. Chrome (.dir-a-nav/.dir-a-footer) is owned by
   styles-splash.css and shared verbatim. */

.guide-main { max-width: 56rem; margin: 0 auto; padding: var(--s-12) var(--s-6); }

/* Section eyebrows were removed cluster-wide 2026-08-04. They restated the <h2>
   directly beneath them, spent the rationed --accent on ~9 labels per page, and
   were the strongest AI-generated-page tell on the surface. articles-bronze.css
   had already hidden them with display:none since 2026-07-06; this pass deletes
   the markup and this rule so they cannot silently return. Do not reintroduce
   .guide-eyebrow — a section is introduced by its heading. */

/* Prose body */
.guide-prose { color: var(--text-dim); line-height: 1.7; }
.guide-prose > * + * { margin-top: var(--s-6); }
.guide-prose h2 { margin-top: var(--s-12); margin-bottom: var(--s-4); }
.guide-prose h3 { margin-top: var(--s-8); margin-bottom: var(--s-3); }
.guide-prose a:not(.btn) { color: var(--accent); }

/* Hub card grid */
.guide-card-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.guide-card {
  position: relative;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--s-6);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
/* Hub cards (those with a linked title) are fully clickable with a hover lift.
   :has() scopes this to linked cards — article factor/step/verdict cards (no
   title link) are unaffected. The title link's ::after stretches over the card. */
.guide-card:has(h2 a, h3 a) { cursor: pointer; display: flex; flex-direction: column; }
/* Grid rows stretch every card to the row's height, so margin-top:auto pins the
   meta line to the card bottom — aligning the "Updated … · N min read" lines
   across the whole row regardless of how long each description runs. font-size is
   set here (not on the base .guide-meta) because the meta is a <p> inside
   .guide-card, so `.guide-card p` (font-size:--fs-sm) outranks a bare .guide-meta
   rule; this hub-scoped selector outranks it in turn and shrinks the single
   line to --fs-xs, the smallest step on the foundation type scale (--fs-2xs is
   9.6px, below that floor — it read as unreadably small on a phone). At --fs-xs
   the meta no longer fits the narrow cols-3 card on one line, so `nowrap` is
   lifted here and it wraps instead; the grid row equalises card heights, so a
   two-line meta on one card does not break the row.
   padding-top guarantees a blank-line gap above the meta even when margin-top:auto
   collapses to 0 (long description that fills the card). */
.guide-card:has(h2 a, h3 a) .guide-meta { margin-top: auto; padding-top: var(--s-4); font-size: var(--fs-xs); white-space: normal; }
.guide-card:has(h2 a, h3 a):hover,
.guide-card:has(h2 a, h3 a):focus-within {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.guide-card h2 a, .guide-card h3 a { color: var(--text); text-decoration: none; }
.guide-card h2 a::after, .guide-card h3 a::after { content: ""; position: absolute; inset: 0; }

/* Comparison table */
/* min-width keeps the columns readable on phones: below ~36rem the table
   exceeds its .guide-compare-wrap and that wrapper's overflow-x:auto scrolls,
   instead of squeezing the description column to one-word-per-line. */
.guide-compare { width: 100%; min-width: 36rem; border-collapse: collapse; }
.guide-compare th, .guide-compare td {
  border: 1px solid var(--accent-border);
  padding: var(--s-3) var(--s-4);
  text-align: left;
}
.guide-compare th { font-family: var(--font-sans); color: var(--text); }
/* Column-header row centered; row-label headers stay left-aligned. */
.guide-compare thead th { text-align: center; }

/* ── Pillar / article furniture (Task 3) ───────────────────────────────────
   Token-only. The Ploy export's hero, numbered cards, step cards, CTA button
   rows, section eyebrows, and verdict-coloured words all map onto these. */

/* ── Article imagery ───────────────────────────────────────────────────────
   One photo per article (chosen with Jon 2026-08-17): a lazy-loaded thumbnail
   on the hub card, the same shot as the article-page hero. Both are 16:9,
   cover-fit so the crop fills the frame, token radius only. Sources are built
   by tools/build-article-hero-images.py into /assets/articles/. */
.guide-card-media {
  display: block;
  width: 100%;
  height: auto;                      /* let aspect-ratio drive height, not the width/height attrs */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);      /* nested one tier inside the --radius-lg card */
  margin-bottom: var(--s-5);
  background: var(--surface);        /* holds the box before the image decodes */
}
.guide-hero-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);   /* hero-tier container */
  margin-bottom: var(--s-8);
  background: var(--surface);
}

/* Hero */
.guide-hero { padding-top: var(--s-12); padding-bottom: var(--s-12); }
/* Titles use the white text token (matches the splash); cyan is reserved. */
.guide-main h1, .guide-main h2 { color: var(--text); }
.guide-hero h1 { margin-top: var(--s-6); text-wrap: balance; }
/* Article meta line under the h1: "Updated <Month Year> · N min read". */
/* Base meta (used on the article hero, where the wide container fits it at --fs-xs).
   Hub-card metas are shrunk to --fs-2xs by the higher-specificity rule above so the
   single nowrap line fits the narrow cols-3 card. */
.guide-meta { margin-top: var(--s-3); font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--text-dim); letter-spacing: 0.04em; white-space: nowrap; }
.guide-lead { margin-top: var(--s-6); font-size: var(--fs-md); line-height: 1.7; color: var(--text); max-width: 42rem; }
.guide-lead-2 { margin-top: var(--s-5); line-height: 1.7; color: var(--text-dim); max-width: 42rem; }
.guide-hero em { font-style: normal; color: var(--text); }

/* Section blocks within an article */
.guide-section { margin-top: var(--s-12); }
.guide-section h2 { text-wrap: balance; }
.guide-section-intro { margin-top: var(--s-5); font-size: var(--fs-md); line-height: 1.7; color: var(--text-dim); max-width: 42rem; }
.guide-section-body { margin-top: var(--s-6); color: var(--text-dim); line-height: 1.7; }
.guide-section-body > * + * { margin-top: var(--s-6); }
.guide-section-body strong { color: var(--text); }
.guide-section-body a:not(.btn) { color: var(--accent); }

.guide-card h3 { margin-top: var(--s-5); margin-bottom: var(--s-3); }
.guide-card h3:first-child { margin-top: 0; }
.guide-card p { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.6; }
/* Small sans label used inside the sea-state comparison tables
   (e.g. "5 ft @ 10 s"). Card-scoped name is historical. */
.guide-card-meta { font-family: var(--font-sans); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); }
/* Card grid that follows a section intro needs a little air above it. */
.guide-section .guide-card-grid { margin-top: var(--s-8); }

/* ── In-article list furniture ──────────────────────────────────────────────
   Replaces the bordered .guide-card tiles that used to carry factor lists,
   step sequences, and the call-scale legend (2026-08-04). A card is a click
   target; none of that content was clickable, so a box around each item added
   visual weight and made the reader re-enter a container per item. Only the
   hub's linked cards keep .guide-card.

   .guide-points  unordered factor lists ("Six things that …")
   .guide-steps   ordered sequences (pre-departure routines, checklists)
   .guide-calls   the five-level call scale, as a term/definition list
   .guide-contrast  the two-way A/B comparisons, side-by-side without chrome */
.guide-points,
.guide-steps {
  margin-top: var(--s-8);
  padding-left: var(--s-6);
  max-width: 42rem;
  color: var(--text-dim);
  line-height: 1.7;
}
.guide-points { list-style: disc; }
.guide-steps { list-style: decimal; }
.guide-points > li + li,
.guide-steps > li + li { margin-top: var(--s-5); }
.guide-points > li::marker { color: var(--text-dark); }
/* Sequence numerals are changing values — mono + tabular per DESIGN_SYSTEM.md. */
.guide-steps > li::marker {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-dim);
}
/* The lead-in phrase that used to be the card's <h3>. Runs INLINE with the
   sentence it introduces ("Wind speed and angle: Strength matters, …") — a
   block label put each bullet on two lines and re-fragmented the list, which
   is what the tiles were doing (Jon, 2026-08-04). The colon lives in the
   markup, not a ::after, so the label reads correctly to a screen reader and
   to anything scraping the page. */
.guide-point-label {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text);
}
.guide-points a:not(.btn),
.guide-steps a:not(.btn),
.guide-calls a:not(.btn),
.guide-contrast a:not(.btn) { color: var(--accent); }

/* Call scale — GO / CAUTION / MARGINAL / NO-GO / DIVERT. A legend mapping a
   coloured glyph + label to its definition, so <dl> is the honest structure.
   Colour + glyph + label all survive on the <dt> per DESIGN_SYSTEM.md. */
.guide-calls { margin-top: var(--s-8); max-width: 42rem; }
.guide-calls dt {
  margin-top: var(--s-6);
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text);
}
.guide-calls dt:first-of-type { margin-top: 0; }
.guide-calls dd {
  margin: var(--s-2) 0 0;
  color: var(--text-dim);
  line-height: 1.7;
}

/* Two-way contrast (weather routing vs assessment, can-do vs can't-do). The
   side-by-side layout is the information here — you read the columns against
   each other — so the grid stays and only the tile chrome goes. */
.guide-contrast {
  margin-top: var(--s-8);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-8);
}
.guide-contrast h3 { margin: 0 0 var(--s-3); color: var(--text); }
.guide-contrast p { margin: 0; color: var(--text-dim); line-height: 1.7; }
.guide-contrast ul { margin: 0; padding-left: var(--s-5); color: var(--text-dim); line-height: 1.7; }
.guide-contrast li + li { margin-top: var(--s-3); }
.guide-contrast li::marker { color: var(--text-dark); }
@media (max-width: 40rem) {
  .guide-contrast { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* CTA button row (left-justified within a normal .guide-section) */
.guide-cta-row { margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Fine-print disclaimer line under a CTA section */
.guide-disclaimer { margin-top: var(--s-6); font-size: var(--fs-xs); line-height: 1.6; color: var(--text-dim); }

/* Verdict-coloured words inline in prose (color + the word is the label) */
.guide-main .v-go { color: var(--success); }
.guide-main .v-caution, .guide-main .v-marginal { color: var(--warning); }
.guide-main .v-nogo, .guide-main .v-divert { color: var(--danger); }

/* FAQ accordion — matches the Help Center format (help.html): each Q&A is a
   bordered, rounded card on --surface with the native disclosure triangle, a
   bright bold summary (--text) over a dimmed answer body (--text-dim). */
.guide-faq { margin-top: var(--s-8); }
.guide-faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
  background: var(--surface);
}
.guide-faq summary { font-weight: 700; font-size: var(--fs-md); color: var(--text); cursor: pointer; }
.guide-faq details[open] summary { margin-bottom: var(--s-2); }
.guide-faq details p { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.6; }
/* Folded FAQ: always-visible question + answer (no click-to-reveal). Same
   Help-Center card surface as the accordion above; the question is a heading. */
.guide-faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  background: var(--surface);
}
.guide-faq-item h3 { font-weight: 700; font-size: var(--fs-md); color: var(--text); margin: 0 0 var(--s-2); }
.guide-faq-item p { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.6; margin: 0; }

/* Comparison table — highlighted (WeatherWindow.AI) row */
.guide-compare td, .guide-compare th[scope="row"] { vertical-align: top; }
.guide-compare th[scope="row"] { color: var(--text); font-weight: 700; }
.guide-compare tr.featured { background: var(--surface-2); }
.guide-compare .compare-brand {
  display: block; margin-top: var(--s-2);
  font-family: var(--font-sans); font-size: var(--fs-2xs);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text);
}
.guide-compare-wrap {
  margin-top: var(--s-8);
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* Right-edge scroll affordance — the same recipe as the app's
     .reef-table-wrap (css/styles.css §2026-06-16). The 36rem min-width on
     .guide-compare means this wrapper legitimately scrolls on a phone (576px
     of table in a 261px box at 375px); without an edge cue that reads as a
     clipped, broken table rather than "swipe for more". A cover patch in the
     surface colour scrolls WITH the content (background-attachment: local)
     so the shadow disappears at the end of travel, while the radial shadow
     stays pinned (scroll). `transparent` is a keyword, not an inlined
     rgba(); the shadow colour is the --scroll-shadow token. */
  background-color: var(--surface);
  background-image:
    linear-gradient(to left, var(--surface) 36%, transparent),
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent);
  background-position: right center, right center;
  background-repeat: no-repeat;
  background-size: 42px 100%, 26px 100%;
  background-attachment: local, scroll;
}
.guide-compare-wrap .guide-compare { border: 0; }

/* References & further reading — ordered source list at the foot of an article.
   Token-only; links inherit the cyan .guide-prose a:not(.btn) colour. */
.guide-refs { margin-top: var(--s-8); padding-left: var(--s-6); }
.guide-refs li { margin-top: var(--s-3); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-dim); }
.guide-refs li::marker { color: var(--text-dim); font-family: var(--font-mono); }
/* Related-guides "Keep reading" block — a plain bullet list of internal links. */
.guide-links { margin-top: var(--s-6); padding-left: var(--s-6); list-style: disc; }
.guide-links li { margin-top: var(--s-2); line-height: 1.6; }
.guide-links li::marker { color: var(--text-dim); }

/* Card titles use the white --text token (they were inheriting the muted body
   colour and reading as washed-out light blue). Cyan stays rationed. */
.guide-card h3 { color: var(--text); }