/* ===========================================================================
   ParIndex - design tokens and layout.

   Colour values are the validated data-viz reference palette: the eight
   categorical hues are assigned in fixed slot order and never cycled, and both
   modes are stepped for their own surface rather than one being a flip of the
   other. In light mode the aqua series colour sits below 3:1 against the
   surface, so every chart ships a legend with direct labels and a table view -
   identity is never carried by colour alone.
   =========================================================================== */

:root {
    color-scheme: light;

    --page:            #f9f9f7;
    --surface:         #fcfcfb;
    --surface-raised:  #ffffff;
    --surface-sunken:  #f2f1ee;
    --ink:             #0b0b0b;
    --ink-2:           #52514e;
    --muted:           #898781;
    --grid:            #e1e0d9;
    --axis:            #c3c2b7;
    --border:          rgba(11, 11, 11, 0.10);
    --border-strong:   rgba(11, 11, 11, 0.18);
    --shadow:          0 1px 2px rgba(11, 11, 11, 0.04), 0 8px 24px rgba(11, 11, 11, 0.06);

    --series-1: #2a78d6;
    --series-2: #eb6834;
    --series-3: #1baf7a;
    --series-4: #eda100;
    --series-5: #e87ba4;
    --series-6: #008300;
    --series-7: #4a3aa7;
    --series-8: #e34948;

    --accent:       #2a78d6;
    --accent-ink:   #ffffff;
    --accent-wash:  rgba(42, 120, 214, 0.10);
    --accent-quiet: #cde2fb;

    /* Status colours are reserved: never reused as a series hue. */
    --good:     #006300;
    --good-bg:  rgba(12, 163, 12, 0.12);
    --warning:  #fab219;
    --critical: #d03b3b;
    --critical-bg: rgba(208, 59, 59, 0.10);

    --radius:    10px;
    --radius-sm: 6px;
    --topbar-h:  60px;
    --sidenav-w: 216px;

    --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
        color-scheme: dark;

        --page:           #0d0d0d;
        --surface:        #1a1a19;
        --surface-raised: #212120;
        --surface-sunken: #141413;
        --ink:            #ffffff;
        --ink-2:          #c3c2b7;
        --muted:          #898781;
        --grid:           #2c2c2a;
        --axis:           #383835;
        --border:         rgba(255, 255, 255, 0.10);
        --border-strong:  rgba(255, 255, 255, 0.18);
        --shadow:         0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);

        --series-1: #3987e5;
        --series-2: #d95926;
        --series-3: #199e70;
        --series-4: #c98500;
        --series-5: #d55181;
        --series-6: #008300;
        --series-7: #9085e9;
        --series-8: #e66767;

        --accent:       #3987e5;
        --accent-wash:  rgba(57, 135, 229, 0.16);
        --accent-quiet: #184f95;

        --good:     #0ca30c;
        --good-bg:  rgba(12, 163, 12, 0.16);
        --critical: #e66767;
        --critical-bg: rgba(208, 59, 59, 0.18);
    }
}

/* The theme toggle stamps data-theme on the root and must win in both
   directions, so the dark values are declared again under that scope. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --page:           #0d0d0d;
    --surface:        #1a1a19;
    --surface-raised: #212120;
    --surface-sunken: #141413;
    --ink:            #ffffff;
    --ink-2:          #c3c2b7;
    --muted:          #898781;
    --grid:           #2c2c2a;
    --axis:           #383835;
    --border:         rgba(255, 255, 255, 0.10);
    --border-strong:  rgba(255, 255, 255, 0.18);
    --shadow:         0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;

    --accent:       #3987e5;
    --accent-wash:  rgba(57, 135, 229, 0.16);
    --accent-quiet: #184f95;

    --good:     #0ca30c;
    --good-bg:  rgba(12, 163, 12, 0.16);
    --critical: #e66767;
    --critical-bg: rgba(208, 59, 59, 0.18);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 22px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p { margin: 0; }

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

button, input, select { font: inherit; color: inherit; }

svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.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: -999px; top: 8px; z-index: 100;
    background: var(--accent); color: var(--accent-ink);
    padding: 8px 14px; border-radius: var(--radius-sm);
}
.skip-link:focus { left: 8px; }

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

/* --------------------------------------------------------------- top bar --- */

.topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 14px;
    height: var(--topbar-h); padding: 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); flex: none; }
.brand:hover { text-decoration: none; }
.brand-mark {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--accent); color: var(--accent-ink);
    font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.brand-text { font-size: 15.5px; font-weight: 500; letter-spacing: -0.01em; }
.brand-text strong { font-weight: 700; }

