/* Coaster Crew membership management — application styles.
   No external dependencies: everything here ships with the app. */

:root {
    color-scheme: light dark;

    --bg:            #f4f6fa;
    --surface:       #ffffff;
    --surface-2:     #f8fafc;
    --border:        #dde3ec;
    --border-strong: #c3ccda;

    --text:          #16202e;
    --text-soft:     #5a6678;
    --text-muted:    #818d9e;

    --accent:        #1f5fd0;
    --accent-hover:  #1a4fae;
    --accent-soft:   #e8f0fe;

    --ok:            #10714a;
    --ok-soft:       #e3f5ec;
    --warn:          #8a5a00;
    --warn-soft:     #fdf2dc;
    --danger:        #b32230;
    --danger-soft:   #fdeaec;
    --platinum:      #4b5468;
    --platinum-soft: #eceef3;

    --radius:    10px;
    --radius-sm: 6px;
    --shadow:    0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --shadow-lg: 0 4px 12px rgba(16, 24, 40, .10);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:            #11151c;
        --surface:       #181d26;
        --surface-2:     #1f2630;
        --border:        #2b3340;
        --border-strong: #3a4455;

        --text:          #e8edf5;
        --text-soft:     #a9b4c4;
        --text-muted:    #7e8a9b;

        --accent:        #6ea2ff;
        --accent-hover:  #8bb5ff;
        --accent-soft:   #1c2a44;

        --ok:            #5fd3a0;
        --ok-soft:       #113328;
        --warn:          #f0c268;
        --warn-soft:     #352a13;
        --danger:        #ff8a93;
        --danger-soft:   #3a1a1f;
        --platinum:      #b9c2d4;
        --platinum-soft: #272d39;

        --shadow:    0 1px 2px rgba(0, 0, 0, .4);
        --shadow-lg: 0 4px 14px rgba(0, 0, 0, .5);
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.05rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    padding: .6rem 1rem; background: var(--accent); color: #fff; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---------- Top bar ---------- */

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 20;
}

