/* ==========================================================================
   VIZ-PYRAMID  —  shared population pyramid component
   Used by any page that embeds a pyramid inside an .expand-panel dropdown.
   All rules are scoped to .viz-root so the component cannot leak.
   ========================================================================== */

.viz-root {
    color-scheme: light;
    --surface-1: #FFFFFF;
    --text-primary: #23282E;
    --text-secondary: #3D434B;
    --text-muted: #6B7280;
    --hair: #E6DFD3;
    --grid: #ECE7DE;
    --male: #2a78d6;
    --female: #A31F34;
    /* Six generations. The five named colour cohorts alternate warm/cool so no two
       adjacent bands share a temperature; the Silent Generation is a mid gray, one
       clear step darker than the neutral used for older cohorts.
       Validated light-mode: worst adjacent CVD dE 12.5, normal dE 19.5;
       Silent against the neutral, dE 21.6 / 22.3. */
    --gen-silent: #6B7280;
    --gen-boomer: #008300;
    --gen-x:      #eda100;
    --gen-mil:    #4a3aa7;
    --gen-z:      #eb6834;
    --gen-alpha:  #2a78d6;
    --gen-none: #B9B4AA;
    /* Broad age groups, used in country mode instead of the Pew generations,
       which are U.S. definitions and carry no meaning outside the U.S. Three
       steps of one hue family would read as a sequence rather than categories,
       so these are three distinct hues at matched lightness. Light-mode contrast
       against the surface: young 4.8:1, work 5.6:1, old 4.6:1; worst adjacent
       pair dE 24.1 normal vision, 15.8 under deuteranopia. */
    --ag-young: #2f7d8f;
    --ag-work:  #7a6a33;
    --ag-old:   #A31F34;
    --ghost: #8A8A8A;
    background: var(--surface-1);
}

/* ---- control bar ---- */
.viz-controls {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--hair);
    margin-bottom: 0.9rem;
}
.viz-root .play-btn {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--cardinal-red);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.viz-root .play-btn:hover { background: var(--accent-red); }
.viz-root .play-btn svg { width: 16px; height: 16px; fill: #fff; }
.year-display {
    flex: 0 0 auto;
    font-family: var(--sans);
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.5px;
    min-width: 4.6ch;
    font-variant-numeric: tabular-nums;
}
.year-tag {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-top: 0.25rem;
    color: var(--text-muted);
}
/* Past the estimate/projection boundary the tag changes word and colour, so a
   reader cannot mistake a projected frame for an observed one. */
.year-tag.is-proj { color: var(--cardinal-red); }
.slider-wrap { flex: 1 1 320px; min-width: 220px; }
.slider-wrap input[type=range] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: var(--grid);
    outline: none;
    margin: 0.35rem 0 0.15rem;
}
.slider-wrap input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--cardinal-red);
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    cursor: pointer;
}
.slider-wrap input[type=range]::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--cardinal-red);
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    cursor: pointer;
}
.slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.slider-legend {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 0.15rem;
}

/* ---- display toggles ---- */
.viz-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.9rem;
}
.viz-toggles .tog-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 0.2rem;
}
.viz-root .tog {
    font-size: 0.78rem;
    border: 1px solid var(--hair);
    background: #fff;
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--sans);
}
.viz-root .tog:hover { border-color: var(--gen-none); }
.viz-root .tog[aria-pressed="true"] {
    background: var(--cardinal-red);
    border-color: var(--cardinal-red);
    color: #fff;
    font-weight: 600;
}
.viz-root .ghost-select {
    font-size: 0.78rem;
    padding: 0.24rem 0.4rem;
    border: 1px solid var(--hair);
    border-radius: 4px;
    background: #fff;
    color: var(--text-secondary);
    font-family: var(--sans);
}
.viz-root .ghost-select:disabled { opacity: 0.4; }

