/* ============================================================
   .prose — proposed canonical long-form typography (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the four parallel typography ladders in production:
     .privacy-content .section-content / -title (privacy.css)
     .product-news-content (product-news.css)
     .tools-content-section h2/h3/p/ul/li (tools.css)
     .docs-section h2/h3/h4/p/ul (docs.css)

   Reconciles the divergences:
     - line-height       1.7 (var(--line-relaxed)) — drops literal 1.8 in privacy/product-news
     - h2                var(--font-3xl) (28px) + border-bottom — picks the privacy/docs
                         look as canon; in-prose h2 stays static (clamp belongs to hero/section)
     - paragraph margin  var(--space-lg) (24px) — drops literal 16px in privacy
     - link colour       var(--color-primary-light) — reads better on dark, matches product-news
     - list bullets      native disc/circle — no custom 6px primary-tinted ::before fork
     - measure           72ch on root (≈800px at font-base) — single source of truth

   Education's audience cards stay bespoke — they are cards, not prose.

   Slots:
     .prose                base prose container; sets text colour, line-height, measure
       child h2 / h3 / h4   stylesheet handles heading rhythm
       child p              body paragraph (can carry --lead via .prose--lead on root)
       child ul / ol / li   lists; native bullets
       child a              inline link
       child strong         bold; promotes colour to --color-text
       child img            rounded image with vertical breathing room
       child em             italic emphasis (no colour change)
       child blockquote     pulled-aside quotation

   Modifiers:
     --wide       removes the 72ch measure cap (for docs-style 1400px containers)
     --lead       elevates the first <p> to lead-paragraph treatment (font-lg, full-strength colour)

   Inline <code>: NOT redefined here — falls through to the canonical .code-inline
   from public/css/code.css, which is already loaded on /docs/ui-kit.
   ============================================================ */

.prose {
    color: var(--color-text-secondary);
    font-size: var(--font-base);
    line-height: var(--line-relaxed);
    max-width: 72ch;
}

.prose--wide {
    max-width: none;
}

/* Headings */
.prose h2 {
    color: var(--color-text);
    font-size: var(--font-3xl);
    font-weight: 700;
    line-height: var(--line-snug);
    letter-spacing: -0.01em;
    margin: var(--space-2xl) 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.prose h2:first-child {
    margin-top: 0;
}

.prose h3 {
    color: var(--color-text);
    font-size: var(--font-xl);
    font-weight: 600;
    line-height: var(--line-snug);
    margin: var(--space-xl) 0 var(--space-sm);
}

.prose h4 {
    color: var(--color-text);
    font-size: var(--font-lg);
    font-weight: 600;
    line-height: var(--line-snug);
    margin: var(--space-lg) 0 var(--space-sm);
}

/* Body text */
.prose p {
    margin: 0 0 var(--space-lg);
}

.prose strong {
    color: var(--color-text);
    font-weight: 600;
}

.prose em {
    font-style: italic;
}

/* Inline links — primary-tinted underline that pops on hover */
.prose a {
    color: var(--color-primary-light);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.prose a:hover {
    border-bottom-color: currentColor;
    color: var(--color-primary);
}

/* Lists — native bullets, no custom marker */
.prose ul,
.prose ol {
    margin: 0 0 var(--space-lg) var(--space-lg);
    padding-left: var(--space-md);
}

.prose ul {
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

.prose li {
    margin-bottom: var(--space-sm);
    line-height: var(--line-relaxed);
}

.prose li::marker {
    color: var(--color-text-muted);
}

.prose li:last-child {
    margin-bottom: 0;
}

/* Nested lists */
.prose li > ul,
.prose li > ol {
    margin-top: var(--space-sm);
    margin-bottom: 0;
}

/* Images */
.prose img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    margin: var(--space-lg) 0;
}

/* Blockquote — pulled-aside quotation */
.prose blockquote {
    margin: var(--space-lg) 0;
    padding: var(--space-md) var(--space-lg);
    border-left: 3px solid var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.05);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-text);
    font-style: italic;
}

.prose blockquote p:last-child {
    margin-bottom: 0;
}

/* Horizontal rule */
.prose hr {
    margin: var(--space-2xl) 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}

/* Lead paragraph — elevates the first <p> for marketing intros */
.prose--lead > p:first-of-type {
    color: var(--color-text);
    font-size: var(--font-lg);
    line-height: var(--line-relaxed);
}

/* ============================================
   .prose--accent — gradient bar to the left of h2 + bottom border separator
   ============================================
   Replaces the privacy-page `.section-title` treatment from privacy.css:
   each h2 gets a 4-px primary-gradient bar on the left (a vertical pill,
   28 px tall) and a 2-px border underneath that separates the section
   from its body. Reads as a "section anchor" rather than a freestanding
   heading — useful for legal / docs / changelog pages where the reader
   is scanning for a specific section.

   Apply on the `.prose` root: `<div class="prose prose--accent">…</div>`.
   The rule targets all direct h2 descendants of `.prose--accent`.
   ============================================ */
.prose--accent > h2 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-border);
}

.prose--accent > h2::before {
    content: '';
    flex-shrink: 0;
    width: 4px;
    height: 28px;
    background: var(--gradient-primary);
    border-radius: 2px;
}