.search { position: relative; flex: 1 1 auto; max-width: 520px; margin: 0 auto; }
.search-icon {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.search input {
    width: 100%; height: 36px; padding: 0 12px 0 34px;
    background: var(--surface-sunken);
    border: 1px solid transparent; border-radius: 8px;
}
.search input:focus { background: var(--surface); border-color: var(--border-strong); outline: none; }
.search input::placeholder { color: var(--muted); }

.search-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
    max-height: 420px; overflow-y: auto;
    background: var(--surface-raised);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 6px;
}
.search-group-label {
    padding: 8px 10px 4px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.search-item {
    display: flex; align-items: baseline; gap: 8px;
    padding: 7px 10px; border-radius: var(--radius-sm);
    cursor: pointer; color: var(--ink);
}
.search-item:hover, .search-item.is-active { background: var(--accent-wash); text-decoration: none; }
.search-item .si-label { font-weight: 500; }
.search-item .si-sub { font-size: 12px; color: var(--muted); margin-left: auto; text-align: right; }

.topbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.year-select select {
    height: 36px; padding: 0 8px;
    background: var(--surface-sunken); border: 1px solid transparent;
    border-radius: 8px; font-weight: 500; cursor: pointer;
}

.icon-btn {
    display: grid; place-items: center;
    width: 36px; height: 36px; flex: none;
    background: transparent; border: 1px solid transparent;
    border-radius: 8px; color: var(--ink-2); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }

.icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) .icon-sun { display: none; }
    :root:where(:not([data-theme="light"])) .icon-moon { display: block; }
}

.nav-toggle { display: none; }

.account { position: relative; }
.avatar {
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent-wash); color: var(--accent);
    border: 1px solid var(--border); cursor: pointer;
    font-size: 12px; font-weight: 600;
}
.account-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
    min-width: 236px; padding: 6px;
    background: var(--surface-raised); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.account-menu .am-head { padding: 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.account-menu .am-email { font-weight: 500; word-break: break-all; }
.account-menu button, .account-menu a {
    display: block; width: 100%; text-align: left;
    padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--ink); cursor: pointer;
}
.account-menu button:hover, .account-menu a:hover { background: var(--surface-sunken); text-decoration: none; }

/* ---------------------------------------------------------------- layout --- */

.shell { display: flex; align-items: flex-start; }

.sidenav {
    position: sticky; top: var(--topbar-h);
    width: var(--sidenav-w); flex: none;
    height: calc(100vh - var(--topbar-h));
    padding: 14px 10px; overflow-y: auto;
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
}
.sidenav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sidenav a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius-sm);
    color: var(--ink-2); font-weight: 500;
}
.sidenav a:hover { background: var(--surface-sunken); color: var(--ink); text-decoration: none; }
.sidenav a.is-active { background: var(--accent-wash); color: var(--accent); }
.sidenav a svg { width: 17px; height: 17px; flex: none; }

.sidenav-foot { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--border); }
.coverage { font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.coverage strong { color: var(--ink-2); font-weight: 600; }

.content { flex: 1 1 auto; min-width: 0; padding: 22px 24px 64px; }

.page-head {
    display: flex; align-items: flex-start; gap: 16px;
    flex-wrap: wrap; margin-bottom: 18px;
}
.page-head .ph-main { min-width: 0; }
.page-head .ph-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.eyebrow {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--muted); margin-bottom: 4px;
}
.subtitle { color: var(--ink-2); margin-top: 5px; }

/* ----------------------------------------------------------------- cards --- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}
.card + .card { margin-top: 16px; }
.card-head {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 14px; flex-wrap: wrap;
}
.card-head .ch-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.card-note { font-size: 12px; color: var(--muted); margin-top: 3px; }

.grid { display: grid; gap: 16px; }
.grid-kpi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Stat tile: label, value, delta vs a named period, optional sparkline. */
.stat {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px;
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.stat-label { font-size: 12px; color: var(--ink-2); }
.stat-value { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.stat-value.is-hero { font-size: 48px; line-height: 1.1; }
.stat-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.stat-sub { font-size: 12px; color: var(--muted); }
.stat-spark { margin-top: 8px; height: 34px; }

.delta {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px 1px 4px; border-radius: 99px;
    font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.delta svg { width: 12px; height: 12px; stroke-width: 2.4; }
.delta.is-up { color: var(--good); background: var(--good-bg); }
.delta.is-down { color: var(--critical); background: var(--critical-bg); }
.delta.is-flat { color: var(--muted); background: var(--surface-sunken); }

/* ---------------------------------------------------------------- tables --- */

.table-wrap { overflow-x: auto; margin: 0 -16px -16px; padding: 0 16px 16px; }

table.data {
    width: 100%; border-collapse: collapse;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.data th, table.data td { padding: 9px 10px; text-align: left; }
table.data thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface);
    font-size: 11.5px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.data tbody tr { border-bottom: 1px solid var(--grid); }
table.data tbody tr:last-child { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-sunken); }
table.data td.num, table.data th.num { text-align: right; }
table.data .primary { font-weight: 500; white-space: normal; min-width: 200px; }
table.data .secondary { font-size: 12px; color: var(--muted); }
table.data .rank { color: var(--muted); width: 44px; font-size: 12.5px; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sortable .sort-caret { opacity: 0; margin-left: 3px; }
th.sortable.is-sorted { color: var(--accent); }
th.sortable.is-sorted .sort-caret { opacity: 1; }

.star-btn {
    display: grid; place-items: center;
    width: 26px; height: 26px; padding: 0;
    background: none; border: 0; border-radius: var(--radius-sm);
    color: var(--muted); cursor: pointer;
}
.star-btn:hover { background: var(--surface-sunken); color: var(--ink); }
.star-btn svg { width: 15px; height: 15px; }
.star-btn.is-on { color: var(--warning); }
.star-btn.is-on svg { fill: var(--warning); }

.pager {
    display: flex; align-items: center; gap: 10px;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
    font-size: 13px; color: var(--ink-2); flex-wrap: wrap;
}
.pager .pager-info { margin-right: auto; }

/* --------------------------------------------------------------- controls --- */

.btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 13px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--border-strong); border-radius: 8px;
    font-weight: 500; cursor: pointer; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--surface-sunken); text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); background: var(--accent); }