/* ---- map selector (state mode) ---- */
.viz-geo {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 820px) { .viz-geo { grid-template-columns: 1fr; } }
.viz-map-panel {
    border: 1px solid var(--hair);
    border-radius: 6px;
    padding: 0.75rem;
    background: #fff;
}
.viz-map-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.viz-map { width: 100%; height: auto; display: block; }
.viz-map .state {
    fill: #DCD6CB;
    stroke: #fff;
    stroke-width: 0.8;
    cursor: pointer;
    transition: fill 0.12s;
}
.viz-map .state:hover { fill: #B9868F; }
.viz-map .state.selected { fill: var(--cardinal-red); }
.viz-map .state:focus { outline: 2px solid var(--cardinal-red); outline-offset: 1px; }
.viz-geo-name {
    margin-top: 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
}

/* ---- chart ---- */
.viz-root .pyramid-svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz-root .pyramid-svg text { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.viz-root .ax-label { font-size: 10px; fill: var(--text-muted); }
.viz-root .age-label { font-size: 9.5px; fill: var(--text-secondary); font-weight: 600; }
.viz-root .side-label { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; }
.viz-root .gridline { stroke: var(--grid); stroke-width: 1; }
.viz-root .baseline { stroke: var(--hair); stroke-width: 1; }
.viz-root .bar:hover { opacity: 0.75; cursor: pointer; }
.viz-root .ghost-path { fill: none; stroke: var(--ghost); stroke-width: 1.6; stroke-dasharray: 4 3; opacity: 0.85; }
.viz-root .gen-band-label { font-size: 9.5px; font-weight: 700; }

/* ---- legend ---- */
.viz-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    justify-content: center;
    margin-top: 0.7rem;
    font-size: 0.76rem;
    color: var(--text-secondary);
}
.viz-legend span { display: inline-flex; align-items: center; gap: 0.38rem; }
.viz-legend .swatch { width: 11px; height: 11px; border-radius: 2px; flex: 0 0 auto; }
.viz-legend .swatch.ghostline {
    height: 0; width: 16px; border-radius: 0;
    border-top: 2px dashed var(--ghost);
}

/* ---- stat readout ---- */
.viz-root .stat-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--hair);
    border: 1px solid var(--hair);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 1rem;
}
@media (max-width: 860px) { .viz-root .stat-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .viz-root .stat-row { grid-template-columns: repeat(2, 1fr); } }
.viz-root .stat-cell { background: #fff; padding: 0.6rem 0.5rem; text-align: center; }
.viz-root .stat-cell .sv {
    font-size: 1.25rem; font-weight: 700; color: var(--text-primary);
    line-height: 1.15; font-variant-numeric: tabular-nums;
}
.viz-root .stat-cell .sl {
    font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted); margin-top: 0.15rem; line-height: 1.25;
}

/* ---- table view ---- */
.viz-root .table-toggle {
    margin-top: 0.85rem;
    font-size: 0.74rem;
    background: none;
    border: none;
    color: var(--cardinal-red);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font-family: var(--sans);
}
.viz-root .pyr-table-wrap { display: none; margin-top: 0.7rem; overflow-x: auto; }
.viz-root .pyr-table-wrap.open { display: block; }
.viz-root table.pyr-table { border-collapse: collapse; font-size: 0.74rem; width: 100%; }
.viz-root table.pyr-table th,
.viz-root table.pyr-table td {
    border: 1px solid var(--hair); padding: 0.28rem 0.5rem; text-align: right;
    font-variant-numeric: tabular-nums;
}
.viz-root table.pyr-table th { background: var(--off-white); font-weight: 700; color: var(--text-secondary); }
.viz-root table.pyr-table td:first-child,
.viz-root table.pyr-table th:first-child { text-align: left; }
.viz-root table.pyr-table td.gen { text-align: left; color: var(--text-muted); }

/* ---- shared tooltip ---- */
#pyr-tip {
    position: fixed;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    background: #23282E;
    color: #fff;
    border-radius: 5px;
    padding: 0.5rem 0.65rem;
    font-size: 0.76rem;
    font-family: var(--sans);
    line-height: 1.45;
    z-index: 9999;
    box-shadow: 0 3px 12px rgba(0,0,0,0.28);
    max-width: 230px;
}
#pyr-tip .tip-sub { color: #C9C4BA; font-size: 0.7rem; }

/* ---- notes block (last child of every .expand-content) ---- */
.pyr-notes { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--hairline); }
.pyr-notes h4 { color: var(--cardinal-red); font-size: 0.95rem; margin: 0 0 0.6rem; }
.pyr-notes p { font-size: 0.82rem; line-height: 1.65; color: var(--medium-gray); margin-bottom: 0.7rem; }
.pyr-notes strong { color: var(--dark-gray); }

/* the panel supplies the frame, so the component sits flush inside it */
.expand-content .viz-root { margin: 0 0 0.5rem; border: none; padding: 0; }


/* ---- country picker (used instead of .viz-geo when cfg.picker is supplied) ---- */
.viz-picker {
    padding: 0 0 0.9rem;
    border-bottom: 1px solid var(--hair);
    margin-bottom: 0.9rem;
}
.viz-pick-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.viz-pick-groups { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.viz-root .pick-btn {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.4rem 0.7rem;
    border-radius: 5px;
    border: 1px solid var(--hair);
    background: #fff;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.viz-root .pick-btn:hover { border-color: var(--gen-none); }
.viz-root .pick-btn[aria-pressed="true"] {
    background: var(--cardinal-red);
    border-color: var(--cardinal-red);
    color: #fff;
}
.viz-root .pick-btn:focus-visible {
    outline: 2px solid var(--cardinal-red);
    outline-offset: 2px;
}
.viz-pick-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.viz-pick-row select {
    font-family: var(--sans);
    font-size: 0.82rem;
    padding: 0.28rem 0.45rem;
    border: 1px solid var(--hair);
    border-radius: 4px;
    background: #fff;
    color: var(--text-primary);
}
.viz-pick-name { font-weight: 700; color: var(--text-primary); }

@media (max-width: 640px) {
    .viz-pick-groups { flex-direction: column; }
    .viz-root .pick-btn { width: 100%; text-align: left; }
}