/* ==========================================================================
   Guide pages (/guides/…) — gd- prefix
   Mobile-first. Consumes var(--…) tokens from styles.css only; defines no
   :root custom properties and restyles no existing class.
   Loaded per-page via head_extra alongside stories.css + marketing_kit.css.
   ========================================================================== */

/* Reduced motion: styles.css sets `html { scroll-behavior: smooth }` globally.
   DESIGN §2.9 requires smooth scrolling for the TOC jump links to be
   suppressed under reduced motion; this sheet is loaded on guide pages only,
   so the override is page-scoped. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* --- Anchor-target headings (TOC jump targets) --- */
.gd-anchor {
    scroll-margin-top: 88px; /* clears the 64px sticky header */
}

/* Programmatic focus after an anchor jump (tabindex="-1") must be visible. */
.gd-anchor:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

/* White focus variant for the anchor heading on the forest upsell band. */
.gd-anchor--onforest:focus {
    outline-color: #fff;
}

/* --- Intro column (opt-in) ---
   For guides whose article sections are themselves a centred 720px column: the
   opening block (breadcrumb, H1, answer box, TOC) sat on the container edge while
   every section below it started 156px further in, giving the page two competing
   left edges and no shared right edge. Wrapping the intro in this class puts it on
   the same column as the article. Opt-in, because the guides whose sections run
   full-container (e.g. the MYO limits guide's table and symptom cards) are already
   correct with the intro on the container edge. */
.gd-intro {
    max-width: 720px;
    margin-inline: auto;
}

/* --- Direct-answer box --- */
.gd-answer-box {
    background-color: var(--parchment);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    max-width: 720px;
    margin-bottom: var(--space-6);
}

.gd-answer-box p {
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
}

/* The box carried no inter-paragraph margin, so a two-paragraph direct answer
   rendered as one continuous run — the gap between paragraphs measured the same
   as the leading inside them (10–11px), and the second paragraph read as a
   continuation of the first sentence. */
.gd-answer-box p + p {
    margin-top: var(--space-3);
}

/* Same rule as .gd-lead:last-child below: when the box closes a colour-filled
   band its 32px bottom margin stacks on the band's own 64px padding. */
.gd-answer-box:last-child {
    margin-bottom: 0;
}

.gd-answer-updated {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    margin-top: var(--space-3);
}

/* --- Table of contents (plain anchors, always visible, no JS) --- */
.gd-toc {
    max-width: 720px;
}

.gd-toc-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.gd-toc-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--space-6);
}

@media (min-width: 768px) {
    .gd-toc-list {
        grid-template-columns: 1fr 1fr;
    }
}

.gd-toc-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 500;
    font-size: var(--text-base);
    color: var(--color-primary);
    text-decoration: none;
}

.gd-toc-list a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* --- Reference links in guide prose (recipe: Inter 500, forest, underline
       on hover; focus ring comes from the global :focus-visible rule) --- */
.gd-link {
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
}

.gd-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* --- Leads and notes --- */
.gd-lead {
    max-width: 720px;
    line-height: 1.7;
    color: var(--color-text-primary);
    margin-bottom: var(--space-6);
}

/* A trailing lead added its 32px bottom margin to the band's own 64px padding, so
   the colour-filled bands that end on a .gd-lead sat ~32px lower than those that
   end on a list or a .gd-note (measured 71/103 vs 71/70 top/bottom at 1440). */
.gd-lead:last-child {
    margin-bottom: 0;
}

/* Centred BLOCK, left-set text. The block stays centred so it shares an axis with
   the centred .gd-fix-list / .gd-sources beneath it, but the running text is no
   longer centre-aligned: a centred rag sitting directly above a hard-left table
   caption, list or note read as a mistake, and the last line orphaned. */
.gd-lead--center {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.gd-note {
    max-width: 720px;
    line-height: 1.7;
    color: var(--color-text-primary);
    margin-top: var(--space-4);
}

/* --- Limits reference table --- */
.gd-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
}

.gd-table-wrap:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.gd-limits-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    background-color: var(--color-surface);
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.gd-limits-table caption {
    caption-side: top;
    text-align: left;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    padding-bottom: var(--space-3);
}

.gd-limits-table th,
.gd-limits-table td {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
    line-height: var(--line-height-normal);
}

.gd-limits-table thead th {
    background-color: var(--parchment);
    font-family: var(--font-heading);
    font-weight: 600;
}

.gd-limits-table tbody th {
    font-family: var(--font-body);
    font-weight: 600;
}

.gd-limits-table tbody tr:nth-child(even) {
    background-color: var(--color-background);
}

/* --- Symptom cards ---
   The card is capped at its own content measure. Without this the card ran the
   full 1032px container at 1440 while .gd-symptom p / .gd-list stop at 72ch, so
   every card carried ~245px of dead space down its right side — and the
   full-bleed .gd-tool-callout inside a card ended ~245px right of the paragraph
   directly above it. Expressing the cap as the prose measure plus the card's own
   horizontal padding keeps box, prose and callout on one right edge.
   Below 1024 the container is already narrower than this, so nothing changes. */
