:root {
    /* New palette — Tableau-style hue cycle */
    --bg: #FFFFFF;
    --bg-card: #F4F4F6;
    --text: #000000;
    --text-muted: #424242;
    --text-subtle: #888;
    --border: #D2D2D7;
    --border-strong: #888;
    --accent: #0066D8;
    --grid: rgba(0,0,0,0.06);
    --grid-strong: rgba(0,0,0,0.18);
    /* Tooltip uses the card surface palette so it reads as "from this dashboard"
       in both light and dark mode, instead of an inverse-coded floating chip. */
    --tooltip-bg: #FFFFFF;
    --tooltip-text: #000000;
    --tooltip-border: rgba(0,0,0,0.18);
    --tooltip-shadow: rgba(0,0,0,0.18);
    /* Branch colors — 10 distinct hues from the palette */
    --branch-eli: #E1090C;  /* red */
    --branch-mrk: #D37A00;  /* orange */
    --branch-sar: #D0A600;  /* yellow */
    --branch-mle: #15B641;  /* green */
    --branch-mat: #008B5A;  /* dark teal-green (distinct from --branch-mle) */
    --branch-jul: #0066D8;  /* blue */
    --branch-tim: #7A25E6;  /* purple */
    --branch-dav: #30A5D6;  /* cyan */
    --branch-edw: #DC0053;  /* pink */
    --branch-amy: #6E3A12;  /* deep brown (distinct from --branch-jul blue) */
    /* Generation colors used in growth chart */
    --gen0: #FFFFFF;        /* white (Doctor's spec) — needs visible stroke */
    --gen1: #0066D8;        /* blue */
    --gen2: #15B641;        /* green */
    --gen3: #7A25E6;        /* purple */

    /* Primary fill for non-branch, non-generation charts (decades, ages, states).
       Pinned to one hue so unrelated charts stay visually consistent. */
    --chart-primary: #0066D8;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000000;
        --bg-card: #1A1A1A;
        --text: #FFFFFF;
        --text-muted: #D2D2D7;
        --text-subtle: #888;
        --border: #424242;
        --border-strong: #888;
        --accent: #0066D8;
        --grid: rgba(255,255,255,0.10);
        --grid-strong: rgba(255,255,255,0.25);
        --tooltip-bg: #1F1F1F;
        --tooltip-text: #FFFFFF;
        --tooltip-border: rgba(255,255,255,0.20);
        --tooltip-shadow: rgba(0,0,0,0.55);
        /* SAME saturated palette in dark mode — palette top row stays primary */
        --branch-eli: #E1090C;
        --branch-mrk: #D37A00;
        --branch-sar: #D0A600;
        --branch-mle: #15B641;
        --branch-mat: #008B5A;
        --branch-jul: #0066D8;
        --branch-tim: #7A25E6;
        --branch-dav: #30A5D6;
        --branch-edw: #DC0053;
        --branch-amy: #C97847;
        --gen0: #FFFFFF;       /* white in dark mode too — kept visible via stroke */
        --gen1: #0066D8;
        --gen2: #15B641;
        --gen3: #7A25E6;
        --chart-primary: #0066D8;
    }
}
* { box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.4;
}
.page-body { padding: 24px 32px 80px 32px; }
/* (.nav / .title / .subtitle removed — nav now lives in site-nav.css; the
    page-level title has been removed per Doctor's spec, Insights is just charts) */

/* Dashboard population-filter styles now live in family-filter.css (shared
   across all 4 pages). The .filter-bar container holds it. */

/* KPI grid */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}
.kpi {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 20px;
}
.kpi-value { font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; }
.kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-top: 6px; }
.kpi-sub { font-size: 12px; color: var(--text-subtle); margin-top: 8px; }

/* Cards layout */
.cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; align-items: stretch; }
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 22px 24px;
    overflow: hidden;
    position: relative;
    /* Cards are flex-col so the chart body fills available vertical space.
       Combined with grid `align-items: stretch`, all cards on the same row
       are the same height — and any chart with growable content (gen rows,
       SVG) takes the leftover space instead of leaving white-space gaps. */
    display: flex;
    flex-direction: column;
}
.card > h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px 0; }
.card > .card-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
/* Last child after the title/sub becomes the chart body — grow to fill. */
.card > svg { flex: 1 1 auto; min-height: 0; }
.card > .legend ~ svg { flex: 1 1 auto; min-height: 0; }
.card > .vbar-chart { flex: 1 1 auto; min-height: 0; }

.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }

@media (max-width: 760px) {
    .span-8, .span-6, .span-4 { grid-column: span 12; }
}

