/*
 * UK by Numbers — shared styles for every page (home, topic pages, chart pages).
 * Headings: Lora. Body + charts: DM Sans.
 * Colour roles are tokens on :root; dark values follow the OS setting unless
 * data-theme="light" is set, and data-theme="dark" forces them.
 */

:root {
    color-scheme: light;
    --bg: #ffffff;
    --bg-2: #f6f5f2;
    --surface-1: #ffffff;
    --line: #e4e2dc;
    --line-2: #eeede8;
    --grid: #ebeae5;
    --text-primary: #1f1f1e;
    --text-secondary: #52514e;
    --text-muted: #77756f;
    --accent: #1f5fae;
    --accent-ink: #1b4f91;
    --header-bg: #1d2633;
    --header-ink: #ffffff;
    --tooltip-bg: #ffffff;
    --shadow: 0 4px 18px rgba(20, 20, 18, 0.12);

    /* Categorical palette — validated order (see dataviz skill reference palette) */
    --series-1: #2a78d6;
    --series-2: #e34948;
    --series-3: #1baf7a;
    --series-4: #eda100;
    --series-5: #e87ba4;
    --series-6: #008300;
    --series-7: #6250d6;
    --series-8: #eb6834;
    --series-other: #a3a29c;
    --series-muted: #c9c8c2;
    --series-forest: #0f5132;

    --serif: "Lora", Georgia, serif;
    --sans: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --maxw: 1180px;
    --textw: 720px;
    --colw: 920px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #161616;
        --bg-2: #1e1e1d;
        --surface-1: #161616;
        --line: #34332f;
        --line-2: #2a2a27;
        --grid: #2c2b28;
        --text-primary: #f0efec;
        --text-secondary: #c3c2b7;
        --text-muted: #9a998f;
        --accent: #6da7ec;
        --accent-ink: #86b6ef;
        --header-bg: #0f1520;
        --tooltip-bg: #23231f;
        --shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
        --series-1: #3987e5;
        --series-2: #e66767;
        --series-3: #199e70;
        --series-4: #c98500;
        --series-5: #d55181;
        --series-6: #008300;
        --series-7: #9085e9;
        --series-8: #d95926;
        --series-other: #77766f;
        --series-muted: #4a4945;
    --series-forest: #6fb58f;
        --series-forest: #6fb58f;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #161616;
    --bg-2: #1e1e1d;
    --surface-1: #161616;
    --line: #34332f;
    --line-2: #2a2a27;
    --grid: #2c2b28;
    --text-primary: #f0efec;
    --text-secondary: #c3c2b7;
    --text-muted: #9a998f;
    --accent: #6da7ec;
    --accent-ink: #86b6ef;
    --header-bg: #0f1520;
    --tooltip-bg: #23231f;
    --shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    --series-1: #3987e5;
    --series-2: #e66767;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #d95926;
    --series-other: #77766f;
    --series-muted: #4a4945;
    --series-forest: #6fb58f;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    background: var(--bg);
    color: var(--text-primary);
}
a { color: var(--accent-ink); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; }

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header { background: var(--header-bg); color: var(--header-ink); }
.site-header-in {
    max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; height: 60px; gap: 24px;
}
.site-title { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; }
.site-title .logo { font-size: 19px; }
.site-title-sub {
    font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.62;
    padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.25); line-height: 1.5; max-width: 120px;
}
@media (max-width: 760px) { .site-title-sub { display: none; } }

/* Logo: a square mark and a one-line wordmark. Mark colours come from these tokens, so it adapts to
   the dark header and dark mode. */