.topbar-inner {
    max-width: 1280px; margin: 0 auto;
    padding: .65rem 1.25rem;
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: .6rem; color: var(--text); font-weight: 650; }
.brand:hover { text-decoration: none; }
.brand-mark { font-size: 1.4rem; line-height: 1; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text small { font-size: .72rem; font-weight: 500; color: var(--text-muted); }

.nav { display: flex; gap: .15rem; margin-right: auto; flex-wrap: wrap; }
.nav a {
    padding: .4rem .7rem; border-radius: var(--radius-sm);
    color: var(--text-soft); font-size: .9rem; font-weight: 500;
}
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.account { display: flex; align-items: center; gap: .5rem; }
.account-name { display: flex; flex-direction: column; line-height: 1.15; font-size: .85rem; font-weight: 600; text-align: right; }
.account-name small { font-size: .7rem; font-weight: 500; color: var(--text-muted); }

.nav-toggle { display: none; }

/* ---------- Layout ---------- */

.shell { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.page-sub { margin: .25rem 0 0; color: var(--text-soft); font-size: .9rem; }
.page-sub.badges { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.crumbs { font-size: .82rem; color: var(--text-muted); margin-bottom: .2rem; }
.crumbs span { margin: 0 .3rem; }

.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1rem; }

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}
.panel.narrow { max-width: 34rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.panel-link { font-size: .85rem; }
.count { color: var(--text-muted); font-weight: 500; }

.footer { text-align: center; padding: 1.5rem 1rem 2.5rem; color: var(--text-muted); font-size: .8rem; }
.footer p { margin: 0; }

/* ---------- Flashes and callouts ---------- */

.flash {
    padding: .7rem .95rem; border-radius: var(--radius-sm);
    margin-bottom: .85rem; font-size: .9rem; border: 1px solid transparent;
}
.flash-success { background: var(--ok-soft);     color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.flash-error   { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.flash-info    { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.flash-warning { background: var(--warn-soft);   color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 25%, transparent); }

.callout {
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    padding: .8rem 1rem; border-radius: var(--radius-sm);
    margin-bottom: 1rem; font-size: .9rem;
}
.callout-warn { background: var(--warn-soft); border-left-color: var(--warn); }

/* ---------- Stats ---------- */

.stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem; margin-bottom: 1rem;
}
.stat {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .9rem 1rem;
    display: flex; flex-direction: column; gap: .2rem;
    color: var(--text); box-shadow: var(--shadow);
    transition: border-color .12s, transform .12s;
}
.stat:hover { text-decoration: none; border-color: var(--border-strong); transform: translateY(-1px); }
.stat-label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.stat-value { font-size: 1.65rem; font-weight: 680; letter-spacing: -.02em; }
.stat-value.is-warn { color: var(--warn); }
.stat-value.is-bad  { color: var(--danger); }

/* ---------- Definition lists ---------- */

.facts { margin: 0; display: flex; flex-direction: column; }
.facts > div {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .45rem 0; border-bottom: 1px solid var(--border);
}
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--text-soft); font-size: .88rem; }
.facts dd { margin: 0; font-weight: 550; text-align: right; }

/* ---------- Bars ---------- */

.bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.bars a { display: grid; grid-template-columns: 2.2rem 1fr 3rem; align-items: center; gap: .6rem; color: var(--text); }
.bars a:hover { text-decoration: none; }
.bars a:hover .bar-fill { background: var(--accent-hover); }
.bar-label { font-family: var(--mono); font-size: .82rem; color: var(--text-soft); }
.bar-track { background: var(--surface-2); border-radius: 999px; height: .5rem; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.bar-value { font-size: .85rem; text-align: right; color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* ---------- Lists ---------- */

.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: .5rem 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: .1rem; }
.list > li:last-child { border-bottom: 0; }
.list.compact > li { padding: .25rem 0; font-size: .87rem; }
.meta { font-size: .8rem; color: var(--text-muted); }
.detail { font-size: .82rem; color: var(--text-soft); }
.muted { color: var(--text-muted); }

.chips { list-style: none; margin: .25rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.chips code {
    background: var(--surface-2); border: 1px solid var(--border);
    padding: .15rem .4rem; border-radius: var(--radius-sm); font-size: .78rem;
}

/* ---------- Tables ---------- */

.table-panel { padding: 0; overflow: hidden; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.data-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.data-table th, .data-table td { padding: .6rem .85rem; text-align: left; white-space: nowrap; }
.data-table thead th {
    background: var(--surface-2); border-bottom: 1px solid var(--border);
    font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); font-weight: 650; position: sticky; top: 0;
}
.data-table thead th a { color: inherit; display: inline-flex; align-items: center; gap: .25rem; }
.data-table tbody tr { border-bottom: 1px solid var(--border); }
.data-table tbody tr:last-child { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table tr.is-inactive { opacity: .55; }

.sort-arrow { font-size: .6rem; color: var(--accent); }
.cell-name { font-weight: 550; white-space: normal; min-width: 12rem; }
.cell-mono { font-family: var(--mono); font-size: .82rem; }
.cell-email { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; }
.cell-badges { display: flex; gap: .25rem; flex-wrap: wrap; white-space: normal; }
.cell-actions { text-align: right; display: flex; gap: .4rem; justify-content: flex-end; align-items: center; }
.cell-expiry small { color: var(--text-muted); font-size: .75rem; margin-left: .3rem; }
.expiry-expired  { color: var(--danger); font-weight: 550; }
.expiry-expiring { color: var(--warn);   font-weight: 550; }

.raw-value { background: var(--warn-soft); color: var(--warn); padding: .15rem .4rem; border-radius: var(--radius-sm); font-size: .82rem; }

/* ---------- Badges ---------- */

.badge {
    display: inline-block; padding: .12rem .45rem; border-radius: 999px;
    font-size: .72rem; font-weight: 650; letter-spacing: .01em; white-space: nowrap;
}
.badge-ok       { background: var(--ok-soft);       color: var(--ok); }
.badge-danger   { background: var(--danger-soft);   color: var(--danger); }
.badge-warn     { background: var(--warn-soft);     color: var(--warn); }
.badge-accent   { background: var(--accent-soft);   color: var(--accent); }
.badge-platinum { background: var(--platinum-soft); color: var(--platinum); }
.badge-muted    { background: var(--surface-2);     color: var(--text-muted); }

.tag {
    display: inline-block; padding: .1rem .4rem; border-radius: var(--radius-sm);
    background: var(--surface-2); color: var(--text-soft);
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}
.tag-create { background: var(--ok-soft);     color: var(--ok); }
.tag-delete { background: var(--danger-soft); color: var(--danger); }
.tag-import { background: var(--accent-soft); color: var(--accent); }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .48rem .9rem; border-radius: var(--radius-sm);
    border: 1px solid transparent; background: var(--surface-2); color: var(--text);
    font: inherit; font-size: .88rem; font-weight: 550; cursor: pointer;
    transition: background .12s, border-color .12s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-quiet { background: var(--surface); border-color: var(--border-strong); color: var(--text-soft); }
.btn-quiet:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(.93); }
.btn-sm { padding: .3rem .6rem; font-size: .82rem; }
.btn-block { width: 100%; }

.btn-link-danger {
    background: none; border: 0; padding: .3rem .4rem; cursor: pointer;
    color: var(--danger); font: inherit; font-size: .82rem; font-weight: 550;
}
.btn-link-danger:hover { text-decoration: underline; }

.inline { display: inline; }

/* ---------- Forms ---------- */

.stack { display: flex; flex-direction: column; gap: .9rem; }
.form-panel fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.form-panel legend {
    padding: 0; margin-bottom: .75rem; font-weight: 650; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
    border-bottom: 1px solid var(--border); width: 100%; padding-bottom: .4rem;
}

.field { margin-bottom: .9rem; display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: .85rem; font-weight: 550; color: var(--text-soft); }
.field.compact { margin-bottom: 0; }
.field.check { flex-direction: row; align-items: center; gap: .5rem; }
.field.check label { font-weight: 500; color: var(--text); }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="date"], input[type="file"], select, textarea {
    width: 100%; padding: .5rem .65rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text);
    font: inherit; font-size: .9rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 0; }
textarea { resize: vertical; min-height: 4rem; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); margin: 0; }