.btn-sm { height: 28px; padding: 0 9px; font-size: 12.5px; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-sunken); }

.segmented {
    display: inline-flex; padding: 2px; gap: 2px;
    background: var(--surface-sunken); border-radius: 8px;
}
.segmented button {
    height: 28px; padding: 0 11px; border: 0; border-radius: 6px;
    background: transparent; color: var(--ink-2);
    font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.segmented button:hover { color: var(--ink); }
.segmented button.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.filters {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
    margin-bottom: 16px;
}
.field { display: grid; gap: 4px; min-width: 0; }
.field > span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.field select, .field input {
    height: 34px; padding: 0 9px; min-width: 130px;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: 8px;
}
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 4px 2px 9px; border-radius: 99px;
    background: var(--accent-wash); color: var(--accent);
    font-size: 12.5px; font-weight: 500;
}
.chip button {
    display: grid; place-items: center; width: 18px; height: 18px;
    padding: 0; border: 0; border-radius: 50%; background: none;
    color: inherit; cursor: pointer;
}
.chip button:hover { background: rgba(0, 0, 0, 0.1); }
.chip button svg { width: 11px; height: 11px; stroke-width: 2.6; }

.tag {
    display: inline-block; padding: 1px 7px; border-radius: 5px;
    background: var(--surface-sunken); color: var(--ink-2);
    font-size: 11.5px; font-weight: 500;
}
.tag-partial { background: rgba(250, 178, 25, 0.16); color: #8a5c00; }
:root[data-theme="dark"] .tag-partial { color: var(--warning); }
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) .tag-partial { color: var(--warning); }
}

/* ---------------------------------------------------------------- charts --- */

.chart { width: 100%; position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }

.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart .axis-line { stroke: var(--axis); stroke-width: 1; }
.chart .tick-text { fill: var(--muted); stroke: none; font-size: 11px; }
.chart .series-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .series-area { stroke: none; opacity: 0.10; }
/* End markers carry a 2px ring in the surface colour so they stay readable
   where they cross a line or another marker. */
.chart .series-dot { stroke: var(--surface); stroke-width: 2; }
.chart .bar { stroke: none; }
.chart .value-label { fill: var(--ink); stroke: none; font-size: 11.5px; font-weight: 600; }
.chart .crosshair { stroke: var(--axis); stroke-width: 1; }
.chart .hover-target { fill: transparent; stroke: none; }

