/* editorial.css — page-specific editorial sections (hero, stories, figures, pull quotes); builds on app.css tokens.
   Pages: home (.page-home), Our Story (.page-story), What You Can Do (.page-act), Terms (.page-terms),
   Error (.page-error). Shared components (.kicker, .page-head, .band, .link-arrow, .callout,
   .empty-state, .action-card, .stat) live in app.css; this file only arranges them per page. */

/* == shared across the editorial pages ===================================== */

/* one photo treatment for every editorial image: fully desaturated, so no stock colour
   competes with the data colours (the elder-care photo kept magenta/green at 60%) */
:is(.page-home, .page-story) .figure img { filter: grayscale(1) brightness(0.82) contrast(1.05); }

/* yellow is kept for one accent per screen (the home ledger rule, page kickers);
   pull quotes take a neutral rule here */
:is(.page-home, .page-story) .pull { border-left-color: var(--color-border-strong); }

/* the page header already ends with padding; the first band continues from it without a second gap */
:is(.page-story, .page-act) .page-head + .band { padding-top: var(--sp-8); }

/* action cards: the whole card is the hit target (its single link stretches over it) */
:is(.page-home, .page-act) .action-card { position: relative; }
:is(.page-home, .page-act) .action-card a { position: static; }
:is(.page-home, .page-act) .action-card a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
:is(.page-home, .page-act) .action-card a:focus-visible { outline: none; }
:is(.page-home, .page-act) .action-card:has(a:focus-visible) {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* definition lists: one pattern (.fact-list) with two layout modifiers.
   default: term beside its definition (Terms privacy notice)
   --record: a ledger entry with uppercase field names (Our Story record card)
   --grid: titled principles in two columns (Our Story method) */
.fact-list { margin: 0; }
.fact-list > div {
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--color-border);
}
.fact-list dt {
    margin-bottom: var(--sp-1);
    font-weight: 600;
    color: var(--color-text);
}
.fact-list dd {
    margin: 0;
    line-height: var(--leading-relaxed);
    color: var(--color-text-prose);
}
@media (min-width: 768px) {
    .fact-list > div {
        display: grid;
        grid-template-columns: 11rem minmax(0, 1fr);
        gap: var(--sp-6);
    }
    .fact-list dt { margin: 0; }
}
.fact-list.fact-list--record > div {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: baseline;
    padding: var(--sp-3) 0;
}
.fact-list--record > div:first-child { border-top: 0; }
.fact-list--record dt {
    margin: 0;
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.fact-list--record dd {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-text);
}
.fact-list--grid {
    display: grid;
    gap: var(--sp-8) var(--sp-12);
}
@media (min-width: 768px) { .fact-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact-list.fact-list--grid > div {
    display: block;
    padding: var(--sp-4) 0 0;
    border-top-color: var(--color-border-strong);
}
.fact-list.fact-list--grid dt {
    margin: 0 0 var(--sp-2);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
}

/* == Home ================================================================== */

/* hero: question + CTAs, then the stat strip (inside the first viewport), with the latest
   ledger entries beside the copy on wide screens and after the strip on narrow ones */
body.page-home > main { padding-top: var(--sp-6); }
.hero--split {
    display: grid;
    grid-template-areas: "copy" "stats" "ledger";
    gap: var(--sp-8);
    padding-block: 0;
}
.hero--split + .band { border-top: 0; }
.hero-copy { grid-area: copy; }
.hero-stats { grid-area: stats; }
.hero-ledger { grid-area: ledger; }
.hero--split h1 {
    max-width: 20ch;
    margin-bottom: var(--sp-5);
    font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3.25rem);
}
.hero--split .lede { max-width: 38rem; margin-bottom: var(--sp-6); }
@media (min-width: 1024px) {
    .hero--split {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        grid-template-areas: "copy ledger" "stats stats";
        gap: var(--sp-8) var(--sp-16);
        align-items: start;
    }
}

.hero-ledger {
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-highlight);
    border-radius: var(--radius-0);
    padding: var(--sp-1) var(--sp-5) var(--sp-2);
}
.ledger-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--color-border-strong);
}
.ledger-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-text);
}
.ledger-head .link-arrow { font-size: var(--text-sm); }