.has-error input, .has-error select, .has-error textarea { border-color: var(--danger); }
.field-errors { list-style: none; margin: 0; padding: 0; color: var(--danger); font-size: .82rem; }
.hint { margin: 0; font-size: .8rem; color: var(--text-muted); }
.hint-warn { color: var(--warn); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 1rem; }
.checks { display: flex; gap: 1.5rem; flex-wrap: wrap; }

.radio-group { display: flex; flex-direction: column; gap: .4rem; }
.radio-option { display: flex; align-items: center; gap: .5rem; font-weight: 500 !important; color: var(--text) !important; }

.form-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }

/* ---------- Filters ---------- */

.filters { padding: 1rem 1.25rem; }
.filter-search { margin-bottom: .75rem; }
.filter-search input { font-size: .95rem; padding: .6rem .8rem; }
.filter-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.filter-row .field { min-width: 8rem; flex: 0 1 auto; }
.filter-actions { display: flex; gap: .5rem; margin-left: auto; }

/* ---------- Tabs ---------- */

.tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.tab {
    padding: .5rem .85rem; color: var(--text-soft); font-size: .88rem; font-weight: 550;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Pagination ---------- */

.pagination { display: flex; gap: .25rem; align-items: center; justify-content: center; flex-wrap: wrap; margin: 1.25rem 0; }
.page-btn {
    min-width: 2.1rem; padding: .35rem .6rem; text-align: center;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text-soft); font-size: .85rem; font-weight: 550;
}
.page-btn:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.page-btn.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-btn.is-disabled { opacity: .45; pointer-events: none; }
.page-gap { color: var(--text-muted); padding: 0 .15rem; }

/* ---------- Notes and timeline ---------- */