.legend {
    display: flex; flex-wrap: wrap; gap: 4px 16px;
    margin-top: 10px; font-size: 12px; color: var(--ink-2);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-key { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.legend-key.is-dot { width: 9px; height: 9px; border-radius: 50%; }

.chart-tooltip {
    position: fixed; z-index: 60; pointer-events: none;
    min-width: 150px; max-width: 280px; padding: 8px 10px;
    background: var(--surface-raised); color: var(--ink);
    border: 1px solid var(--border-strong); border-radius: 8px;
    box-shadow: var(--shadow); font-size: 12.5px;
}
.chart-tooltip .tt-title { font-weight: 600; margin-bottom: 5px; }
.chart-tooltip .tt-row { display: flex; align-items: center; gap: 8px; }
.chart-tooltip .tt-row .tt-key { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.chart-tooltip .tt-row .tt-name { color: var(--ink-2); }
.chart-tooltip .tt-row .tt-val { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Leaderboard: a horizontal bar list, the readable form for ranked magnitude. */
.barlist { display: grid; gap: 2px; }
.barlist-row {
    position: relative; display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: var(--radius-sm);
    color: var(--ink); overflow: hidden;
}
.barlist-row:hover { text-decoration: none; }
.barlist-row:hover .bl-track { filter: brightness(1.1); }
.bl-track {
    position: absolute; left: 0; top: 3px; bottom: 3px;
    background: var(--accent-wash); border-radius: 4px;
}
.bl-label { position: relative; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bl-sub { position: relative; font-size: 12px; color: var(--muted); }
.bl-value { position: relative; margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.bl-delta { position: relative; }

/* --------------------------------------------------------------- messages --- */

.loading { display: grid; place-items: center; gap: 12px; padding: 80px 0; color: var(--muted); }
.spinner {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--grid); border-top-color: var(--accent);
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

.empty { padding: 40px 16px; text-align: center; color: var(--muted); }
.empty h3 { color: var(--ink); margin-bottom: 5px; }

.notice {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 13px; border-radius: var(--radius);
    background: var(--accent-wash); color: var(--ink);
    border: 1px solid var(--border); margin-bottom: 16px;
}
.notice svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--accent); }
.notice.is-warn { background: rgba(250, 178, 25, 0.12); }
.notice.is-warn svg { color: var(--warning); }
.notice .n-title { font-weight: 600; }
.notice .n-body { color: var(--ink-2); font-size: 13px; }

.toast-stack {
    position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
    z-index: 80; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px));
}
.toast {
    padding: 11px 14px; border-radius: var(--radius);
    background: var(--surface-raised); border: 1px solid var(--border-strong);
    box-shadow: var(--shadow);
}
.toast.is-error { border-color: var(--critical); }

/* ------------------------------------------------------------------ auth --- */

.auth-page {
    min-height: calc(100vh - var(--topbar-h));
    display: grid; place-items: center; padding: 40px 20px;
}
.auth-card {
    width: 100%; max-width: 400px; padding: 26px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 20px; margin-bottom: 6px; }
.auth-card .subtitle { margin-bottom: 20px; }
.auth-form { display: grid; gap: 13px; }
.auth-form label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.auth-form input {
    height: 38px; padding: 0 11px;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px;
}
.auth-form .btn { height: 40px; justify-content: center; margin-top: 4px; }
.auth-error {
    padding: 9px 11px; border-radius: 8px;
    background: var(--critical-bg); color: var(--critical); font-size: 13px;
}
.auth-alt { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
    font-size: 13px; color: var(--ink-2); text-align: center; }

.plan-pitch { margin-top: 18px; display: grid; gap: 7px; font-size: 13px; color: var(--ink-2); }
.plan-pitch li { display: flex; gap: 8px; align-items: flex-start; }
.plan-pitch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.plan-pitch svg { width: 15px; height: 15px; color: var(--good); flex: none; margin-top: 2px; }

/* --------------------------------------------------------------- specifics --- */

.hotel-hero { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.hotel-hero .hh-main { min-width: 260px; flex: 1 1 320px; }
.hotel-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.hotel-meta span { display: inline-flex; align-items: center; gap: 5px; }
.hotel-meta svg { width: 14px; height: 14px; color: var(--muted); }

.bench-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.bench {
    padding: 12px 14px; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--surface);
}
.bench-label { font-size: 12px; color: var(--ink-2); }
.bench-rank { font-size: 20px; font-weight: 600; margin-top: 2px; }
.bench-rank small { font-size: 13px; font-weight: 400; color: var(--muted); }
.bench-index { font-size: 12px; color: var(--muted); margin-top: 3px; }

.name-history { display: grid; gap: 8px; }
.name-history li { display: flex; gap: 10px; align-items: baseline; }
.name-history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nh-period { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------ responsive --- */

@media (max-width: 1000px) {
    .nav-toggle { display: grid; }
    /* The drawer is closed by transform AND visibility. Transform alone is not enough:
       it is animated, and a transition only settles once the page is actually painting,
       so on a page whose animation clock is stalled (a background tab, a hidden pane) the
       drawer would sit at translateX(0) over the content. visibility is not animated, so
       the closed state holds immediately and the drawer cannot be clicked through either. */
    .sidenav {
        position: fixed; top: var(--topbar-h); left: 0; z-index: 35;
        background: var(--surface);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.18s ease;
    }
    .sidenav.is-open { transform: none; visibility: visible; box-shadow: var(--shadow); }
    .content { padding: 18px 16px 56px; }
}

@media (max-width: 760px) {
    .brand-text { display: none; }
    .search { max-width: none; }
    .content { padding: 14px 12px 48px; }
    .card { padding: 13px; }
    .table-wrap { margin: 0 -13px -13px; padding: 0 13px 13px; }
    .stat-value { font-size: 22px; }
    .stat-value.is-hero { font-size: 34px; }
    h1 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
    .topbar, .sidenav, .pager, .ph-actions, .ch-actions { display: none !important; }
    .content { padding: 0; }
    .card { break-inside: avoid; border-color: #ccc; }
}

/* ------------------------------------------------------------------ plans --- */

.plan-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }

.plan-card {
    position: relative; padding: 22px 20px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; display: flex; flex-direction: column; gap: 10px;
}
.plan-card.is-featured { border-color: var(--accent); box-shadow: var(--shadow); }
.plan-card.is-current { border-color: var(--good); }
.plan-badge {
    position: absolute; top: -10px; left: 20px;
    padding: 2px 9px; border-radius: 99px;
    background: var(--accent); color: var(--accent-ink);
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
.plan-tagline { color: var(--ink-2); }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 2px; }
.plan-amount { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.plan-period { font-size: 13px; color: var(--muted); }
.plan-features { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 8px; }
.plan-features li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.plan-features svg { width: 15px; height: 15px; color: var(--good); flex: none; margin-top: 2px; }
.plan-card .btn { margin-top: auto; justify-content: center; }
.plan-current {
    margin-top: auto; text-align: center; padding: 8px;
    border-radius: 8px; background: var(--good-bg); color: var(--good);
    font-size: 13px; font-weight: 600;
}
.plan-explainer { display: grid; gap: 10px; color: var(--ink-2); font-size: 13.5px; max-width: 76ch; }
.plan-explainer code {
    background: var(--surface-sunken); padding: 1px 5px; border-radius: 4px; font-size: 12.5px;
}

/* Where a gated feature would have been. */
.upgrade-panel {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: linear-gradient(180deg, var(--accent-wash), transparent);
    border-style: dashed;
}
.upgrade-mark {
    display: grid; place-items: center; width: 40px; height: 40px; flex: none;
    border-radius: 10px; background: var(--surface); border: 1px solid var(--border);
    color: var(--accent);
}
.upgrade-mark svg { width: 19px; height: 19px; }
.upgrade-body { flex: 1 1 260px; min-width: 0; }
.upgrade-body h2 { font-size: 15px; margin-bottom: 3px; }
.upgrade-body p { color: var(--ink-2); font-size: 13.5px; }
.upgrade-panel .btn { flex: none; }

/* -------------------------------------------------------------- narrative --- */

.narrative-headline {
    font-size: 17px; font-weight: 500; line-height: 1.45;
    letter-spacing: -0.01em; margin-bottom: 14px; max-width: 70ch;
}
.narrative-body { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.narrative-section h3 {
    font-size: 11.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px;
}
.narrative-section p { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.narrative-cautions {
    list-style: none; margin: 16px 0 0; padding: 12px 0 0;
    border-top: 1px solid var(--border); display: grid; gap: 6px;
}
.narrative-cautions li {
    position: relative; padding-left: 18px; font-size: 12.5px; color: var(--muted);
}
.narrative-cautions li::before {
    content: '!'; position: absolute; left: 0; top: 0;
    display: grid; place-items: center; width: 13px; height: 13px; margin-top: 2px;
    border-radius: 50%; background: var(--surface-sunken);
    font-size: 9px; font-weight: 700; color: var(--warning);
}

/* --------------------------------------------------------------- forecast --- */

.forecast-summary {
    display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start;
    padding: 12px 14px; margin-bottom: 14px;
    background: var(--surface-sunken); border-radius: var(--radius);
}
.forecast-figure { flex: none; }
.forecast-accuracy { flex: 1 1 260px; min-width: 0; }
.forecast-accuracy p { color: var(--ink-2); font-size: 13px; margin-top: 4px; max-width: 62ch; }
.forecast-caveats {
    list-style: none; margin: 14px 0 0; padding: 12px 0 0;
    border-top: 1px solid var(--border); display: grid; gap: 6px;
}
.forecast-caveats li {
    position: relative; padding-left: 16px; font-size: 12.5px; color: var(--muted);
}
.forecast-caveats li::before {
    content: ''; position: absolute; left: 3px; top: 7px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--axis);
}

/* ----------------------------------------------------------------- modal --- */

.modal-backdrop {
    position: fixed; inset: 0; z-index: 70;
    display: grid; place-items: center; padding: 20px;
    background: rgba(11, 11, 11, 0.45);
}
.modal {
    width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto;
    padding: 20px; background: var(--surface-raised);
    border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
}
.modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.modal-head h2 { font-size: 17px; margin-right: auto; }
.modal-intro { color: var(--ink-2); font-size: 13px; margin-bottom: 16px; }
.modal .field-row { display: grid; gap: 10px; grid-template-columns: 100px 1fr; }
.modal textarea, .modal select {
    padding: 9px 11px; background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: 8px;
    font: inherit; color: inherit; resize: vertical;
}
.modal select { height: 38px; padding: 0 9px; }
.modal input[readonly] { background: var(--surface-sunken); color: var(--muted); }

/* ------------------------------------------------------------ admin queue --- */

.review-actions { display: flex; gap: 6px; }
.issue-message {
    white-space: normal; max-width: 320px; display: -webkit-box;
    -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* A compact filter that sits inside a card header rather than above the card. */
.field-inline { flex-direction: row; align-items: center; gap: 7px; }
.field-inline > span { font-size: 11.5px; white-space: nowrap; }
.field-inline select { height: 28px; min-width: 0; padding: 0 6px; font-size: 12.5px; }

/* --- compare -------------------------------------------------------------
   The controls sit on one row that wraps: on a phone each select takes a full
   line rather than shrinking to something untappable. */
.cmp-controls {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.cmp-controls .cmp-add { flex: 1 1 260px; min-width: 200px; margin: 0; max-width: none; }
.cmp-controls .cmp-input {
    width: 100%; height: 36px; padding: 0 12px;
    background: var(--surface-sunken); border: 1px solid transparent; border-radius: 8px;
}
.cmp-controls .cmp-input:focus {
    background: var(--surface); border-color: var(--border-strong); outline: none;
}
.cmp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cmp-empty { color: var(--muted); font-size: 13px; }
.cmp-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 8px 5px 10px; border-radius: 999px;
    background: var(--surface-sunken); border: 1px solid var(--border);
    font-size: 13px;
}
/* The dot is the line colour, so a chip and its series are matched by eye rather
   than by reading the legend. */
.cmp-chip-dot {
    width: 9px; height: 9px; border-radius: 50%; background: var(--chip); flex: none;
}
.cmp-chip-x {
    border: 0; background: none; cursor: pointer; color: var(--muted);
    font-size: 15px; line-height: 1; padding: 0 2px;
}
.cmp-chip-x:hover { color: var(--ink); }
.cmp-swatch {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: var(--chip); margin-right: 8px;
}
.cmp-results { top: 40px; }

/* Sub-heading inside a comparison card, separating the single month from the year
   to date. Quiet: the tables are the content, these are only signposts. */
.cmp-sub {
    margin: 16px 0 8px; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.cmp-body > .cmp-sub:first-child { margin-top: 4px; }

/* A table cell carrying a level and its change. The delta sits under the number
   at a smaller size so a column still scans as figures, not as two columns
   crammed into one. */
.cmp-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cmp-cell-delta { font-size: 11px; line-height: 1.2; }

/* --- sign-in ------------------------------------------------------------
   One button, so it carries the page. Google's own mark is used unaltered:
   their branding terms require the official colours and it is what people
   are looking for. */
.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 44px; margin-top: 18px;
    background: var(--surface-raised); color: var(--ink);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    font-weight: 500;
}
.btn-google:hover { background: var(--surface-sunken); text-decoration: none; }
.btn-google .g-mark { width: 18px; height: 18px; flex: none; stroke: none; }
.auth-note > * { margin-top: 14px; }

/* --- sign-in and refusal pages ------------------------------------------
   Centred in the viewport rather than sitting at the top of a content column,
   because with the app frame hidden there is no column for it to sit in. Wider
   than the old card: the refusal state carries real explanation, and prose set
   to 400px turns into a ladder. */

.auth-wrap {
    min-height: calc(100vh - var(--topbar-h));
    display: grid; place-items: center; padding: 40px 20px 80px;
}
.auth-panel {
    width: 100%; max-width: 520px; padding: 34px 34px 30px;
    background: var(--surface-raised); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: var(--shadow);
}
.auth-panel h1 { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 10px; }
.auth-body { margin: 0; color: var(--ink-2); line-height: 1.6; }

.auth-brand {
    display: flex; align-items: center; gap: 9px;
    font-size: 15px; font-weight: 500; margin-bottom: 20px;
}

/* Informational, not critical and not success. Being turned away is the system working, so red
   would tell someone they had broken something they had not; green would congratulate them on
   being refused. The accent says "read this" without claiming either. */
.auth-badge {
    display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px;
    background: var(--accent-wash); border-radius: 11px; color: var(--accent);
}
.auth-badge svg {
    width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}

/* The address that was refused. Given its own line and weight because it is the single most
   useful fact on the page -- it is what tells someone they used the wrong account. */
.auth-identity {
    margin: 0 0 12px; padding: 10px 13px;
    background: var(--surface-sunken); border-radius: 8px;
    font-size: 14px; color: var(--ink-2); word-break: break-all;
}
.auth-identity strong { color: var(--ink); font-weight: 600; }

.auth-recorded {
    display: flex; gap: 11px; margin-top: 18px; padding: 14px 16px;
    background: var(--accent-wash); border-radius: 10px;
    font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
}
.auth-recorded svg {
    width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--accent);
    fill: none; stroke: currentColor; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
}

.auth-note-box {
    display: flex; gap: 11px; margin-top: 20px; padding: 14px 16px;
    background: var(--surface-sunken); border-radius: 10px;
    font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
}
.auth-note-box svg {
    width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--muted);
    fill: none; stroke: currentColor; stroke-width: 1.8;
}

.auth-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
/* This button sizes to its text here; on the old card it filled the card. */
.auth-actions .btn-google { width: auto; margin-top: 0; height: 42px; padding: 0 18px; }
.auth-actions .btn-ghost { height: 42px; padding: 0 16px; }

/* Follow-up under a refusal. Quieter than the panel above it: that says what happened, this
   only suggests what to try, and it must not read as a second error. */
.auth-aside {
    margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--border);
    font-size: 13px; line-height: 1.6; color: var(--muted);
}

@media (max-width: 560px) {
    .auth-panel { padding: 26px 22px 24px; }
    .auth-actions .btn { width: 100%; justify-content: center; }
}

/* ===========================================================================
   Landing page.

   The signed-out front page runs full-bleed inside .content and opts out of the
   app frame entirely: no sidebar, no search, no year picker. A sales page
   wrapped in empty application chrome reads as a product that failed to load.

   It stays on the same tokens as the app. The temptation with a marketing page
   is a second palette and a display face, which then looks like a different
   product from the one behind the sign-in button.
   =========================================================================== */

/* Both signed-out pages drop the application frame. On the landing page a sidebar is noise; on
   the sign-in and refusal pages every one of those links comes straight back to sign-in, so
   showing them implies there is something behind the door that merely failed to open. */
body[data-chrome="landing"] .sidenav,
body[data-chrome="landing"] .search,
body[data-chrome="landing"] .year-select,
body[data-chrome="landing"] .nav-toggle,
body[data-chrome="auth"] .sidenav,
body[data-chrome="auth"] .search,
body[data-chrome="auth"] .year-select,
body[data-chrome="auth"] .nav-toggle { display: none; }

body[data-chrome="landing"] .content { padding: 0; }
body[data-chrome="landing"] .topbar { border-bottom-color: transparent; }
/* The brand pushes left and the actions right once the search bar is gone. */
body[data-chrome="landing"] .topbar-actions,
body[data-chrome="auth"] .topbar-actions { margin-left: auto; }
/* The sign-in button in the top bar is redundant on a page that is entirely about signing in. */
body[data-chrome="auth"] #account { display: none; }

.landing { --lp-max: 1080px; }
.landing h2 {
    font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2;
    letter-spacing: -0.015em; margin: 0 0 8px;
}

/* --- hero --------------------------------------------------------------- */

.lp-hero {
    position: relative; overflow: hidden;
    padding: clamp(56px, 9vw, 108px) 24px clamp(48px, 7vw, 84px);
    text-align: center;
    /* A wash rather than a saturated band: the chart below is the colour on this
       page, and a loud hero would compete with the one thing that proves the
       product works. */
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, var(--accent-wash), transparent 70%),
        linear-gradient(180deg, var(--surface-sunken), transparent 60%);
}
.lp-hero::after {
    /* Hairline that fades at both ends, so the hero resolves into the page
       instead of stopping at a hard rule. */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-strong) 30%,
                var(--border-strong) 70%, transparent);
}
.lp-hero-inner { max-width: 760px; margin: 0 auto; }