.ledger-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* each entry is exactly two single lines, whatever the data, so the card stays the height of the copy */
.ledger-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-1) var(--sp-4);
    align-items: baseline;
    margin: 0;
    padding: var(--sp-3) 0;
    list-style: none;
    border-bottom: 1px solid var(--color-border);
}
.ledger-entry:last-child { border-bottom: 0; }
/* the firm link stretches over the whole row: one ≥44px target per entry, none overlapping */
.ledger-entry { position: relative; }
.ledger-entry a::after { content: ""; position: absolute; inset: 0; }
.ledger-entry:hover { background: var(--color-surface-2); box-shadow: 0 0 0 var(--sp-5) var(--color-surface-2); clip-path: inset(0 calc(-1 * var(--sp-5))); }
.ledger-entry:hover a { color: var(--color-accent-hover); }
.ledger-entry a:focus-visible { outline: none; }
.ledger-entry:has(a:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ledger-target, .ledger-meta a {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ledger-target {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--color-text);
}
.ledger-amount {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}
.ledger-amount.is-undisclosed {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-text-faint);
}
.ledger-meta {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    min-width: 0;
    white-space: nowrap;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-text-faint);
}
.ledger-meta > :not(a) { flex-shrink: 0; }
.ledger-meta time { font-variant-numeric: tabular-nums lining-nums; }
.ledger-meta a { color: var(--color-text-muted); }
.ledger-meta a:hover { color: var(--color-accent-hover); }
.hero-ledger .empty-state { padding: var(--sp-6) 0; }

/* stat strip: the shared .stat style laid out as four equal cells divided by hairlines
   (layout only; label/value type comes from app.css) */
.hero-stats .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--color-border-strong);
    border-bottom: 1px solid var(--color-border-strong);
}
@media (min-width: 900px) {
    .hero-stats .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hero-stats article.stat {
    padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
    background: none;
    border: 0;
    border-left: 1px solid var(--color-border);
}
.hero-stats article.stat:nth-child(odd) { border-left: 0; padding-left: 0; }
.hero-stats article.stat:nth-child(n+3) { border-top: 1px solid var(--color-border); }
@media (min-width: 900px) {
    .hero-stats article.stat:nth-child(odd) { border-left: 1px solid var(--color-border); padding-left: var(--sp-5); }
    .hero-stats article.stat:first-child { border-left: 0; padding-left: 0; }
    .hero-stats article.stat:nth-child(n+3) { border-top: 0; }
}
.hero-stats-source {
    margin: var(--sp-2) 0 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-faint);
}
.hero-stats-source time { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.hero-stats-source .link-arrow { font-size: var(--text-sm); vertical-align: middle; }

/* "a pattern in the record": quote and commentary side by side on wide screens */
.pattern-body {
    display: grid;
    gap: var(--sp-8);
}
.pattern-body .pull { max-width: none; }
@media (min-width: 1024px) {
    .pattern-body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--sp-16);
        align-items: start;
    }
}

/* chart module: title and unit stacked, taller plot on wide screens */
.page-home .chart-module { margin: 0; }
.page-home .chart-module .block-sub { margin-bottom: var(--sp-4); }
.page-home .chart-box { height: 260px; }
@media (min-width: 640px) { .page-home .chart-box { height: 300px; } }
@media (min-width: 1024px) { .page-home .chart-box { height: 340px; } }