.note-form { margin-bottom: 1rem; }
.notes { list-style: none; margin: 0; padding: 0; }
.notes > li { padding: .7rem 0; border-bottom: 1px solid var(--border); }
.notes > li:last-child { border-bottom: 0; }
.note-body { font-size: .9rem; }
.note-meta { margin-top: .25rem; font-size: .78rem; color: var(--text-muted); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.timeline > li:last-child { border-bottom: 0; }
.timeline-head { display: flex; align-items: center; gap: .5rem; font-size: .78rem; }
.timeline-actor { font-size: .85rem; font-weight: 550; margin-top: .15rem; }
.timeline-detail { font-size: .82rem; color: var(--text-soft); margin-top: .15rem; word-break: break-word; }

/* ---------- Empty state ---------- */

.empty-state { text-align: center; padding: 2.5rem 1.5rem; }
.empty-state h1, .empty-state h2 { margin-bottom: .4rem; }
.empty-state p { color: var(--text-soft); margin: 0 0 1rem; }

/* ---------- Sign-in ---------- */

.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem; }
.auth-card {
    width: 100%; max-width: 23rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 2rem;
}
.auth-brand { text-align: center; margin-bottom: 1.5rem; }
.auth-mark { font-size: 2.25rem; display: block; }
.auth-brand h1 { font-size: 1.3rem; margin-top: .4rem; }
.auth-brand p { margin: .15rem 0 0; color: var(--text-muted); font-size: .85rem; }
.auth-note { margin: 1.25rem 0 0; text-align: center; font-size: .78rem; color: var(--text-muted); }

/* ---------- Small screens ---------- */

@media (max-width: 860px) {
    .nav-toggle {
        display: flex; align-items: center; justify-content: center;
        width: 2.3rem; height: 2.3rem; margin-left: auto;
        background: var(--surface-2); border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm); cursor: pointer;
    }
    .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
        display: block; width: 1rem; height: 2px; background: var(--text); border-radius: 2px;
    }
    .nav-toggle-bars { position: relative; }
    .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
    .nav-toggle-bars::before { top: -5px; }
    .nav-toggle-bars::after  { top: 5px; }

    .nav { display: none; width: 100%; flex-direction: column; order: 3; margin: .5rem 0 0; }
    .nav.is-open { display: flex; }
    .nav a { padding: .6rem .75rem; }

    .account { order: 4; width: 100%; justify-content: space-between; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border); }
    .account-name { text-align: left; }

    .shell { padding: 1rem .9rem 2.5rem; }
    .filter-row .field { flex: 1 1 8rem; min-width: 0; }
    .filter-actions { margin-left: 0; width: 100%; }
    .filter-actions .btn { flex: 1; }
    .page-head { flex-direction: column; align-items: stretch; }
    .page-actions .btn { flex: 1; }
    .data-table th, .data-table td { padding: .5rem .6rem; }
}