.lp-eyebrow {
    display: inline-block; margin-bottom: 18px; padding: 5px 12px;
    background: var(--surface-raised); border: 1px solid var(--border);
    border-radius: 999px; box-shadow: var(--shadow);
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-2);
}
.lp-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(34px, 5.6vw, 60px); line-height: 1.06;
    letter-spacing: -0.03em; font-weight: 700;
}
.lp-hl { color: var(--accent); }
.lp-lede {
    max-width: 620px; margin: 0 auto;
    font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: var(--ink-2);
}
.lp-cta {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
    margin-top: 30px;
}
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 9px; }
/* The hero button sizes to its text; the one on the sign-in card fills its card. */
.lp-cta .btn-google { width: auto; margin-top: 0; }
.lp-hero-note { margin-top: 16px; font-size: 13px; color: var(--muted); }

/* --- stat strip --------------------------------------------------------- */

/* Lifted into the hero's lower edge so the first thing below the headline is
   evidence, not another paragraph. The 1px grid gap is the card background
   showing through, which avoids doubled borders between cells. */
.lp-stats {
    display: grid; gap: 1px; max-width: var(--lp-max);
    margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    position: relative; transform: translateY(-30px);
    background: var(--border); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.lp-stat { background: var(--surface-raised); padding: 22px 20px; text-align: center; }
.lp-stat-value {
    font-size: clamp(24px, 3vw, 32px); font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.lp-stat-label { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.lp-stat-note { margin-top: 3px; font-size: 12px; color: var(--muted); }

/* --- the proof chart ---------------------------------------------------- */

.lp-proof {
    max-width: var(--lp-max); margin: 0 auto;
    background: var(--surface-raised); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 26px 26px 20px;
}
.lp-proof-sub { margin: 6px 0 0; color: var(--ink-2); max-width: 640px; }
.lp-proof-chart { margin-top: 20px; }
.lp-proof-foot { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

/* --- features and capabilities ------------------------------------------ */

.lp-features, .lp-capabilities, .lp-plans {
    max-width: var(--lp-max); margin: 0 auto; padding: clamp(48px, 6vw, 76px) 0 0;
}
.lp-section-sub { margin: 0 0 4px; color: var(--ink-2); max-width: 620px; }

.lp-feature-grid {
    display: grid; gap: 18px; margin-top: 26px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.lp-feature {
    padding: 22px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.lp-feature-icon {
    display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px;
    background: var(--accent-wash); border-radius: 9px; color: var(--accent);
}
.lp-feature-icon svg {
    width: 20px; height: 20px;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.lp-feature h3 { margin: 0 0 6px; font-size: 15.5px; }
.lp-feature p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

.lp-cap-grid {
    display: grid; gap: 0 24px; margin-top: 22px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.lp-cap { padding: 18px 0 20px; border-top: 2px solid var(--accent-quiet); }
.lp-cap h3 { margin: 0 0 6px; font-size: 15px; }
.lp-cap p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* --- plans -------------------------------------------------------------- */

.lp-plan-grid {
    display: grid; gap: 16px; margin-top: 26px; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.lp-plan {
    position: relative; padding: 24px 20px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius);
}
/* The featured tier is raised rather than recoloured -- one accent border, no
   fill, so the price list still reads as one set of options. */
.lp-plan.is-featured {
    background: var(--surface-raised); border-color: var(--accent);
    box-shadow: var(--shadow);
}
.lp-plan-flag {
    position: absolute; top: -10px; left: 20px; padding: 3px 10px;
    background: var(--accent); color: var(--accent-ink);
    border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
}
.lp-plan-name {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--muted);
}
.lp-plan-price {
    margin-top: 8px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.lp-plan-period { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.lp-plan-tagline { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.lp-plan-features {
    margin: 16px 0 0; padding: 16px 0 0; list-style: none;
    border-top: 1px solid var(--border);
    display: grid; gap: 9px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.lp-plan-features li { position: relative; padding-left: 20px; }
.lp-plan-features li::before {
    content: ""; position: absolute; left: 2px; top: 6px;
    width: 9px; height: 5px; border-left: 1.8px solid var(--accent);
    border-bottom: 1.8px solid var(--accent); transform: rotate(-45deg);
}

/* --- close and footer --------------------------------------------------- */

.lp-close {
    max-width: var(--lp-max); margin: clamp(56px, 7vw, 88px) auto 0;
    padding: clamp(40px, 5vw, 56px) 24px; text-align: center;
    background: var(--surface-sunken); border-radius: var(--radius);
}
.lp-close p { max-width: 480px; margin: 0 auto 22px; color: var(--ink-2); }

.lp-foot {
    max-width: var(--lp-max); margin: clamp(48px, 6vw, 72px) auto 0;
    padding: 40px 0 56px; border-top: 1px solid var(--border);
}
.lp-foot-brand {
    display: flex; align-items: center; gap: 9px;
    font-size: 15px; font-weight: 500; margin-bottom: 10px;
}
.lp-foot p { margin: 0; max-width: 640px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* The landing sections share one gutter, applied here so each section's own
   padding stays about vertical rhythm only. */
.lp-stats, .lp-proof, .lp-features, .lp-capabilities,
.lp-plans, .lp-close, .lp-foot { margin-left: 24px; margin-right: 24px; }

@media (min-width: 1128px) {
    .lp-stats, .lp-proof, .lp-features, .lp-capabilities,
    .lp-plans, .lp-close, .lp-foot { margin-left: auto; margin-right: auto; }
}

@media (max-width: 640px) {
    .lp-stats { transform: none; margin-top: 24px; }
    .lp-cta .btn-lg { width: 100%; justify-content: center; }
}

/* --- rebuild progress ---------------------------------------------------
   A rebuild rewrites every table the site reads and takes minutes. Showing the step it is on,
   and the row counts as they land, is the difference between "working" and "stuck" -- which
   from the outside look identical. */
.rollup-card .rollup-body { display: grid; gap: 14px; }
.rollup-bar {
    height: 6px; border-radius: 999px; overflow: hidden;
    background: var(--surface-sunken);
}
.rollup-bar span {
    display: block; height: 100%; background: var(--accent);
    /* Steps land in bursts, so the width is eased rather than jumping. */
    transition: width 400ms ease;
}
.rollup-counts {
    display: grid; gap: 1px; background: var(--border);
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.rollup-counts > div {
    display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
    padding: 9px 12px; background: var(--surface); font-size: 13px;
}
.rollup-counts span { color: var(--ink-2); }
.rollup-counts strong { font-variant-numeric: tabular-nums; }
.is-bad { color: var(--critical); }

/* --- projected remainder of a part-finished year ------------------------
   Drawn as an outline sitting on top of the filed bar, never as more solid bar. The whole
   point of the chart is what was filed; the projection is the one mark on it that nobody
   reported, so it has to read as an estimate at a glance rather than on inspection. */
.chart .bar-projected {
    fill-opacity: 0.10;
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}
.chart .value-label.is-projected { fill: var(--muted); font-style: italic; }
/* Where a projection sits above the bar, the filed figure moves inside it. */
.chart .value-label.is-inside { fill: var(--surface); font-weight: 600; }

/* --- email preferences --------------------------------------------------- */
.pref-list { display: grid; }
.pref {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 16px 0; border-top: 1px solid var(--border); cursor: pointer;
}
.pref:first-child { border-top: 0; }
.pref input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--accent); }
.pref-text { display: grid; gap: 3px; }
.pref-title { font-weight: 500; }
.pref-body { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
/* The account menu mixes links and buttons; they have to look identical. */
.account-menu a[data-action] {
    display: block; padding: 8px 12px; color: var(--ink); font: inherit; text-align: left;
}
.account-menu a[data-action]:hover { background: var(--surface-sunken); text-decoration: none; }

.billing-actions { display: grid; gap: 10px; justify-items: start; padding-top: 4px; }
.billing-actions .secondary { font-size: 13px; line-height: 1.6; color: var(--ink-2); }

/* --- owner configuration ------------------------------------------------- */
.setting-list { display: grid; }
.setting {
    display: flex; gap: 20px; align-items: flex-start; justify-content: space-between;
    padding: 16px 0; border-top: 1px solid var(--border);
}
.setting:first-child { border-top: 0; }
.setting-text { min-width: 0; }
.setting-label { font-weight: 500; }
.setting-help { margin-top: 3px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.setting-origin { margin-top: 4px; font-size: 12px; color: var(--muted); }
.setting-origin code { font-size: 11.5px; }
.setting-control { flex: none; display: flex; align-items: center; }
.setting-control input[type="text"] {
    width: 260px; height: 34px; padding: 0 11px;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px;
}
.setting-control select {
    height: 34px; padding: 0 9px;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px;
}
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.switch input { width: 16px; height: 16px; accent-color: var(--accent); }
@media (max-width: 620px) {
    .setting { flex-direction: column; gap: 10px; }
    .setting-control input[type="text"] { width: 100%; }
}

/* The name exactly as submitted to the state, under the readable one. Quiet: it is provenance,
   not the title, and it only appears when the two actually differ. */
.filed-as { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.filed-as strong { color: var(--ink-2); font-weight: 500; }