:root { --logo-ink: var(--text-primary); --logo-blue: #2a78d6; --logo-deep: #1f5fae; --logo-red: #d93f3f; }
.logo { display: inline-flex; align-items: center; gap: 0.45em; line-height: 1; white-space: nowrap; letter-spacing: -0.005em; }
.logo-mark { flex: none; display: block; }
.logo-muted { opacity: 0.62; }
.site-header .logo, .logo-demo-header .logo, .logo-demo-tile.dark .logo { --logo-ink: #fff; --logo-blue: #6da7ec; --logo-deep: #2a78d6; --logo-red: #f06b6b; }
.site-nav { margin-left: auto; display: flex; gap: 4px; align-items: stretch; height: 100%; }
.site-nav a, .site-nav .nav-soon {
    display: flex; align-items: center; padding: 0 12px; color: rgba(255, 255, 255, 0.82);
    text-decoration: none; font-size: 15px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.site-nav a:hover { color: #fff; border-bottom-color: #6da7ec; }
.site-nav a.active { color: #fff; border-bottom-color: #6da7ec; font-weight: 500; }
/* Topics menu: a panel under the header listing every category and its topics */
.site-header { position: relative; z-index: 30; }
.nav-topics-button {
    display: flex; align-items: center; gap: 7px; padding: 0 12px; font: inherit; font-size: 15px; cursor: pointer;
    background: none; border: 0; border-bottom: 2px solid transparent; color: rgba(255, 255, 255, 0.82); white-space: nowrap;
}
.nav-topics-button svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.nav-topics-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-topics-button:hover, .nav-topics-button[aria-expanded="true"] { color: #fff; border-bottom-color: #6da7ec; }
.nav-topics-button.active { color: #fff; border-bottom-color: #6da7ec; font-weight: 500; }
.nav-topics-button:focus-visible { outline: 2px solid #6da7ec; outline-offset: -2px; }
.topics-menu {
    position: absolute; left: 0; right: 0; top: 100%; background: var(--surface-1); color: var(--text-primary);
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: calc(100vh - 60px); overflow-y: auto;
}
.topics-menu[hidden] { display: none; }
.topics-menu-in { max-width: var(--maxw); margin: 0 auto; padding: 26px 24px 18px; }

/* Topic index (Topics menu and home page): categories flow into columns */
.topic-index { columns: 4 160px; column-gap: 32px; }
.topic-group { break-inside: avoid; margin-bottom: 22px; }
/* Category headings are dark with a rule under them, so they can't be mistaken for the grey topics that aren't built yet */
.topic-group-name {
    margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary);
}
.topic-group ul { list-style: none; margin: 0; padding: 0; }
.topic-group li a { display: block; padding: 3px 0; font-size: 15px; }
.topic-group li a { color: var(--accent-ink); font-weight: 500; text-decoration: none; }
.topic-group a:hover { color: var(--accent-ink); text-decoration: underline; }
.topic-group a[aria-current="page"] { color: var(--text-primary); font-weight: 600; }
/* A category that is a single topic (e.g. Housing): its heading is the link */
.topic-group.single .topic-group-name a { color: var(--accent-ink); text-decoration: none; }
.topic-group.single .topic-group-name a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .site-nav .hide-sm { display: none; }
    .nav-topics-button { padding: 0 8px; font-size: 14px; }
    .topics-menu { max-height: calc(100vh - 92px); }
    .topics-menu-in { padding: 20px 16px 12px; }
    .site-header-in { padding: 0 16px; height: auto; flex-wrap: wrap; gap: 0; }
    .site-title { height: 52px; }
    .site-nav { margin-left: -8px; width: calc(100% + 16px); height: 40px; overflow-x: auto; scrollbar-width: none; gap: 0; }
    .site-nav a, .site-nav .nav-soon { padding: 0 8px; font-size: 14px; }
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); margin-top: 72px; background: var(--bg-2); }
.site-footer-in {
    max-width: var(--maxw); margin: 0 auto; padding: 32px 24px 48px;
    font-size: 14px; color: var(--text-secondary); display: grid; gap: 8px;
}

/* ── Topic page ───────────────────────────────────────────────────────── */
/* One centred column: prose at --textw, with charts and the contents list a little wider (--colw). */
.topic-hero { max-width: calc(var(--textw) + 48px); margin: 0 auto; padding: 52px 24px 8px; }
.topic-label { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); font-weight: 500; margin: 0 0 8px; }
.topic-hero h1 { font-size: 44px; font-weight: 400; margin: 0 0 16px; }
.topic-intro { max-width: var(--textw); font-size: 16px; color: var(--text-secondary); }
.topic-intro p { margin: 0 0 14px; }

.chart-section { max-width: var(--colw); margin: 0 auto; padding: 56px 24px 8px; scroll-margin-top: 56px; }
.section-heading, .section-text { max-width: var(--textw); margin-left: auto; margin-right: auto; }
.section-heading { font-size: 27px; margin-top: 0; margin-bottom: 14px; }
.section-body { font-size: 16px; color: var(--text-secondary); margin: 0 0 14px; }
.key-finding {
    border-left: 3px solid var(--accent); padding: 8px 14px; margin: 18px 0; background: var(--bg-2);
    font-size: 15px; color: var(--text-primary); border-radius: 0 6px 6px 0;
}
.key-finding strong { font-weight: 600; }
.chart-embed iframe { width: 100%; border: 0; display: block; min-height: 420px; }
/* Each embedded chart sits in its own frame */
.chart-embed { margin: 28px auto 0; border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px 14px; background: var(--surface-1); }
.chart-embed + .chart-embed { margin-top: 28px; }
@media (max-width: 640px) { .chart-embed { padding: 14px 12px 10px; margin-left: -8px; margin-right: -8px; } }
@media (max-width: 960px) {
    .topic-hero h1 { font-size: 34px; }
}
/* ── Topic page structure ───────────────────────────────────────────────
   Parts open like chapters (a heavy rule, "Part 2" and a large title) and sections are numbered 2.1, 2.2….
   A side nav, drawn as a progress line, shows where you are; on narrower screens a slim bar does the same. */
.topic-layout { max-width: var(--maxw); margin: 0 auto; }
.side-nav { display: none; }
.group-head {
    max-width: var(--textw); margin: 80px auto 0; padding-top: 18px; border-top: 3px solid var(--text-primary); scroll-margin-top: 56px;
}
.group-num { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); }
.section-group-title { margin: 0; font-family: var(--serif); font-size: 36px; font-weight: 400; color: var(--text-primary); }
.section-num { margin-right: 10px; font-family: var(--sans); font-size: 0.62em; font-weight: 600; color: var(--accent-ink); vertical-align: 0.2em; }
@media (max-width: 760px) { .group-head { margin-left: 24px; margin-right: 24px; } .section-group-title { font-size: 28px; } }

/* Side nav (wide screens): parts, with the current part's sections on a progress line; read sections are filled in */
@media (min-width: 1100px) {
    .topic-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; padding: 0 24px; }
    .side-nav {
        display: block; position: sticky; top: 20px; align-self: start; max-height: calc(100vh - 40px); overflow-y: auto;
        padding: 52px 4px 24px 0; scrollbar-width: none;
    }
    .side-nav::-webkit-scrollbar { display: none; }
}
/* Only the part you're reading shows its sections; the others collapse to their titles, so the nav fits the
   screen even on long pages. */
.side-nav .sn-group:not(.active) > ol { display: none; }
.side-nav .sn-group { margin-bottom: 10px; }
.side-nav-title { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.sn-list, .sn-list ol { list-style: none; margin: 0; padding: 0; }
.sn-group { margin-bottom: 14px; }
.sn-group-link { display: flex; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-primary); text-decoration: none; line-height: 1.35; padding: 2px 0 4px; }
.sn-num { color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 500; }
.sn-group.active .sn-num { color: var(--accent-ink); }
.sn-list ol { position: relative; margin-left: 9px; border-left: 2px solid var(--line); }
.sn-list ol li { position: relative; }
.sn-list ol li.done, .sn-list ol li:has(a.active) { box-shadow: -2px 0 0 var(--accent); }
.sn-list ol a { display: block; font-size: 13.5px; line-height: 1.35; padding: 4px 0 4px 16px; color: var(--text-secondary); text-decoration: none; }
.sn-list ol a::before {
    content: ""; position: absolute; left: -6px; top: 9px; width: 10px; height: 10px; border-radius: 50%;
    background: var(--surface-1); border: 2px solid var(--line); box-sizing: border-box;
}
.sn-list ol li.done a::before { background: var(--accent); border-color: var(--accent); }
.sn-list ol a.active { color: var(--text-primary); font-weight: 600; }
.sn-list ol a.active::before { background: var(--surface-1); border-color: var(--accent); width: 12px; height: 12px; left: -7px; top: 8px; }
.sn-list a:hover { color: var(--accent-ink); }

/* Section bar (narrower screens): slides in once you've scrolled past the intro */
.section-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 25; background: var(--surface-1); border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 10px rgba(20, 20, 18, 0.06); transform: translateY(-110%); transition: transform 0.2s;
}
.section-bar.show { transform: none; }
@media (min-width: 1100px) { .section-bar { display: none; } }
.section-bar-in { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; position: relative; }
.sb-toggle {
    display: flex; align-items: baseline; gap: 8px; width: 100%; min-width: 0; padding: 12px 0; font: inherit; text-align: left;
    background: none; border: 0; cursor: pointer; color: var(--text-primary);
}
.sb-group { flex: none; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-current { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-toggle svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; align-self: center; }
.sb-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface-1); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: 70vh; overflow-y: auto; padding: 16px 16px 6px; }
.sb-panel[hidden] { display: none; }