@media print {
    .topbar, .footer, .page-actions, .filters, .pagination, .tabs, .note-form { display: none !important; }
    body { background: #fff; }
    .panel { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===================================================================
   Charts
   Inline SVG rendered on the server. One hue carries every series: each
   chart plots a single measure, so bar length already encodes magnitude
   and a colour ramp would only restate it.
   The dark steps are chosen for the dark surface, not flipped from light.
   =================================================================== */

:root {
    --viz-series:      #2a78d6;  /* validated against #ffffff: L band, chroma, 3:1 contrast */
    --viz-series-soft: #2a78d61a;
    --viz-muted:       #94a3b8;
    --viz-grid:        #e7ecf3;
    --viz-surface:     #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --viz-series:      #3987e5;  /* validated against #181d26 */
        --viz-series-soft: #3987e524;
        --viz-muted:       #64748b;
        --viz-grid:        #252d3a;
        --viz-surface:     #181d26;
    }
}

.chart { margin: 0; }
.chart figcaption { margin-bottom: .75rem; }
.chart figcaption h3 { font-size: 1rem; font-weight: 650; margin: 0; }
.chart-sub { margin: .15rem 0 0; font-size: .85rem; color: var(--text-soft); }
.chart-note { margin: .6rem 0 0; font-size: .78rem; color: var(--text-muted); line-height: 1.5; }
.chart-plot { width: 100%; overflow: hidden; }

.viz { width: 100%; height: auto; display: block; overflow: visible; }

/* Gridlines and axes: solid hairlines, one step off the surface, recessive. */
.viz-grid line { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }

/* Axis text wears text tokens, never the series colour. */
.viz-tick { fill: var(--text-muted); font-size: 11px; font-family: var(--font); }
.viz-tick-y   { text-anchor: end; }
.viz-tick-x   { text-anchor: middle; }
.viz-tick-row { text-anchor: end; fill: var(--text-soft); font-size: 12px; }
.viz-label    { fill: var(--text-soft); font-size: 12px; font-weight: 600; font-family: var(--font); }
.viz-label-end { text-anchor: end; fill: var(--text); font-size: 13px; }

.viz-bar  { fill: var(--viz-series); transition: opacity .12s; }
.viz-line { fill: none; stroke: var(--viz-series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-area { fill: var(--viz-series-soft); stroke: none; }
/* 2px ring in the surface colour keeps the end dot legible over the line. */
.viz-dot  { fill: var(--viz-series); stroke: var(--viz-surface); stroke-width: 2; }

/* The incomplete period: muted and hatched, so it is never read as a decline. */
.viz-bar.is-partial { fill: url(#viz-hatch); }
.viz-hatch-bg   { fill: var(--viz-surface); }
.viz-hatch-line { stroke: var(--viz-muted); stroke-width: 3; }

/* Hit areas span the whole band so hovering a short bar is still easy. */
.viz-hit { fill: transparent; cursor: default; }
.viz-hit:hover ~ .viz-bar { opacity: .85; }

.chart-data { margin-top: .9rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.chart-data summary {
    cursor: pointer; font-size: .82rem; color: var(--text-soft);
    font-weight: 550; list-style-position: outside; padding: .15rem 0;
}
.chart-data summary:hover { color: var(--text); }
.chart-data[open] summary { margin-bottom: .5rem; }
.data-table.compact th, .data-table.compact td { padding: .35rem .6rem; font-size: .82rem; }

.stat.is-static { cursor: default; }
.stat.is-static:hover { transform: none; border-color: var(--border); }
.stat-value small { font-size: .9rem; font-weight: 550; color: var(--text-muted); margin-left: .2rem; }

/* Tooltip, added by app.js. Without JavaScript the SVG <title> still shows. */
.viz-tip {
    position: fixed; z-index: 50; pointer-events: none;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg); padding: .35rem .6rem;
    font-size: .8rem; font-weight: 550; max-width: 20rem;
    opacity: 0; transition: opacity .1s;
}
.viz-tip.is-visible { opacity: 1; }

@media print {
    .chart-data { display: block; }
    .chart-data summary { display: none; }
    .chart-data > div { display: block !important; }
}

/* ---------- Map ----------
   The basemap is geography, not data: it stays recessive so the dots, which
   are the data, carry all the weight. */
.viz-map { max-height: 70vh; }

.map-states path {
    fill: var(--surface-2);
    stroke: var(--viz-grid);
    stroke-width: 0.75;
    stroke-linejoin: round;
}

/* Dots are translucent so overlapping parks stay readable, with a surface
   ring rather than a border to separate them. */
.map-dot {
    fill: var(--viz-series);
    fill-opacity: .55;
    stroke: var(--viz-surface);
    stroke-width: 1.5;
}
.map-dot.is-legend { fill-opacity: .3; }

.map-label {
    fill: var(--text);
    font-size: 11px;
    font-weight: 650;
    font-family: var(--font);
    text-anchor: middle;
    paint-order: stroke;
    /* A surface-coloured halo keeps the label legible over a dot or a border. */
    stroke: var(--viz-surface);
    stroke-width: 3;
    stroke-linejoin: round;
}

.map-hits circle { cursor: default; }
.map-hits circle:hover { fill: var(--viz-series); fill-opacity: .12; }