/* paths into the data: a ruled index, one column per destination */
nav.explore-paths {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--sp-6);
    margin-top: var(--sp-10);
}
@media (min-width: 600px) { nav.explore-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { nav.explore-paths { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.explore-path {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-1) var(--sp-3);
    align-content: start;
    padding: var(--sp-4) 0 var(--sp-5);
    border-top: 1px solid var(--color-border-strong);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--dur-fast) ease;
}
.explore-path:hover { border-top-color: var(--color-accent); text-decoration: none; }
.explore-path-title { font-weight: 600; color: var(--color-text); }
.explore-path:hover .explore-path-title { color: var(--color-accent-hover); }
.explore-path-desc {
    grid-column: 1;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
}
.explore-path svg {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    color: var(--color-accent);
    transition: transform var(--dur-fast) ease;
}
.explore-path:hover svg { transform: translateX(3px); }

/* take-action cards: three across, never an orphan */
.card-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* == Our Story ============================================================== */
.page-head--story .page-dek {
    max-width: var(--measure);
    color: var(--color-text-prose);
    line-height: var(--leading-relaxed);
}
.prose--story { max-width: var(--measure); }
.pull--inline { margin: var(--sp-10) 0; }
/* wide screens: the pull quote moves into the margin beside the text it interrupts */
@media (min-width: 1100px) {
    .prose--story {
        display: grid;
        grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
        column-gap: var(--sp-16);
        max-width: none;
    }
    .prose--story > p { grid-column: 1; }
    .prose--story > .pull--inline {
        grid-column: 2;
        grid-row: 2 / span 2;
        align-self: start;
        margin: 0;
    }
}


/* record band: heading on the left, the ledger entry on the right */
.record-band { display: grid; gap: var(--sp-2); }
.record-band .section-head { margin-bottom: var(--sp-6); }
@media (min-width: 1024px) {
    .record-band {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--sp-16);
        align-items: center;
    }
    .record-band .section-head { margin-bottom: 0; }
}
.record-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-border-strong);
    border-radius: var(--radius-0);
    padding: var(--sp-2) var(--sp-6) var(--sp-4);
}
.record-card .fact-list { margin: 0 0 var(--sp-2); }

/* method: four principles as a definition grid (not a sequence, so no numbers) */
.method-close { margin-top: var(--space-stack); max-width: var(--measure); }
.page-story #method .btn-row { margin-top: var(--sp-8); }

/* == What You Can Do ======================================================= */
.card-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-act .action-card { padding: var(--sp-6); gap: var(--sp-3); }
.action-title {
    margin: 0;
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
}
.action-card--primary { border-top: 2px solid var(--color-accent); }
.page-act .action-card a.cta { margin-top: var(--sp-2); min-height: 3rem; }
.page-act .action-card a.cta:hover { text-decoration: none; }
.corrections .prose { max-width: var(--measure); }
.corrections .btn-row { margin-top: var(--sp-6); }

/* == Terms ================================================================= */
.page-meta {
    margin: var(--sp-3) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-faint);
}
.doc-layout {
    display: grid;
    gap: var(--sp-8);
    align-items: start;
}
@media (min-width: 1024px) {
    .doc-layout {
        grid-template-columns: 14rem minmax(0, var(--measure));
        gap: var(--sp-16);
    }
}

/* contents: a collapsible box above the text on narrow screens, a sticky rail on wide ones */
nav.toc {
    display: block;
    font-size: var(--text-sm);
}
.toc-details {
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.toc-details > summary {
    min-height: var(--target);
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--color-text);
}
.toc-details[open] > summary { margin-bottom: var(--sp-2); }
nav.toc ol {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
nav.toc li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
nav.toc li a {
    display: flex;
    align-items: center;
    min-height: var(--target);
    margin: 0;
    padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
    border-left: 2px solid var(--color-border);
    border-radius: 0;
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
nav.toc li a:hover { color: var(--color-text); border-left-color: var(--color-border-hover); }
nav.toc li a[aria-current] { color: var(--color-text); border-left-color: var(--color-accent); }
@media (min-width: 1024px) {
    nav.toc {
        position: sticky;
        top: calc(var(--masthead-h) + var(--sp-6));
        max-height: calc(100vh - var(--masthead-h) - var(--sp-12));
        overflow-y: auto;
    }
    .toc-details { padding: 0; background: none; border: 0; }
    .toc-details > summary { pointer-events: none; min-height: 0; margin-bottom: var(--sp-3); }
    .toc-details > summary::after { display: none; }
}

.doc-body { max-width: var(--measure); }
.doc-body h2 {
    margin: var(--sp-10) 0 var(--sp-3);
    font-size: var(--text-lg);
    scroll-margin-top: calc(var(--masthead-h) + var(--sp-4));
}
.doc-body .callout { margin-bottom: var(--sp-4); }
.doc-body .callout p { margin-bottom: var(--sp-2); }
.callout-title {
    font-weight: 600;
    color: var(--color-text);
}
.doc-body .fact-list > div:last-child { border-bottom: 1px solid var(--color-border); }

/* == Error ================================================================= */
.error-page {
    min-height: calc(70vh - var(--masthead-h));
    display: grid;
    align-content: center;
}
.error-page .page-head { width: 100%; }
.error-code {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-serif);
    font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--color-text-faint);
}
.error-help {
    margin: var(--sp-8) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}