/* ── Chart page ───────────────────────────────────────────────────────── */
.chart-page { max-width: 980px; margin: 0 auto; padding: 32px 24px 0; }
.chart-card { position: relative; }
.chart-head { margin-bottom: 10px; display: flex; align-items: flex-start; gap: 16px; }
.chart-head-text { flex: 1; min-width: 0; }
/* The logo in a chart's top-right corner, linking to the home page */
/* The frame sets the logo apart from the title and subtitle. */
.chart-logo {
    flex: none; display: inline-flex; padding: 6px 10px 6px 7px; border: 1px solid var(--line); border-radius: 8px;
    font-size: 13.5px; color: var(--text-primary); text-decoration: none; transition: border-color 0.15s;
}
.chart-logo:hover { border-color: var(--text-muted); }
@media (max-width: 480px) { .chart-logo { padding: 5px; } .chart-logo .logo-word { display: none; } }
.chart-title-link { color: inherit; text-decoration: none; }
.chart-title-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.chart-title { font-family: var(--sans); font-size: 22px; font-weight: 600; margin: 0 0 4px; line-height: 1.25; }
.chart-subtitle { margin: 0; font-size: 15px; color: var(--text-secondary); max-width: 760px; }
.chart-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 8px; }
.chart-tabs, .chart-segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; padding: 2px; gap: 2px; }
.chart-tab, .seg {
    font: inherit; font-size: 13px; border: 0; background: none; color: var(--text-secondary);
    padding: 5px 12px; border-radius: 6px; cursor: pointer;
}
.chart-tab:hover, .seg:hover { color: var(--text-primary); background: var(--bg-2); }
.chart-tab.active, .seg.active { background: var(--text-primary); color: var(--bg); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 6px; font-size: 13px; color: var(--text-secondary); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.legend-line { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.chart-body { position: relative; min-height: 200px; }
.chart-body svg { display: block; overflow: visible; font-family: var(--sans); }

.grid line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.grid line.zero { stroke: var(--text-muted); }
.axis-labels text, .cat-labels text { fill: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.cat-labels text { fill: var(--text-secondary); font-size: 13px; }
.cat-labels text.highlight { fill: var(--text-primary); font-weight: 600; }
.series-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.series-dot { stroke: var(--surface-1); stroke-width: 2; }
.end-labels text { font-size: 12.5px; fill: var(--text-secondary); }
.end-label-name { font-weight: 500; fill: var(--text-primary); }
.end-label-value { fill: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* Labels placed on the plot (endLabels: "atLine"): a background-coloured outline keeps them readable over lines */
.end-label-inline { paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; stroke-linejoin: round; }
.facet-title { fill: var(--text-primary); font-size: 13.5px; font-weight: 600; }
.facet-title .facet-value { font-weight: 400; fill: var(--text-secondary); }
.end-leader { fill: none; stroke: var(--text-muted); stroke-width: 1; stroke-opacity: 0.55; }
.area-layer { stroke: var(--surface-1); stroke-width: 0.5; }
.hover-rule { stroke: var(--text-primary); stroke-width: 1; stroke-opacity: 0.35; pointer-events: none; }
.annotation line { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.annotation text { fill: var(--text-muted); font-size: 11.5px; }
.caution-band { fill: var(--text-muted); opacity: 0.12; }
.caution text { fill: var(--text-muted); font-size: 11.5px; }
.hit { fill: transparent; }
/* Hovering a line chart fades the lines other than the one nearest the pointer */
.series, .end-labels g { transition: opacity 0.12s; }
.series.faded, .end-labels g.faded { opacity: 0.22; }
.hit.hover { fill: var(--text-primary); fill-opacity: 0.04; }
/* Treemap: separators between tiles show the page background; hovering lightens a tile */
.treemap-tile rect { transition: opacity 0.12s; }
.treemap-tile.hover rect { opacity: 0.82; }
.treemap-label, .treemap-group-label { pointer-events: none; font-variant-numeric: tabular-nums; }
.treemap-group-label { font-size: 12px; font-weight: 700; }
.sankey-wrap { overflow-x: auto; }
.facet-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-1); color: var(--text-secondary); font: inherit; font-size: 13px; cursor: pointer; }
.facet-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.4; }
.facet-toggle:hover { color: var(--text-primary); }
.facet-toggle.active { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-1); }
.facet-toggle[hidden] { display: none; }
.pyramid-row rect { transition: opacity 0.12s; }
.pyramid-row.hover rect { opacity: 0.8; }
.pyramid-age { font-size: 11.5px; fill: var(--text-secondary); font-variant-numeric: tabular-nums; pointer-events: none; }
.pyramid-head text { font-size: 13px; font-weight: 600; }
.pyramid-compare path { fill: none; stroke: var(--text-primary); stroke-width: 1.4; pointer-events: none; }
.pyramid-compare text { font-size: 12px; fill: var(--text-secondary); }
.sankey-link { fill: none; stroke-opacity: 0.28; transition: stroke-opacity 0.12s; }
.sankey-link.hover { stroke-opacity: 0.5; }
.sankey-label { pointer-events: none; fill: var(--text-primary); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.chart-table td.text-cell, .chart-table th.text-cell { text-align: left; }
.chart-table tr.highlight td { font-weight: 600; }
.bar-total text { fill: var(--text-secondary); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.chart-tooltip {
    position: absolute; display: none; pointer-events: none; z-index: 10;
    background: var(--tooltip-bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
    padding: 8px 10px; font-size: 13px; min-width: 170px; max-width: 300px;
}
.tip-head { font-weight: 600; margin-bottom: 4px; }
.tip-flag { font-weight: 400; font-size: 11px; color: var(--text-muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.tip-row { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.tip-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.tip-line { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.tip-focus .tip-label, .tip-focus .tip-value { color: var(--text-primary); font-weight: 600; }
.tip-dim { opacity: 0.55; }
.tip-label { color: var(--text-secondary); flex: 1; }
.tip-value { font-variant-numeric: tabular-nums; font-weight: 500; }
.tip-total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.tip-note { margin-top: 6px; font-size: 11.5px; color: var(--text-muted); }

.chart-table-wrap { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.chart-table { border-collapse: collapse; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.chart-table th, .chart-table td { padding: 6px 12px; text-align: right; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.chart-table th:first-child, .chart-table td:first-child { text-align: left; }
.chart-table th { position: sticky; top: 0; background: var(--bg-2); font-weight: 500; color: var(--text-secondary); padding: 0; white-space: normal; vertical-align: bottom; }
/* Sortable headers: the arrow sits on the label's outer side, so labels line up with the values below */
.chart-table .sort-button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 6px 12px; text-align: right; cursor: pointer; }
.chart-table th:first-child .sort-button, .chart-table th.text-cell .sort-button { text-align: left; }
.chart-table .sort-button:hover { color: var(--text); }
.chart-table .sort-button:hover .sort-icon:empty::before { content: "▼"; opacity: 0.35; }
.chart-table th:first-child .sort-button:hover .sort-icon:empty::before { content: "▲"; }
.chart-table .sort-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.chart-table th[aria-sort="ascending"], .chart-table th[aria-sort="descending"] { color: var(--text); }
.chart-table .sort-icon { display: inline-block; font-size: 9px; width: 9px; margin: 0 4px; text-align: center; }
.chart-table th:not(:first-child) .sort-icon { margin-left: 0; }
.chart-table th:first-child .sort-icon { margin-right: 0; }

.chart-footnote { margin: 10px 0 0; font-size: 13px; color: var(--text-secondary); }
.chart-footer {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--text-muted);
}
.chart-source-label { font-weight: 500; }
.chart-source a { color: var(--text-secondary); }
.chart-actions { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.chart-action { font: inherit; white-space: nowrap; background: none; border: 0; padding: 0; color: var(--accent-ink); cursor: pointer; text-decoration: none; }
.chart-action:hover { text-decoration: underline; }

.chart-about { max-width: var(--textw); margin: 36px 0 0; font-size: 15px; color: var(--text-secondary); }
.chart-about h2 { font-size: 20px; color: var(--text-primary); margin: 0 0 10px; }
.chart-about li { margin-bottom: 6px; }
.chart-about .appears-in { margin-top: 20px; }

/* Embedded: no site chrome, tight padding, transparent background */
html.embedded, html.embedded body { overflow: hidden; }
html.embedded body { background: var(--surface-1); }
html.embedded .site-header, html.embedded .site-footer, html.embedded .chart-about { display: none; }
html.embedded .chart-page { padding: 4px 2px 6px; max-width: none; }
html.embedded .chart-title { font-size: 19px; }
html.embedded .chart-subtitle { font-size: 14px; }

/* Chart library: a search box, then one column of compact rows grouped by topic */
.library { max-width: var(--textw); margin: 0 auto; padding: 40px 24px; }
.library h1 { font-size: 38px; font-weight: 400; margin: 0 0 8px; }
.library-search { position: relative; margin: 22px 0 8px; }
.library-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); fill: none; stroke: var(--text-muted); stroke-width: 1.8; stroke-linecap: round; }
.library-search input {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--text-primary); background: var(--surface-1);
    border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 12px 42px;
}
.library-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.library-count { margin: 0; font-size: 13px; color: var(--text-muted); }
.library-empty { margin: 24px 0; color: var(--text-secondary); }
.library-group[hidden], .library-list li[hidden] { display: none; }
.library-group h2 { display: flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 28px 0 8px; }
.library-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.library-list a {
    display: flex; align-items: center; gap: 14px; padding: 7px 12px 7px 7px; border: 1px solid var(--line-2); border-radius: 6px;
    text-decoration: none; color: var(--text-primary);
}
.library-thumb { flex: none; width: 76px; height: 42px; padding: 5px 6px; background: var(--bg-2); border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.library-thumb .cl-thumb { width: 100%; height: 100%; display: block; }
.library-thumb .cl-thumb-icon svg { width: 22px; height: 22px; }
.library-text { min-width: 0; }
.library-list a:hover { border-color: var(--accent); background: var(--bg-2); }
.library-title { display: block; font-size: 15px; font-weight: 500; }
.library-sub { display: block; font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Dropdown filter for long option lists */
.chart-select-wrap { margin-left: auto; display: inline-flex; max-width: 100%; min-width: 0; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
/* A long option name mustn't make the menu wider than the screen: the menu shrinks and truncates instead. */
.chart-select-wrap .chart-select { flex: 1 1 auto; min-width: 0; width: 100%; }
.chart-select-wrap > span { flex: none; }
.chart-select {
    max-width: 100%; text-overflow: ellipsis;
    font: inherit; font-size: 13.5px; color: var(--text-primary); background: var(--surface-1);
    border: 1px solid var(--line); border-radius: 8px; padding: 5px 30px 5px 10px; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.chart-select:focus-visible, .chart-tab:focus-visible, .seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Place picker: "+ Add place" button at the right of the controls, with a foldout list of places to tick */
.chart-picker { position: relative; margin-left: auto; }
.chart-select-wrap + .chart-picker { margin-left: 0; }
.picker-button {
    font: inherit; font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--line); background: var(--surface-1); color: var(--text-primary); border-radius: 8px; padding: 5px 12px;
}
.picker-button svg { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.picker-button:hover, .picker-button[aria-expanded="true"] { border-color: var(--text-muted); }
.picker-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.picker-panel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 290px; max-width: calc(100vw - 32px);
    background: var(--surface-1); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 8px;
}
.picker-panel[hidden] { display: none; }
.picker-search {
    font: inherit; font-size: 13.5px; width: 100%; box-sizing: border-box; margin-bottom: 6px; color: var(--text-primary);
    background: var(--surface-1); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px;
}
.picker-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.picker-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; font-size: 13.5px; }
.picker-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; cursor: pointer; color: var(--text-secondary); }
.picker-item:hover { background: var(--bg-2); }
.picker-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.picker-item.on { color: var(--text-primary); font-weight: 500; }
.picker-item[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.picker-item[aria-disabled="true"]:hover { background: none; }
.picker-tick {
    flex: none; width: 16px; height: 16px; box-sizing: border-box; border: 1.5px solid var(--text-muted); border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
}
.picker-item.on .picker-tick { background: var(--text-primary); border-color: var(--text-primary); }
.picker-tick svg { stroke: var(--bg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.picker-name { flex: 1; min-width: 0; }
.picker-empty { padding: 6px 8px; color: var(--text-muted); }
.picker-note { margin: 6px 8px 2px; font-size: 12px; color: var(--text-muted); }
.picker-note:empty { display: none; }
.chart-more {
    font: inherit; font-size: 13px; margin: 6px 0 0; padding: 6px 12px; cursor: pointer;
    border: 1px solid var(--line); background: var(--surface-1); color: var(--accent-ink); border-radius: 8px;
}
.chart-more:hover { border-color: var(--accent); }
.ref-line text { fill: var(--text-secondary); font-size: 12px; }


/* Bar view of a timeline chart */
.cat-label { fill: var(--text-secondary); font-size: 13px; }
.cat-label.highlight { fill: var(--text-primary); font-weight: 600; }
.bar-value { fill: var(--text-secondary); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Timeline: a year range (line view) or a single year (bar view), with a play button */
.chart-timeline { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 13px; color: var(--text-secondary); }
.timeline-play {
    flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    border: 1px solid var(--line); border-radius: 50%; background: var(--surface-1); color: var(--text-primary); padding: 0;
}
.timeline-play svg { fill: currentColor; }
.timeline-play:hover { border-color: var(--text-muted); }
.timeline-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.timeline-year { flex: none; min-width: 2.6em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text-primary); }
.timeline-year[hidden] { display: none; }
/* Two range inputs share one track; only their thumbs take the pointer. Thumbs are 16px, so the fill runs between their centres. */
.timeline-track { position: relative; flex: 1; min-width: 0; height: 28px; }
.timeline-track::before, .timeline-fill { content: ""; position: absolute; top: 12px; height: 4px; border-radius: 2px; }
.timeline-track::before { left: 8px; right: 8px; background: var(--line); }
.timeline-fill { left: calc(8px + (100% - 16px) * var(--a, 0)); width: calc((100% - 16px) * (var(--b, 1) - var(--a, 0))); background: var(--accent); }
.timeline-track input {
    position: absolute; inset: 0; width: 100%; height: 28px; margin: 0; background: none; pointer-events: none;
    -webkit-appearance: none; appearance: none; z-index: 2;
}
.timeline-track input[hidden] { display: none; }
.timeline-track input::-webkit-slider-runnable-track { background: none; height: 28px; }
.timeline-track input::-moz-range-track { background: none; }
.timeline-track input::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto; cursor: grab; width: 16px; height: 16px; margin-top: 6px;
    border-radius: 50%; background: var(--surface-1); border: 2px solid var(--accent); box-sizing: border-box;
}
.timeline-track input::-moz-range-thumb {
    pointer-events: auto; cursor: grab; width: 16px; height: 16px; border-radius: 50%;
    background: var(--surface-1); border: 2px solid var(--accent); box-sizing: border-box;
}
.timeline-track input:focus-visible { outline: none; }
.timeline-track input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.timeline-track input:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Logo options preview page */
.logo-options { max-width: var(--colw); margin: 0 auto; padding: 40px 24px; }
.logo-options h1 { font-size: 38px; font-weight: 400; margin: 0 0 8px; }
.logo-option { margin: 48px 0 0; }
.logo-option h2 { font-size: 24px; margin: 0 0 6px; }
.logo-option > p { margin: 0 0 16px; color: var(--text-secondary); max-width: var(--textw); }
.logo-current { font-family: var(--sans); font-size: 12px; font-weight: 500; vertical-align: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; }
.logo-demo-header { background: var(--header-bg); border-radius: 10px; padding: 16px 22px; margin-bottom: 12px; }
.logo-demo-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.logo-demo-tile { flex: 1 1 200px; display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 96px; border-radius: 10px; border: 1px solid var(--line); font-size: 26px; padding: 0 16px; }
.logo-demo-tile.light { background: #fff; --logo-ink: #1d2633; color: #1d2633; }
.logo-demo-tile.dark { background: #161616; color: #fff; border-color: #34332f; }
.logo-demo-tile.favicons { flex: 0 1 220px; }

/* ── Home: search box ─────────────────────────────────────────────────── */
.home-search { max-width: 640px; margin: 28px auto 0; text-align: left; }
.home-search-box { position: relative; }
.home-search-box > svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); fill: none; stroke: var(--text-muted); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.home-search-box input {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 18px; color: var(--text-primary); background: var(--surface-1);
    border: 1px solid var(--line); border-radius: 12px; padding: 17px 18px 17px 52px; box-shadow: 0 2px 10px rgba(20, 20, 18, 0.06);
}
.home-search-box input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.home-search-results {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; list-style: none; margin: 0; padding: 6px;
    background: var(--surface-1); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-height: 420px; overflow-y: auto;
}
.home-search-results[hidden] { display: none; }
.home-search-results a { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text-primary); font-size: 15px; }
.home-search-results li.active a, .home-search-results a:hover { background: var(--bg-2); }
.hs-kind { flex: none; width: 92px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-topic .hs-kind { color: var(--accent-ink); }
.hs-topic .hs-title { font-weight: 600; }
.hs-all { color: var(--accent-ink) !important; font-weight: 500; border-top: 1px solid var(--line-2); border-radius: 0 0 8px 8px !important; margin-top: 4px; }
.hs-none { color: var(--text-secondary) !important; }
.home-search .home-search-examples { margin: 12px 0 0; font-size: 13.5px; color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.home-search-examples button {
    font: inherit; font-size: 13px; cursor: pointer; padding: 3px 10px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface-1); color: var(--text-secondary);
}
.home-search-examples button:hover { border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 640px) { .hs-kind { width: 70px; } .home-search-box input { font-size: 16px; padding: 14px 14px 14px 46px; } }

/* Home: dark search band, then category tiles */
.home-band { background: var(--header-bg); color: #fff; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.home-band-in { max-width: 760px; margin: 0 auto; padding: 56px 24px 52px; text-align: center; }
.home-band h1 { font-size: 46px; font-weight: 400; margin: 0 0 10px; color: #fff; }
.home-band-in > p { margin: 0; font-size: 18px; color: rgba(255, 255, 255, 0.78); }
.home-band .home-search-box input { border-color: transparent; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); }
.home-band .home-search-examples { color: rgba(255, 255, 255, 0.65); justify-content: center; }
.home-band .home-search-examples button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.home-band .home-search-examples button:hover { border-color: #fff; color: #fff; }
.home-topics { max-width: var(--maxw); margin: 0 auto; padding: 40px 24px 0; }
.home-topics > h2 { font-size: 28px; margin: 0 0 18px; }
.home-index { columns: 4 220px; column-gap: 36px; }
.home-index-cat { break-inside: avoid; margin: 0 0 26px; }
.home-index-cat h3 { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 15px; font-weight: 600; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--text-primary); }
.home-index-cat .hp-icon { flex: none; }
.home-index-cat ul { list-style: none; margin: 0; padding: 0; }
.home-index-cat li { padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.home-index-cat a { color: var(--accent-ink); text-decoration: none; }
.home-index-cat a:hover { text-decoration: underline; }
.home-soon { margin: 36px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-muted); }
.home-soon span { font-weight: 600; color: var(--text-secondary); margin-right: 6px; }
@media (max-width: 640px) { .home-band h1 { font-size: 34px; } .home-band-in { padding: 36px 16px; } }

/* ── Map ─────────────────────────────────────────────────────────────────── */
/* Map colours are set per map in chart.js (MAP_SCHEMES); only the "no data" grey lives here. */
:root { --map-nodata: #e2dfd8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --map-nodata: #34332f; } }
:root[data-theme="dark"] { --map-nodata: #34332f; }
.map-area { stroke: var(--surface-1); stroke-width: 0.5; }
.map-area.map-nodata, .map-legend .map-nodata { fill: var(--map-nodata); }
.map-area.hover { stroke: var(--text-primary); stroke-width: 1.5; }
.map-area.clickable { cursor: pointer; }
.map-inset { fill: none; stroke: var(--line); stroke-width: 1; }
.tip-hint { margin-top: 6px; font-size: 11.5px; color: var(--accent-ink); }
.map-legend .axis-labels text { font-size: 11.5px; }
.axis-labels-text { fill: var(--text-muted); font-size: 11.5px; }
.map-ref { fill: var(--text-secondary); font-size: 12px; font-weight: 500; }
.map-loading { color: var(--text-muted); font-size: 14px; padding: 40px 0; text-align: center; }

.chart-picker[hidden] { display: none; }
.picker-reset {
    display: block; width: 100%; margin-top: 6px; padding: 8px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
    background: none; border: 0; border-top: 1px solid var(--line-2); color: var(--accent-ink); text-align: left;
}
.picker-reset:hover { text-decoration: underline; }
.picker-reset[hidden] { display: none; }

/* ── Homepage options preview (/homepage-options/) ──────────────────────── */
.hp-tabs { max-width: var(--maxw); margin: 0 auto; padding: 18px 24px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hp-tabs a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--text-secondary); text-decoration: none; background: var(--surface-1); }
.hp-tabs a:hover { border-color: var(--accent); color: var(--accent-ink); }
.hp-tabs a.on { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg); }
.hp-idea { margin: 0 0 28px; padding: 12px 16px; background: var(--bg-2); border-radius: 10px; font-size: 14.5px; color: var(--text-secondary); max-width: 860px; }
.hp-option[hidden] { display: none; }
.hp-meta { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hp-cat-label { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.hp-cat-mini { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.hp-soon { margin: 32px 0 0; font-size: 14px; color: var(--text-muted); }
.hp-soon span { font-weight: 600; color: var(--text-secondary); margin-right: 6px; }
.hp-icon { flex: none; }

/* 1. Topic cards with a key fact */
.hp1-wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 30px 12px; }
.hp1-cat { grid-column: span var(--n); min-width: 0; }
.hp1-grid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .hp1-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hp1-cat { grid-column: span min(var(--n), 2); } .hp1-grid { grid-template-columns: repeat(min(var(--n), 2), minmax(0, 1fr)); } }
@media (max-width: 640px) { .hp1-wrap, .hp1-grid { grid-template-columns: minmax(0, 1fr); } .hp1-cat { grid-column: auto; } }
.hp1-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text-primary); background: var(--surface-1); transition: border-color .15s, box-shadow .15s; }
.hp1-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.hp1-name { font-weight: 600; font-size: 16.5px; color: var(--accent-ink); }
.hp1-fact { font-size: 14px; line-height: 1.45; color: var(--text-secondary); flex: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* 2. Chart previews */
.hp2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.hp2-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 14px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text-primary); background: var(--surface-1); transition: border-color .15s, box-shadow .15s; }
.hp2-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.hp2-chart { height: 92px; margin: 0 0 8px; background: var(--bg-2); border-radius: 8px; padding: 10px 8px; display: flex; align-items: center; justify-content: center; }
.hp2-chart .hp-spark { width: 100%; height: 100%; }
.hp2-nochart { color: var(--text-muted); }
.hp2-name { font-weight: 600; font-size: 15.5px; }

/* 3. Compact index */
.hp3-cols { columns: 4 220px; column-gap: 36px; }
.hp3-cat { break-inside: avoid; margin: 0 0 26px; }
.hp3-cat h3 { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 15px; font-weight: 600; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--text-primary); }
.hp3-cat ul { list-style: none; margin: 0; padding: 0; }
.hp3-cat li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.hp3-cat a { color: var(--accent-ink); text-decoration: none; }
.hp3-cat a:hover { text-decoration: underline; }

/* 4. Latest pages, then everything */
.hp4-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 0 0 40px; }
.hp4-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; border-radius: 14px; background: var(--bg-2); text-decoration: none; color: var(--text-primary); border: 1px solid transparent; transition: border-color .15s; }
.hp4-card:hover { border-color: var(--accent); }
.hp4-card .hp-cat-mini { color: var(--series-2); }
.hp4-name { font-family: var(--serif); font-size: 24px; }
.hp4-chart .hp-spark { width: 100%; height: 70px; }
.hp4-fact { font-size: 14.5px; line-height: 1.45; color: var(--text-secondary); }
.hp4-all { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 6px; }
.hp4-list > div { display: grid; grid-template-columns: 230px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.hp4-list h4 { margin: 0; font-family: var(--sans); font-size: 15px; font-weight: 600; }
.hp4-list p { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.hp4-list a { color: var(--accent-ink); text-decoration: none; font-size: 15px; }
.hp4-list a:hover { text-decoration: underline; }
@media (max-width: 640px) { .hp4-list > div { grid-template-columns: 1fr; gap: 6px; } }

/* 5. Category tiles with icons */
.hp5-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-items: start; }
.hp5-tile { padding: 18px 20px 20px; border: 1px solid var(--line); border-top: 4px solid var(--hp-accent); border-radius: 12px; background: var(--surface-1); }
.hp5-tile h3 { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 17px; font-weight: 600; margin: 0 0 14px; }
.hp5-badge { display: inline-flex; padding: 7px; border-radius: 9px; color: var(--hp-accent); background: color-mix(in srgb, var(--hp-accent) 13%, transparent); }
.hp5-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hp5-chips a { padding: 6px 12px; border-radius: 999px; background: var(--bg-2); color: var(--text-primary); text-decoration: none; font-size: 14px; border: 1px solid transparent; }
.hp5-chips a:hover { border-color: var(--hp-accent); color: var(--accent-ink); }

/* ── Chart library options preview (/charts-options/) ───────────────────── */
.cl-page { max-width: var(--maxw); }
.cl-page .library-search, .cl-page .topic-intro { max-width: 720px; }
.cl-tabs { padding: 18px 0 0; max-width: none; }
.cl-option { margin-top: 18px; }
.cl-option [hidden], .cl-group[hidden] { display: none !important; }
.cl-group h2 { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 30px 0 12px; letter-spacing: 0; text-transform: none; }
.cl-count { font-size: 12.5px; font-weight: 400; color: var(--text-muted); }
.cl-thumb-box { background: var(--bg-2); border-radius: 8px; height: 84px; padding: 8px; display: flex; align-items: center; justify-content: center; }
.cl-thumb { width: 100%; height: 100%; display: block; }
.cl-thumb-icon { color: var(--text-muted); opacity: 0.7; }
.cl-type { flex: none; color: var(--text-muted); }

/* 1 and 3. Thumbnail grid */
.cl1-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cl1-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 12px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--text-primary); background: var(--surface-1); transition: border-color .15s, box-shadow .15s; }
.cl1-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.cl1-title { font-size: 13.5px; font-weight: 500; line-height: 1.35; }

/* 2. Compact list with chart-type icons */
.cl2-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.cl2-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--accent-ink); font-size: 14.5px; }
.cl2-row:hover span { text-decoration: underline; }
@media (max-width: 700px) { .cl2-list { grid-template-columns: minmax(0, 1fr); } }

/* 3. Topic filter buttons */
.cl3-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.cl3-chips button { font: inherit; font-size: 13.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-1); color: var(--text-secondary); cursor: pointer; }
.cl3-chips button:hover { border-color: var(--accent); color: var(--accent-ink); }
.cl3-chips button.on { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg); }

/* 4. Collapsible topics */
.cl4-topic { border-bottom: 1px solid var(--line); }
.cl4-topic summary { display: flex; align-items: center; gap: 12px; padding: 14px 4px; cursor: pointer; list-style: none; }
.cl4-topic summary::-webkit-details-marker { display: none; }
.cl4-topic summary::after { content: "+"; margin-left: 8px; font-size: 20px; color: var(--text-muted); width: 16px; text-align: center; }
.cl4-topic[open] summary::after { content: "–"; }
.cl4-name { font-weight: 600; font-size: 16px; min-width: 0; }
.cl4-strip { margin-left: auto; display: flex; gap: 6px; }
.cl4-mini { display: block; width: 74px; height: 36px; padding: 4px; background: var(--bg-2); border-radius: 6px; }
.cl4-topic .cl2-list { padding: 0 4px 16px 36px; }
@media (max-width: 700px) { .cl4-strip { display: none; } .cl4-topic .cl2-list { padding-left: 4px; } }

/* 5. Gallery */
.cl5-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.cl5-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text-primary); }
.cl5-box { height: 150px; border: 1px solid transparent; transition: border-color .15s; }
.cl5-card:hover .cl5-box { border-color: var(--accent); }
.cl5-title { font-size: 15px; font-weight: 600; line-height: 1.3; margin-top: 4px; }
.cl5-sub { font-size: 13px; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* About page */
.about-page { padding-bottom: 64px; }
.about-page h2 { font-size: 24px; font-weight: 500; margin: 40px 0 12px; scroll-margin-top: 72px; }
.about-page > p:not(.topic-label) { max-width: var(--textw); font-size: 16px; line-height: 1.6; margin: 0 0 14px; }
.about-page > p:empty { display: none; }