/* CONSISTENT TYPOGRAPHY ACROSS ALL CHARTS */
svg { display: block; max-width: 100%; height: auto; }
.axis-label { fill: var(--text-muted); font-size: 14px; font-family: inherit; }
.axis-title { fill: var(--text-muted); font-size: 16px; font-weight: 600; }
.grid-line { stroke: var(--grid); stroke-width: 1; }
.axis-line { stroke: var(--grid-strong); stroke-width: 1; }
.value-label { font-size: 11px; fill: var(--text-muted); text-anchor: middle; font-weight: 500; }

/* Step / area / line */
.line-data { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* Bars */
.bar { rx: 2; }
.bar-hover { stroke: var(--text); stroke-width: 1.5; }

/* TOOLTIP — consistent across all charts */
.tooltip {
    position: absolute;
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    border: 1px solid var(--tooltip-border);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    z-index: 100;
    max-width: 320px;
    box-shadow: 0 4px 12px var(--tooltip-shadow);
}
.tooltip.show { opacity: 1; }
.tooltip strong { font-weight: 600; }
.tooltip .tt-section { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-top: 8px; }
.tooltip .tt-section:first-of-type { margin-top: 6px; }
.tooltip .tt-list { font-size: 11px; margin-top: 2px; }
.tooltip .tt-list div { padding: 1px 0; }

/* LEGEND */
.legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 11px;
    color: var(--text-muted);
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-swatch { width: 12px; height: 12px; border-radius: 2px; }
.legend-swatch.swatch-bordered { border: 1px solid var(--text); }

/* End-of-line/layer direct labels (data-viz-design Rule 6).
   Used by the absolute and 100%-stacked area charts. */
.end-label-name  { fill: var(--text); font-size: 12px; font-weight: 600; }
.end-label-count { fill: var(--text); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.end-label-pct   { fill: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Branch / state / gen rows */
.hbar-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 10px;
    align-items: center;
    margin: 6px 0;
    font-size: 13px;
}
.hbar-row .label { color: var(--text); font-weight: 500; }
/* Track holds the bar + the count next to it. The bar's width is computed
   in JS as `calc((100% - 80px) * pct)` so the longest bar (pct=1.0) ends
   80px before the right edge of the track — exactly enough room for the
   count label, which sits flush at the bar's actual end. Shorter bars get
   their labels at the visual end of each bar, not in a fixed gutter. */
.hbar-track {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.hbar-bar { height: 16px; border-radius: 3px; flex-shrink: 0; }
.hbar-count {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Branch-color classes kept for any non-gradient use; Branch Sizes itself
   now uses an inline computed red-ramp fill instead. */
.hbar-bar.b-eli { background: var(--branch-eli); }
.hbar-bar.b-mrk { background: var(--branch-mrk); }
.hbar-bar.b-sar { background: var(--branch-sar); }
.hbar-bar.b-mle { background: var(--branch-mle); }
.hbar-bar.b-mat { background: var(--branch-mat); }
.hbar-bar.b-jul { background: var(--branch-jul); }
.hbar-bar.b-tim { background: var(--branch-tim); }
.hbar-bar.b-dav { background: var(--branch-dav); }
.hbar-bar.b-edw { background: var(--branch-edw); }
.hbar-bar.b-amy { background: var(--branch-amy); }

.state-row {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: center;
    margin: 6px 0;
    font-size: 13px;
}
.state-row .state-code { font-family: 'SF Mono', Monaco, monospace; font-weight: 700; color: var(--text-muted); font-size: 12px; }
.state-row .state-bar { height: 16px; background: var(--branch-sar); border-radius: 3px; flex-shrink: 0; }
.state-row .state-count {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    white-space: nowrap;
}
/* state-cities removed — city breakdown is now inside the tooltip
   instead of an inline sub-row beneath each state bar. */

/* Birthday list */
.birthday-list { font-size: 13px; }
.birthday-row {
    display: grid;
    grid-template-columns: 70px 1fr 90px;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}
.birthday-row:last-child { border-bottom: none; }
.birthday-row .when {
    color: var(--text-muted); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.4px;
    align-self: center; line-height: 1.3;
}
.birthday-row .name { font-weight: 500; align-self: center; }
.birthday-row .age { color: var(--text-muted); text-align: right; font-size: 12px; align-self: center; }

/* Generation rows */
.gen-row {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 10px;
    align-items: center;
    margin: 18px 0 0 0;
    font-size: 13px;
}
.gen-row:first-of-type { margin-top: 0; }
.gen-row .gen-label { font-weight: 600; color: var(--text); font-size: 13px; }
.gen-track {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.gen-row .gen-bar { height: 36px; border-radius: 3px; flex-shrink: 0; }
.gen-row .gen-bar.g0 { background: var(--gen0); border: 1px solid var(--text); }
.gen-row .gen-bar.g1 { background: var(--gen1); }
.gen-row .gen-bar.g2 { background: var(--gen2); }
.gen-row .gen-bar.g3 { background: var(--gen3); }
.gen-row .gen-count {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    white-space: nowrap;
}
.gen-desc { font-size: 11px; color: var(--text-subtle); margin-left: 72px; margin-bottom: 8px; }

/* Generic list rows */
.list-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.list-row:last-child { border-bottom: none; }
.list-row .lbl { color: var(--text); }
.list-row .val { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Vertical bar chart — HTML/CSS implementation. Used by Births per Decade,
   Age Distribution, Household Composition.

   Layout per column (flex-direction: column, justify-content: flex-end):
       [count + pct labels]   <-- auto height, sits directly above bar
       [bar fill]             <-- height: X% of plot area
       [x-axis label]         <-- auto height, sits at very bottom

   The plot itself is `align-items: flex-end` so all columns share a baseline.
   No absolute positioning, no transform tricks — the labels naturally glue
   to the top of each bar because they're the immediate previous sibling.
   Empty space is pushed to the top of each column.

   Typography matches the horizontal-bar charts: 13px count, 12px percent,
   12px x-label. CSS pixels render the same physical size everywhere. */

.vbar-chart {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* Match the rendered height of the area charts above. The 1000×500
       viewBox area charts settle around 420px tall in a span-6 card after
       padding/title. Reserving 420px keeps the row visually even. */
    min-height: 420px;
    margin-top: 4px;
}
/* Body row holds [rotated y-axis label][plot]. Splitting body from
   x-axis-title means the y-axis label only spans the plot's height,
   not the whole chart including the x-axis caption. */
.vbar-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}
.vbar-plot {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 320px;
    /* Top breathing room above the tallest bar's labels so they don't sit
       right against the card-sub line. */
    padding-top: 8px;
}
.vbar-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    min-width: 0;
    cursor: default;
}
.vbar-labels {
    text-align: center;
    line-height: 1.15;
    margin-bottom: 4px;
    flex: 0 0 auto;
}
.vbar-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.vbar-pct {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.vbar-fill {
    width: 80%;
    max-width: 96px;
    background: var(--chart-primary);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: opacity 0.12s ease;
    /* Bar height (set inline as `height: X%`) is a percentage of the column,
       which is height:100% of the plot — so % heights resolve correctly
       without any absolute positioning. */
}
.vbar-col:hover .vbar-fill { opacity: 0.85; }
.vbar-xlabel {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.vbar-axis-title {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    font-weight: 600;
}
.vbar-axis-x {
    margin-top: 10px;
}
/* Y-axis title sits on the LEFT of the plot, rotated to read bottom-to-top.
   Implementation: a fixed-width container holds an absolutely-positioned
   inner span that's rotated -90deg around its own center. Fixed width on
   the container is what lets it occupy real space in the flex row; the
   inner span ignores its parent's box because it's absolutely positioned. */
.vbar-axis-y {
    flex: 0 0 24px;
    position: relative;
    align-self: stretch;
    margin-right: 6px;
}
.vbar-axis-y::before {
    content: attr(data-title);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center;
    white-space: nowrap;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Horizontal-bar chart axis wrapper. Used by Generations, Descendants per
   Sibling, Geographic Distribution. Mirrors the vbar layout — flex column
   with [body row][x-axis label]. The body itself is just a stack of rows
   (no rotated y-axis since horizontal categorical labels are already on
   each row). */
.hbar-chart {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* Push the x-axis caption to the bottom of the card so the chart body
       expands into all available vertical space. Without this, the rows
       collapse to their natural height and leave dead space below. */
    justify-content: space-between;
}
.hbar-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}
.hbar-rows {
    flex: 1 1 auto;
    min-width: 0;
    /* Distribute the rows evenly through the available height so the bar
       group fills the card vertically. */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

/* Stacked segments inside a horizontal bar (Descendants per Sibling). The
   .hbar-stack wrapper sets the bar's TOTAL width (relative to the largest
   bar in the chart). Inside, .hbar-seg children divide that width by their
   share of this row's total — first segment gets rounded LEFT corners,
   last gets rounded RIGHT, so the assembled bar reads as a single shape. */
.hbar-stack {
    display: flex;
    height: 16px;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.hbar-seg {
    height: 100%;
}