.gd-symptom {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    max-width: calc(72ch + 2 * var(--space-6));
}

.gd-symptom + .gd-symptom {
    margin-top: var(--space-6);
}

.gd-symptom-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-2xl);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.gd-symptom p {
    line-height: 1.7;
    max-width: 72ch;
    color: var(--color-text-primary);
}

.gd-symptom p + p {
    margin-top: var(--space-3);
}

/* Workshop-voice stencil labels inside symptom cards */
.gd-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-primary);
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
}

.gd-list {
    padding-left: 1.25rem;
    max-width: 72ch;
    line-height: 1.7;
    color: var(--color-text-primary);
}

.gd-list li + li {
    margin-top: var(--space-2);
}

/* --- Fix steps (H2-7) --- */
.gd-fix-list {
    list-style: none;
    max-width: 720px;
    margin: 0 auto;
}

.gd-fix-list > li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.gd-fix-list > li + li {
    margin-top: var(--space-6);
}

/* 40px forest circle, white numeral (sized-down .sb-relief-number language);
   presentational — real numbering comes from the <ol>. */
.gd-step-number {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--forest-moss);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gd-step-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.gd-step-body p {
    line-height: 1.7;
    color: var(--color-text-primary);
}

/* --- Tool cross-link callout (warm register, not ad-styled) --- */
.gd-tool-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-top: var(--space-5);
}

.gd-tool-callout-glyph {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

/* Pixel glyphs render crisp at whole multiples of 16 (48 = 3 × 16). */
.gd-tool-callout-glyph svg {
    width: 48px;
    height: 48px;
    display: block;
}

.gd-tool-callout-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.gd-tool-callout-text {
    line-height: 1.6;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.gd-tool-callout .gd-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* --- Sources citation list (iteration 2's one net-new class — spec §1.7) ---
   Static, non-interactive beyond links; native <ol> numbering, no custom
   glyphs. Small text renders charcoal (R-1); links follow the reference link
   recipe. overflow-wrap: anywhere on the anchor keeps long journal URLs from
   causing horizontal scroll at 320px. */
.gd-sources {
    max-width: 720px;
    margin: 0 auto;
    /* Hanging-indent numerals — LAYOUT BUG FIX (measured 2026-07-26).
       With the default `outside` marker and a 1.25rem (20px) pad, the two-digit
       markers 10.–14. are wider than the pad, so they rendered ~4px LEFT of the
       list box: outside the 720px measure that every other block on the page
       holds (.gd-answer-box / .gd-lead / .mk-faq-answer all start at x=360 @1440
       and x=24 @375), while the citation text sat 20px right of it. Neither
       column aligned with the page and the numeral column itself was ragged.
       `inside` + a negative first-line indent puts every marker — one- and
       two-digit alike — exactly on the measure and hangs continuation lines at
       2rem. Native <ol> numbering is preserved (no counters, no custom glyphs).
       Verified in Chromium and WebKit at 1440/375/320. */
    padding-left: 0;
    list-style-position: inside;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-primary);
}

/* Pairs with `list-style-position: inside` above: the negative first-line indent
   pulls the marker back onto the list's left edge, the padding hangs every
   continuation line clear of it. */
.gd-sources > li {
    padding-left: 2rem;
    text-indent: -2rem;
}

.gd-sources li + li {
    margin-top: var(--space-3);
}

.gd-sources a {
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.gd-sources a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.gd-sources a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* The citation anchors carry .mk-link so every source URL is a real, shared-recipe
   link. .mk-link declares `font-size: var(--text-base)` (16px) as a direct
   declaration, which beats the 14px the anchor would otherwise inherit from
   .gd-sources — so without this the URL rendered a size larger than the citation
   it sits inside, and each entry carried two type sizes on one line. Scoped to
   .gd-sources; the .mk-link recipe itself is untouched, and this restores the
   inherited size rather than introducing one. */
.gd-sources .mk-link {
    font-size: inherit;
}

/* --- Mobile (< 768px) --- */
@media (max-width: 767px) {
    .gd-symptom {
        padding: var(--space-5);
    }

    .gd-symptom-title {
        font-size: var(--text-xl);
    }

    .gd-tool-callout {
        flex-direction: column;
    }
}

/* Superscript citation markers ([S7] → <sup><a class="gd-link">7</a></sup>).
   These sit inline within sentences, so WCAG 2.5.8's "inline" exception
   applies to their size. Vertical padding does not affect an inline element's
   line box, so it buys a materially taller tap area at zero layout cost;
   horizontal padding is deliberately NOT used — across 50+ markers it would
   shift the surrounding prose. */
sup > .gd-link {
    padding-block: 0.65em;
}

/* Same free-height technique for the URL links in the Sources list: they are
   inline at the end of each reference, so vertical padding grows the tap area
   without reflowing the list. */
.gd-sources .mk-link {
    padding-block: 0.4em;
}