/* MIA Financial Dashboard — "Canopy" identity
   Drawn from the sanghaseva.org line drawings: paper ground, pencil-green
   line work, deep leaf headings, moss for results, hawthorn links, and the
   red heart kept for the mark alone. */

:root {
    /* Canopy palette — the source values. */
    --paper: #F3F2E4;
    --pencil: #7E8C6A;
    --pencil-soft: #9AA389;
    --leaf: #2F4A2C;
    --moss: #3F6B3A;
    --lichen: #D5DDBF;
    --lichen-deep: #4F5E3E;
    --olive: #5E6B4E;
    --hawthorn: #7A2E22;
    --heart: #C23B2E;
    --rule: #D6D6C2;
    --surface: #FBFAF3;

    /* Legacy names, re-pointed at the Canopy palette so the rest of this
       stylesheet (and inline var() use in the page scripts) follows it. */
    --sage: var(--moss);
    --sage-light: #CBD5B3;
    --sand: var(--rule);
    --sand-light: #E6E6D3;
    --gold: #B8975A;
    --gold-light: #DCCB9F;
    --charcoal: #2E3226;
    --charcoal-light: #5E6352;
    --cream: var(--paper);
    --white: #FFFFFF;
    --red-muted: #b0605a;
    --red-light: #f0d9d4;
    --green-muted: #5f8f55;
    --amber: #c9a043;
    --teal: #3d7a7a;
    --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Newsreader', Georgia, serif;
    --sidebar-width: 248px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --radius: 8px;
    --radius-lg: 12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: var(--cream);
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    color: var(--charcoal);
    line-height: 1.6;
    min-height: 100vh;
}

/* --- Entrance animations --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.card, .capacity-callout, .estimate-banner {
    animation: fadeInUp 0.4s ease-out backwards;
}

.section:nth-child(1) .card, .section:nth-child(1).card { animation-delay: 0s; }
.section:nth-child(2) .card, .section:nth-child(2).card { animation-delay: 0.06s; }
.section:nth-child(3) .card, .section:nth-child(3).card { animation-delay: 0.12s; }
.section:nth-child(4) .card, .section:nth-child(4).card { animation-delay: 0.18s; }
.grid-2 .card:nth-child(1), .grid-3 .card:nth-child(1), .grid-4 .card:nth-child(1) { animation-delay: 0.06s; }
.grid-2 .card:nth-child(2), .grid-3 .card:nth-child(2), .grid-4 .card:nth-child(2) { animation-delay: 0.12s; }
.grid-3 .card:nth-child(3), .grid-4 .card:nth-child(3) { animation-delay: 0.18s; }
.grid-4 .card:nth-child(4) { animation-delay: 0.24s; }
.grid-2 .capacity-callout { animation-delay: 0.12s; }

/* --- Sidebar (the .dashboard-header, kept under its old class name so the
       page-level print rules that hide it still apply) --- */
body.has-sidebar { padding-left: var(--sidebar-width); }

.dashboard-header {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    overflow-y: auto;
    z-index: 100;
    background: var(--paper);
    border-right: 1px solid var(--rule);
    padding: 1.25rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.header-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}

.brand-mark {
    width: 84px;
    height: 84px;
}
.brand-mark .line {
    fill: none;
    stroke: var(--pencil);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.brand-mark .heart { fill: var(--heart); }

.site-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--leaf);
    line-height: 1.2;
}

.data-freshness {
    font-size: 0.82rem;
    color: var(--charcoal-light);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.2s, color 0.2s;
}
.data-freshness.stale {
    background: #fbefcf;
    color: #8a6a1a;
    font-weight: 500;
}
.data-freshness.stale::before {
    content: '\26A0';
    font-size: 0.9rem;
}
.data-freshness.very-stale {
    background: var(--red-light);
    color: #8b3a3a;
    font-weight: 600;
}
.data-freshness.very-stale::before {
    content: '\26A0';
    font-size: 0.9rem;
}

/* WP-012: full-width page banner once data is >30 days stale.
   Additive to the header chip — board-meeting safety net. */
.freshness-page-banner {
    width: 100%;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: var(--radius);
}
.freshness-page-banner--severe {
    background: var(--red-light);
    color: #8b3a3a;
    border-left: 4px solid #8b3a3a;
}
.freshness-page-banner--severe::before {
    content: '\26A0  ';
    margin-right: 0.25rem;
    font-weight: 700;
}

.tab-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nav-group-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.6rem 0.25rem;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1rem;
    color: var(--leaf);
}

.nav-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--pencil);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tab {
    padding: 0.5rem 0.6rem 0.5rem 2.35rem;
    text-decoration: none;
    color: var(--charcoal);
    font-size: 0.875rem;
    font-weight: 400;
    border-radius: var(--radius);
    transition: background 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tab:hover {
    background: #E9EAD7;
    color: var(--leaf);
}

.tab.active {
    background: #E3E6CF;
    color: var(--leaf);
    font-weight: 600;
}

.tab-admin { padding-left: 2.35rem; }

.header-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--rule);
    font-size: 0.85rem;
}

@media (max-width: 900px) {
    body.has-sidebar { padding-left: 0; }
    .dashboard-header {
        position: static;
        width: auto;
        overflow: visible;
        border-right: none;
        border-bottom: 1px solid var(--rule);
    }
    .header-left { flex-direction: row; justify-content: center; }
    .brand-mark { width: 48px; height: 48px; }
    .tab-nav { flex-direction: row; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
}

@media print {
    body.has-sidebar { padding-left: 0; }
    .dashboard-header { display: none; }
}

.user-name { color: var(--charcoal-light); }

.logout-link {
    color: var(--sage);
    text-decoration: none;
    font-weight: 500;
}
.logout-link:hover { text-decoration: underline; }
.logout-form { margin: 0; }
.logout-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.logout-button:focus-visible,
.tab:focus-visible,
.btn:focus-visible,
.granularity-toggle button:focus-visible,
.modal-close:focus-visible,
.card-button:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
}

/* --- Main content --- */
.dashboard-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* --- Flash messages --- */
.flash-messages { margin-bottom: 1rem; }
.flash {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
}
.flash-error { background: var(--red-light); color: #8b3a3a; }
.flash-info { background: #d4e8f0; color: #2a5a6a; }

/* --- Login --- */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
}

.login-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.login-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.login-subtitle {
    color: var(--charcoal-light);
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.login-form { text-align: left; }

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--charcoal-light);
    margin-bottom: 0.3rem;
}

.form-group input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(124, 148, 115, 0.15);
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary {
    background: var(--sage);
    color: var(--white);
    width: 100%;
    margin-top: 0.5rem;
}
.btn-primary:hover { background: #6a8363; }

.btn-secondary {
    background: var(--sand-light);
    color: var(--charcoal);
}
.btn-secondary:hover { background: var(--sand); }

.btn-danger {
    background: var(--red-muted);
    color: var(--white);
}
.btn-danger:hover { background: #b06a6a; }

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

/* --- Cards --- */
.card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
/* Disable hover transform on cards containing charts — transform shifts the canvas
   and causes Chart.js to continuously recalculate mouse position, breaking tooltips */
.card.chart-card:hover {
    transform: none;
}
.card[style*="cursor: pointer"]:hover,
.card.clickable:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    transform: translateY(-3px);
}
.card-button {
    width: 100%;
    border: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.card-button td,
.card-button th {
    pointer-events: none;
}
.muted-card {
    opacity: 0.6;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--charcoal);
}

.section-subtitle {
    font-size: 0.82rem;
    color: var(--charcoal-light);
    margin-top: -0.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.help-panel {
    background: var(--cream);
    border-left: 3px solid var(--sage);
    padding: 0.75rem 1rem;
    margin: 0.75rem 0 1.25rem;
    border-radius: 4px;
    font-size: 0.88rem;
}
.help-panel > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--charcoal);
    padding: 0.1rem 0;
    outline-offset: 2px;
}
.help-panel > summary:focus-visible {
    outline: 2px solid var(--sage);
}
.help-panel[open] > summary {
    margin-bottom: 0.5rem;
}
.help-panel ul {
    margin: 0.25rem 0 0.25rem 1.25rem;
    padding: 0;
    line-height: 1.55;
}
.help-panel li {
    margin-bottom: 0.3rem;
    color: var(--charcoal);
}
.help-panel li:last-child { margin-bottom: 0; }

.visually-hidden,
.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;
}

/* --- Cash Flow Bridge: drill-down affordance --- */
.drilldown-row {
    cursor: pointer;
    transition: background-color 120ms;
}
.drilldown-row:hover,
.drilldown-row:focus-visible {
    background-color: var(--sand-light);
    outline: none;
}
.drilldown-row:focus-visible {
    box-shadow: inset 0 0 0 2px var(--teal);
}
.drilldown-modal .unattributed-row td {
    color: var(--charcoal-light);
    font-style: italic;
}
.drilldown-modal .unattributed-row td span[title] {
    border-bottom: 1px dotted var(--charcoal-light);
    cursor: help;
}

.statements-subnav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    background: var(--cream);
    border-bottom: 1px solid var(--sand);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.statements-subnav a {
    font-size: 0.82rem;
    color: var(--charcoal);
    text-decoration: none;
    padding: 0.25rem 0.6rem;
    border-radius: 3px;
    border: 1px solid transparent;
}
.statements-subnav a:hover,
.statements-subnav a:focus-visible {
    background: var(--sand-light);
    border-color: var(--sage);
    outline: none;
}
@media (max-width: 480px) {
    .statements-subnav {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .statements-subnav a {
        white-space: nowrap;
    }
}
html { scroll-behavior: smooth; }
#section-ie, #section-bs, #section-cf, #section-cb { scroll-margin-top: 3.5rem; }

/* --- Grid layouts --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* --- Section spacing --- */
.section { margin-bottom: 1.5rem; }
.section-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, var(--sage), var(--sand), transparent) 1;
}

/* --- Tables --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.data-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid var(--sand);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--charcoal-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.data-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--sand-light);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table .amount { text-align: right; font-variant-numeric: tabular-nums; min-width: 4.5rem; white-space: nowrap; }
.data-table .total-row { font-weight: 600; }
.data-table .total-row td { border-top: 2px solid var(--charcoal); background: var(--sand-light); }
.data-table .net-row td { background: var(--sand); }
.data-table .opening-row td {
    background: rgba(184, 196, 170, 0.18);
    border-top: 1px solid var(--sand);
    border-bottom: 1px solid var(--sand);
}
.data-table .section-label-row td {
    background: var(--sand-light);
    border-bottom: 1px solid var(--sand);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--charcoal-light);
}
.data-table .section-label-row td:not(:first-child) {
    min-width: 4.5rem;
}
.data-table .section-label-row-spaced td {
    padding-top: 0.75rem;
}

/* Sticky first column */
.data-table th:first-child,
.data-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--white);
    z-index: 1;
    min-width: 8rem;
    white-space: nowrap;
}
.data-table .opening-row td:first-child { background: rgba(184, 196, 170, 0.18); }
.data-table .section-label-row td:first-child { background: var(--sand-light); }
.data-table .total-row td:first-child { background: var(--sand-light); }
.data-table .net-row td:first-child { background: var(--sand); }

/* --- Stat values --- */
.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.stat-value-lg {
    font-size: 1.8rem;
    font-weight: 700;
}
.stat-label {
    font-size: 0.75rem;
    color: var(--charcoal-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.positive { color: var(--green-muted); }
.negative { color: var(--red-muted); }
.incomplete { color: var(--charcoal-light); font-style: italic; }
.data-incomplete-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--red-light);
    color: #8b3a3a;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    margin-left: 0.35rem;
    vertical-align: baseline;
    cursor: help;
}
.data-table tr.row-incomplete td {
    background: rgba(196, 122, 122, 0.05);
}

/* KPI delta indicators */
.kpi-delta { font-size: 0.8rem; margin-top: 0.25rem; }

/* Category group expand/collapse */
.category-group-header { cursor: pointer; user-select: none; }
.category-group-header .chevron {
    display: inline-block;
    font-size: 0.7rem; margin-right: 0.25rem;
}
.category-detail-row { display: none; }
.category-detail-row.visible { display: table-row; }
.category-detail-row td:first-child {
    padding-left: 2rem; font-style: italic; color: var(--charcoal-light);
}

/* Scroll shadow for horizontally-scrollable tables */
.table-scroll-wrapper {
    position: relative;
}
.table-scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 2rem;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.85));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s;
}
.table-scroll-wrapper.scrolled-end::after {
    opacity: 0;
}

/* Cash Flow Bridge: larger type, no scroll fade */
#bridge-table-card .table-scroll-wrapper::after { display: none; }
#bridge-table { font-size: 1rem; }
#bridge-table th,
#bridge-table td { padding: 0.65rem 0.9rem; }
#bridge-table .section-label-row td { font-size: 0.95rem; }
#bridge-table-card .card-title { font-size: 1.2rem; }
#bridge-table-card .section-subtitle { font-size: 0.95rem; }

/* --- Estimate banner --- */
.estimate-banner {
    background: var(--sand-light);
    border-left: 3px solid var(--gold);
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--charcoal-light);
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 1rem;
}
.estimate-suffix {
    font-size: 0.7rem;
    color: var(--charcoal-light);
    font-style: italic;
    margin-left: 0.25rem;
}
.empty-state,
.error-state {
    padding: 1rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
}
.empty-state {
    background: var(--sand-light);
    color: var(--charcoal-light);
}
.error-state {
    background: var(--red-light);
    color: #8b3a3a;
}

/* --- Waterfall chart container --- */
.waterfall-container {
    position: relative;
    height: 380px;
}
.card-caption {
    font-size: 0.9rem;
    color: var(--charcoal-light);
    margin: -0.25rem 0 0.75rem;
    line-height: 1.45;
}
.table-caption {
    font-size: 0.85rem;
    color: var(--charcoal-light);
    margin-top: 0.75rem;
}
.table-caption a { color: var(--sage); }
.th-subtle {
    display: block;
    font-weight: 400;
    font-size: 0.7rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--charcoal-light);
}

/* --- Cash headline row (editorial arithmetic above waterfall) --- */
.cash-headline-row {
    position: relative;
    background:
        radial-gradient(ellipse at 92% 50%, color-mix(in srgb, var(--sage) 7%, transparent) 0%, transparent 55%),
        var(--white);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.5rem 1.25rem 1.65rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    animation: fadeInUp 0.4s ease-out backwards;
    animation-delay: 0.03s;
    overflow: hidden;
}
.cash-headline-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.1rem;
    bottom: 1.1rem;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(to bottom, var(--gold) 0%, var(--sage) 100%);
    opacity: 0.85;
}
.cash-headline-figures {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.cash-headline-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 auto;
    min-width: 8rem;
    padding: 0.1rem 0.35rem;
    position: relative;
}
.cash-headline-label {
    font-size: 0.64rem;
    color: var(--charcoal-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    line-height: 1.25;
}
.cash-headline-label .info-icon {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--sage);
    margin-left: 0.2rem;
    vertical-align: -0.05em;
    text-transform: none;
    letter-spacing: 0;
}
.cash-headline-value {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--charcoal);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.01em;
}
/* Deductions in the headline strip are set-asides, not losses: lichen, not red.
   A negative Spendable figure (below) stays red. */
.cash-headline-value.negative {
    color: var(--lichen-deep);
    font-weight: 500;
}
.cash-headline-sub {
    font-size: 0.68rem;
    color: var(--charcoal-light);
    letter-spacing: 0.01em;
    margin-top: 0.1rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* Operators (−, =) as soft typographic marks */
.cash-headline-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.1rem;
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--gold) 80%, var(--charcoal-light));
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    opacity: 0.55;
    user-select: none;
    min-width: 1.25rem;
}
.cash-headline-sep > span {
    transform: translateY(-0.1em);
}
.cash-headline-sep--equals {
    color: var(--sage);
    opacity: 0.85;
    font-weight: 500;
    font-size: 1.7rem;
    padding: 0 0.4rem 0 0.2rem;
}

/* Spendable — the climax */
.cash-headline-primary {
    padding: 0.2rem 0.25rem 0.2rem 1.1rem;
    margin-left: 0.15rem;
}
.cash-headline-primary-rule {
    position: absolute;
    left: 0.4rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 2px;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--gold) 80%, transparent) 0%,
        var(--sage) 40%,
        var(--sage) 100%);
    border-radius: 2px;
}
.cash-headline-primary .cash-headline-label {
    color: var(--sage);
    font-weight: 700;
    font-size: 0.7rem;
}
.cash-headline-ornament {
    display: inline-block;
    color: var(--gold);
    font-size: 0.9rem;
    margin-right: 0.15rem;
    vertical-align: 0.05em;
}

/* Result group — keeps the "=" glued to Spendable when the row wraps */
.cash-headline-result-group {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    flex: 0 1 auto;
}
.cash-headline-result-group .cash-headline-primary {
    flex: 1 1 auto;
}
.cash-headline-primary .cash-headline-value {
    font-size: 2.85rem;
    color: var(--sage);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    position: relative;
    padding-bottom: 0.15rem;
    background-image: linear-gradient(to right,
        color-mix(in srgb, var(--gold) 50%, transparent) 0%,
        color-mix(in srgb, var(--gold) 15%, transparent) 65%,
        transparent 100%);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 2.5rem 2px;
}
.cash-headline-primary .cash-headline-value.negative {
    color: var(--red-muted);
}
.cash-headline-row[data-result="negative"] .cash-headline-primary-rule {
    background: linear-gradient(to bottom, var(--red-muted), color-mix(in srgb, var(--red-muted) 40%, transparent));
}

/* EST. chip — replaces the old "(estimate)" italic parens */
.estimate-chip {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
    padding: 0.08rem 0.38rem;
    border-radius: 999px;
    line-height: 1.35;
}

/* Caption footer — eyebrow + plain-English sentence */
.cash-headline-caption {
    margin: 1rem 0 0;
    padding-top: 0.7rem;
    font-size: 0.78rem;
    color: var(--charcoal-light);
    line-height: 1.5;
    border-top: 1px dashed color-mix(in srgb, var(--sand) 60%, transparent);
}
.cash-headline-caption .caption-eyebrow {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sage);
    margin-right: 0.5rem;
    padding-right: 0.55rem;
    border-right: 1px solid color-mix(in srgb, var(--sand) 80%, transparent);
}

/* --- Arithmetic bridge between Account Balances and Deployable Surplus --- */
.cash-bridge-grid {
    display: grid;
    grid-template-columns: 1.1fr minmax(220px, 0.9fr) 1fr;
    gap: 1rem;
    align-items: stretch;
}
.cash-bridge-grid--two-col {
    grid-template-columns: 1.1fr 1fr;
}
.cash-bridge-arithmetic {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
    animation: fadeInUp 0.4s ease-out backwards;
    animation-delay: 0.09s;
}
.cash-bridge-row {
    display: grid;
    grid-template-columns: 1.2rem 1fr auto;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--charcoal);
}
.cash-bridge-op {
    text-align: center;
    color: var(--charcoal-light);
    font-weight: 500;
}
.cash-bridge-amount {
    text-align: right;
    font-weight: 600;
    font-family: var(--font-heading);
}
.cash-bridge-amount.negative { color: var(--red-muted); }
.cash-bridge-label {
    font-size: 0.75rem;
    color: var(--charcoal-light);
    text-align: left;
    padding-left: 0.5rem;
}
.cash-bridge-base .cash-bridge-amount {
    font-size: 1.1rem;
    color: var(--charcoal);
}
.cash-bridge-rule {
    border-top: 1px solid var(--sand);
    margin: 0.25rem 0 0.15rem 1.6rem;
}
.cash-bridge-total .cash-bridge-amount {
    font-size: 1.35rem;
    color: var(--sage);
    font-weight: 700;
}
.cash-bridge-total .cash-bridge-label {
    color: var(--sage);
    font-weight: 600;
}

/* --- Account balance captions (plain-English names) --- */
.account-caption {
    font-size: 0.72rem;
    color: var(--charcoal-light);
    margin-top: 0.1rem;
    font-style: italic;
}

/* --- Capacity card extras --- */
.capacity-sublabel {
    font-size: 0.75rem;
    color: var(--charcoal-light);
    margin-top: 0.25rem;
    line-height: 1.4;
}
.capacity-estimate-caption {
    font-size: 0.72rem;
    color: var(--charcoal-light);
    margin-top: 0.85rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--sand);
    line-height: 1.4;
    font-style: italic;
}

/* --- Upcoming retreat rows --- */
/* --- Upcoming Retreat Row (editorial fact-sheet) --- */
.upcoming-retreat-row {
    --rail: var(--sage);
    --rail-soft: color-mix(in srgb, var(--sage) 18%, transparent);
    position: relative;
    padding: 0.9rem 0.25rem 0.85rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    transition: background 0.3s ease;
}
.upcoming-retreat-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65rem;
    bottom: 0.65rem;
    width: 3px;
    border-radius: 2px;
    background: var(--rail);
    opacity: 0.85;
    transition: background 0.3s ease, opacity 0.3s ease;
}
.upcoming-retreat-row:hover { background: var(--rail-soft); }
.upcoming-retreat-row:hover::before { opacity: 1; }
.upcoming-retreat-row + .upcoming-retreat-row {
    border-top: 1px solid color-mix(in srgb, var(--sand) 55%, transparent);
    margin-top: 0;
    padding-top: 0.95rem;
}
.upcoming-retreat-row[data-state="high"] { --rail: var(--green-muted); }
.upcoming-retreat-row[data-state="mid"]  { --rail: var(--gold); }
.upcoming-retreat-row[data-state="low"]  { --rail: var(--red-muted); }
.upcoming-retreat-row[data-state="new"]  { --rail: var(--sand); }

.upcoming-retreat-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.upcoming-retreat-title { min-width: 0; }
.upcoming-retreat-name {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--charcoal);
    margin: 0 0 0.2rem;
}
.upcoming-retreat-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.upcoming-retreat-date {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--charcoal-light);
}

/* Status badge (percent + label + traffic-light dot) */
.upcoming-retreat-status {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 0.3rem 0.55rem 0.3rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rail) 10%, var(--cream) 90%);
    border: 1px solid color-mix(in srgb, var(--rail) 35%, transparent);
}
.upcoming-retreat-status .status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--rail);
    align-self: center;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rail) 15%, transparent);
}
.upcoming-retreat-status .status-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--charcoal);
}
.upcoming-retreat-status .status-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--charcoal-light);
}

/* Figures block */
.upcoming-retreat-figures {
    display: flex;
    align-items: stretch;
    gap: 1.1rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
    font-variant-numeric: tabular-nums;
}
.upcoming-retreat-figures .figure {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 6.5rem;
}
.upcoming-retreat-figures .figure-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--charcoal-light);
    margin-bottom: 0.25rem;
}
.upcoming-retreat-figures .figure-label-hint {
    font-style: italic;
    letter-spacing: 0.02em;
    text-transform: none;
    opacity: 0.8;
}
.upcoming-retreat-figures .figure-value {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--charcoal);
}
.upcoming-retreat-figures .figure-value--target {
    color: var(--charcoal-light);
    font-weight: 500;
}
.upcoming-retreat-figures .figure-value--muted {
    font-weight: 400;
    font-style: italic;
    color: var(--charcoal-light);
    font-size: 0.95rem;
}
.upcoming-retreat-figures .figure-divider {
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--sand) 85%, transparent) 20%,
        color-mix(in srgb, var(--sand) 85%, transparent) 80%,
        transparent 100%
    );
    margin: 0.1rem 0;
}

/* Progress rail */
.progress-rail {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--sand-light);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
    overflow: visible;
    margin: 0.1rem 0 0.55rem;
}
.progress-rail-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--rail), color-mix(in srgb, var(--rail) 60%, var(--cream)));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 3px color-mix(in srgb, var(--rail) 30%, transparent);
    transition: width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.progress-rail-target {
    position: absolute;
    right: -1px;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--gold);
    border-radius: 1px;
    opacity: 0.75;
}
.progress-rail-target::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 5px;
    height: 5px;
    background: var(--gold);
    border-radius: 1px;
}
.progress-rail--flat {
    background: repeating-linear-gradient(
        45deg,
        var(--sand-light) 0,
        var(--sand-light) 5px,
        color-mix(in srgb, var(--sand-light) 70%, var(--sand)) 5px,
        color-mix(in srgb, var(--sand-light) 70%, var(--sand)) 10px
    );
    height: 6px;
}
.progress-rail-flat-fill { display: none; }

/* Caption footer */
.upcoming-retreat-caption {
    font-size: 0.75rem;
    color: var(--charcoal-light);
    line-height: 1.4;
    margin: 0;
}
.upcoming-retreat-caption .caption-eyebrow {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rail);
    margin-right: 0.45rem;
    padding-right: 0.45rem;
    border-right: 1px solid color-mix(in srgb, var(--sand) 80%, transparent);
}
.upcoming-retreat-row[data-state="new"] .caption-eyebrow { color: var(--charcoal-light); }
/* WP-016: collapsed summary footer for new-programme retreats with no
   historical forecast — keeps the card from filling with flat empty rows. */
.upcoming-no-forecast-summary {
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    color: var(--charcoal-light);
    font-size: 0.88rem;
    line-height: 1.5;
    border-top: 1px dashed var(--cream);
}
.upcoming-no-forecast-summary strong {
    color: var(--charcoal);
}
.upcoming-retreat-delivered .upcoming-retreat-head {
    color: var(--charcoal-light);
}
.new-programme-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--gold-light);
    color: #7a5a1a;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    margin-left: 0.25rem;
    vertical-align: baseline;
}
.urgent-warning {
    color: var(--red-muted);
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.25rem;
}
.delivered-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--charcoal-light);
    background: var(--sand-light);
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    margin-left: 0.35rem;
}

/* --- Progress bars --- */
.progress-bar-container {
    background: var(--sand-light);
    border-radius: 12px;
    height: 24px;
    overflow: hidden;
    position: relative;
}
.progress-bar-container.progress-bar-thin {
    height: 10px;
}
.progress-bar-container.progress-bar-flat {
    height: 10px;
    background: repeating-linear-gradient(
        45deg,
        var(--sand-light),
        var(--sand-light) 4px,
        #efe6d4 4px,
        #efe6d4 8px
    );
}
.progress-bar-flat-fill { display: none; }
.progress-bar-fill {
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--sage), var(--sage-light));
    transition: width 0.6s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.progress-bar-label {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 500;
}

/* --- Traffic lights --- */
.traffic-light {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.traffic-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
}
.traffic-dot.green { background: var(--green-muted); }
.traffic-dot.amber { background: var(--amber); }
.traffic-dot.red { background: var(--red-muted); }

/* --- Capacity callout --- */
.capacity-callout {
    background: linear-gradient(135deg, var(--gold-light), var(--sand-light));
    border: 1px solid var(--gold);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-align: center;
}
.capacity-number {
    font-size: 2rem;
    font-weight: 600;
    color: var(--charcoal);
    font-family: var(--font-heading);
}
.capacity-label {
    font-size: 0.8rem;
    color: var(--charcoal-light);
}

/* --- Controls bar --- */
.controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.controls select, .controls input {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.85rem;
    background: var(--white);
}

.date-range-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
.date-range-controls .range-label {
    font-size: 0.85rem;
    color: var(--charcoal);
    font-weight: 500;
}

.granularity-toggle {
    display: inline-flex;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    overflow: hidden;
}
.granularity-toggle button {
    padding: 0.4rem 0.75rem;
    border: none;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}
.granularity-toggle button.active {
    background: var(--sage);
    color: var(--white);
}
.granularity-toggle button:not(:last-child) {
    border-right: 1px solid var(--sand);
}

.programme-chart-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.programme-view-control {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.programme-view-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--charcoal-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.programme-view-toggle {
    box-shadow: var(--shadow-sm);
}

.programme-view-toggle button {
    min-width: 7.5rem;
    font-weight: 600;
}

/* --- Modal --- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 200;
    align-items: center;
    justify-content: center;
}
.modal-overlay.active { display: flex; }
body.modal-open {
    overflow: hidden;
}
.modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--charcoal-light);
}

/* --- Overview header (period selector + export PDF) --- */
.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.overview-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.overview-period-label {
    font-size: 0.85rem;
    color: var(--charcoal-light);
    font-weight: 500;
}
.overview-period-select {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.85rem;
    background: var(--white);
    color: var(--charcoal);
    cursor: pointer;
}
.overview-period-select:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
}

/* --- Retreat-name link (Overview → Retreat P&L) --- */
.retreat-link {
    color: var(--sage);
    text-decoration: none;
    font-weight: 500;
}
.retreat-link:hover,
.retreat-link:focus-visible {
    text-decoration: underline;
}
.retreat-link:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
}
.row-highlight {
    outline: 3px solid var(--sage);
    outline-offset: 3px;
    background: rgba(124, 148, 115, 0.08);
    scroll-margin-top: 5rem;
}

/* --- Waterfall drill-downs --- */
.waterfall-drilldowns {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* --- Admin page --- */
.admin-section {
    margin-bottom: 2rem;
}
.admin-section h3 {
    font-family: var(--font-heading);
    margin-bottom: 0.75rem;
}
.settings-form .form-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.settings-form label {
    min-width: 200px;
    font-size: 0.85rem;
    font-weight: 500;
}
.settings-form input {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.85rem;
    width: 120px;
}

/* --- CSV export button --- */
.export-btn {
    margin-left: auto;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .grid-3 { grid-template-columns: 1fr 1fr; }
    .grid-4 { grid-template-columns: 1fr 1fr; }
    .dashboard-header { flex-wrap: wrap; gap: 0.75rem; }
    .tab-nav { order: 3; width: 100%; }
}

@media (max-width: 600px) {
    /* Make the whole row visually active at tap-size. The anchor still
       handles the navigation; the row hint just improves tap affordance. */
    #recent-retreats-table tr:has(.retreat-link) {
        cursor: pointer;
    }
    #recent-retreats-table tr:has(.retreat-link):active {
        background: var(--sand-light);
    }
    .overview-header { align-items: stretch; }
    .overview-controls { width: 100%; justify-content: flex-start; }
}

/* --- Login enhancements --- */
.login-container {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(124,148,115,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(201,169,110,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(212,197,169,0.1) 0%, transparent 50%);
}

.login-card {
    animation: fadeInUp 0.5s ease-out both;
    border: 1px solid var(--sand-light);
}

.login-title {
    position: relative;
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
}
.login-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: linear-gradient(to right, var(--sage), var(--gold));
    border-radius: 1px;
}

/* --- Footer --- */
.dashboard-footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.75rem;
    color: var(--charcoal-light);
    opacity: 0.6;
    font-family: var(--font-heading);
    letter-spacing: 0.04em;
}

@media (max-width: 900px) {
    .cash-bridge-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .cash-headline-figures { flex-direction: column; align-items: stretch; }
    .cash-headline-result-group { flex-direction: column; }
    .cash-headline-sep { display: none; }
    .cash-headline-primary { order: -1; }
}

@media (max-width: 600px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .dashboard-main { padding: 1rem; }
    .controls { flex-direction: column; align-items: stretch; }
    .programme-view-control { align-items: stretch; width: 100%; }
    .programme-view-toggle { width: 100%; }
    .programme-view-toggle button { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================
   Calendar tab — retreat chips in a month × year grid.
   ============================================================= */

/* Programme palette — redundant with programme codes on each chip,
   tuned for deuteranopia by avoiding adjacent-green pairings. */
:root {
    --prog-earth-care:          #7C9473;  /* sage */
    --prog-earth-care-day:      #a3b89c;  /* sage-light */
    --prog-humanity-in-action:  #C9A96E;  /* gold */
    --prog-being-peace:         #3d7a7a;  /* teal */
    --prog-being-peace-day:     #6a9c9c;  /* teal-light */
    --prog-being-peace-evening: #2d5f5f;  /* teal-dark */
    --prog-sacred-places:       #8a5a7a;  /* plum */
    --prog-nourishing-roots:    #b07050;  /* terracotta */
    --prog-cat:                 #7a7a7a;  /* slate (discontinued) */
}

.calendar-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin: 0.5rem 0 1rem;
}

.calendar-metric-toggle {
    display: inline-flex;
    background: var(--white);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.metric-pill {
    background: transparent;
    border: none;
    padding: 0.5rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--charcoal-light);
    cursor: pointer;
    border-right: 1px solid var(--sand);
}
.metric-pill:last-child { border-right: none; }
.metric-pill:hover { background: var(--cream); }
.metric-pill.active {
    background: var(--sage);
    color: var(--white);
}
.metric-pill:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    font-size: 0.8rem;
    color: var(--charcoal-light);
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.legend-code {
    font-weight: 600;
    color: var(--charcoal);
    font-size: 0.72rem;
}

/* Scroll wrapper is the sticky ancestor for the year-label column. */
.calendar-scroll {
    overflow-x: auto;
    width: 100%;
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.data-status { font-size: 0.9rem; line-height: 1.5; color: var(--charcoal); }
.help-panel, .section-subtitle, .reports-note, .pnl-programme-totals__deck,
.pnl-specimen__explain { font-size: 0.95rem; line-height: 1.55; }
.reports-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.reports-row select { font: inherit; padding: 0.6rem; min-height: 44px; max-width: 100%; }
.reports-row .btn { white-space: normal; }
.calendar-scroll:focus-visible { outline: 2px solid var(--sage); }
.calendar-grid {
    display: grid;
    grid-template-columns: 90px repeat(12, minmax(105px, 1fr)) 115px;
    grid-auto-rows: minmax(70px, auto);
    min-width: 1465px;
}

.cal-h {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--charcoal-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.6rem 0.4rem;
    text-align: center;
    background: var(--cream);
    border-bottom: 1px solid var(--sand);
}
.cal-corner {
    position: sticky;
    left: 0;
    background: var(--cream);
    z-index: 3;
}

.cal-year-label {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--charcoal);
    padding: 0.5rem 0.6rem;
    background: var(--white);
    border-right: 1px solid var(--sand);
    border-bottom: 1px solid var(--cream);
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
}

.cal-cell {
    padding: 4px;
    border-right: 1px solid var(--cream);
    border-bottom: 1px solid var(--cream);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cal-year-total {
    padding: 0.5rem 0.6rem;
    border-left: 1px solid var(--sand);
    border-bottom: 1px solid var(--cream);
    background: var(--cream);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--charcoal);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.retreat-chip {
    --chip-colour: var(--sage);
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--chip-colour) 14%, var(--white));
    border: 1px solid var(--chip-colour);
    color: var(--charcoal);
    font-size: 0.68rem;
    font-weight: 500;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.retreat-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.retreat-chip:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
}

.chip-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: color-mix(in srgb, var(--chip-colour) 55%, var(--white));
    z-index: 0;
    transition: width 0.2s ease;
}
.chip-code {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: var(--charcoal);
    flex-shrink: 0;
}
.chip-val {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    font-size: 0.65rem;
    color: var(--charcoal-light);
    margin-left: auto;
    white-space: nowrap;
}

.retreat-chip--neg {
    border-color: var(--red-muted);
    background:
        repeating-linear-gradient(
            135deg,
            var(--red-light) 0,
            var(--red-light) 3px,
            var(--white) 3px,
            var(--white) 6px
        );
}
.retreat-chip--neg .chip-bar {
    background: color-mix(in srgb, var(--red-muted) 55%, var(--white));
}

.retreat-chip--upcoming {
    border-style: dashed;
    opacity: 0.65;
}

.cal-season-label {
    padding: 0.5rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--charcoal-light);
    background: var(--cream);
    border-top: 2px solid var(--sand);
    border-right: 1px solid var(--sand);
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
}
.cal-season-cell {
    position: relative;
    padding: 4px 4px 6px;
    border-top: 2px solid var(--sand);
    border-right: 1px solid var(--cream);
    background: var(--cream);
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.season-bar {
    height: 6px;
    background: var(--sage);
    border-radius: 2px;
    transition: width 0.2s ease;
}
.season-bar--neg { background: var(--red-muted); }
.season-val {
    font-size: 0.65rem;
    color: var(--charcoal-light);
    text-align: center;
    margin-top: 2px;
}
.cal-season-blank {
    border-top: 2px solid var(--sand);
    background: var(--cream);
}

.calendar-seasonality {
    margin-top: 0.75rem;
}
.seasonality-note {
    font-size: 0.8rem;
    color: var(--charcoal-light);
}

.calendar-loading {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    color: var(--charcoal-light);
}

@media (max-width: 600px) {
    .calendar-controls { flex-direction: column; align-items: stretch; }
    .calendar-metric-toggle { width: 100%; }
    .metric-pill { flex: 1; }
}

/* Participant estimate badges (plan v6.1) */
.estimate-badge {
    display: inline-block;
    padding: 0.08rem 0.35rem;
    margin-left: 0.25rem;
    border-radius: 3px;
    background: var(--sand, #ead8b5);
    color: var(--charcoal, #3d3d3d);
    font-size: 0.68rem;
    font-weight: 500;
    vertical-align: middle;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
.estimate-value {
    font-variant-numeric: tabular-nums;
}
.estimate-warn {
    color: var(--amber, #c68f00);
    cursor: help;
    font-size: 0.9em;
    vertical-align: middle;
}
.info-icon {
    /* Public Sans draws U+24D8 as a solid disc; use the system face's outline. */
    font-family: system-ui, 'Segoe UI Symbol', sans-serif;
    color: var(--charcoal-light, #999);
    font-size: 0.85em;
    cursor: help;
    margin-left: 0.15em;
}

/* Print: hide the badge and suffix "(estimated)" inline instead */
@media print {
    .estimate-badge { display: none; }
    .estimate-value::after { content: ' (estimated)'; font-size: 0.85em; color: #666; }
    .estimate-warn { display: none; }
}

/* Louder badge when the pricing that feeds the estimate hasn't been
   human-confirmed. Amber to read as "caution" without shouting red. */
.estimate-badge.estimate-badge-unverified {
    background: #f5c97a;
    color: #5a3f00;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.64rem;
}
@media print {
    /* Override the generic "(estimated)" suffix when this estimate is
       unverified — the more alarming label wins. Requires :has() but
       degrades gracefully: older browsers still show "(estimated)". */
    .estimate-value:has(+ .estimate-badge-unverified)::after,
    .estimate-value:has(~ .estimate-badge-unverified)::after {
        content: ' (unverified estimate)';
    }
}

/* --- Bursary allocation card (per-retreat targets from retreat_pricing.json) --- */
.bursary-allocation-card {
    background: #fff;
    border: 1px solid #d9ddd2;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}
.bursary-allocation-card .stat-label {
    font-size: 0.82rem;
    color: var(--charcoal-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}
.bursary-empty-state {
    font-size: 0.85rem;
    color: var(--charcoal-light);
    line-height: 1.5;
    padding: 0.75rem 0;
}
.bursary-empty-state code {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-size: 0.78rem;
}
.bursary-rows {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.bursary-row {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--sand-light);
}
.bursary-row:last-child {
    border-bottom: none;
}
.bursary-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
.bursary-row-name {
    font-weight: 600;
    font-size: 0.95rem;
}
.bursary-row-date {
    font-size: 0.78rem;
    color: var(--charcoal-light);
}
.bursary-row-body {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.2rem;
}
.bursary-row-count {
    font-size: 0.88rem;
    color: var(--charcoal);
}
.bursary-row-value {
    font-weight: 600;
    font-size: 1rem;
}
.bursary-row-caption {
    font-size: 0.75rem;
    color: var(--charcoal-light);
    margin-top: 0.2rem;
}
.bursary-pending {
    font-style: italic;
    color: var(--charcoal-light);
}
.bursary-footer {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--sand);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}
.bursary-footer-total {
    font-size: 0.9rem;
    color: var(--charcoal);
}
.bursary-footer-chip {
    font-size: 0.78rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    display: inline-block;
}
.bursary-chip-green {
    background: var(--green-muted);
    color: #fff;
}
.bursary-chip-amber {
    background: var(--amber);
    color: #fff;
}
.bursary-chip-neutral {
    background: var(--sand);
    color: var(--charcoal);
}
.bursary-caption {
    font-size: 0.72rem;
    color: var(--charcoal-light);
    line-height: 1.4;
    margin-top: 0.75rem;
}
.bursary-caption code {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.05rem 0.25rem;
    border-radius: 3px;
}

/* --- Account Balances: editorial ledger --- */
@keyframes ledgerBarSweep {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes ledgerFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ledger {
    padding-top: 0.15rem;
    font-feature-settings: "lnum" 1, "tnum" 1;
}
.ledger-entries {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ledger-entry {
    padding: 0.95rem 0 1rem;
    border-bottom: 1px solid var(--sand);
    position: relative;
    animation: ledgerFade 0.5s ease-out backwards;
}
.ledger-entry:first-child { padding-top: 0.3rem; }
.ledger-entry:nth-child(1) { animation-delay: 0.05s; }
.ledger-entry:nth-child(2) { animation-delay: 0.13s; }
.ledger-entry:nth-child(3) { animation-delay: 0.21s; }

.ledger-entry__top {
    display: grid;
    grid-template-columns: 1.6rem 1fr auto;
    align-items: baseline;
    column-gap: 0.75rem;
}
.ledger-entry__num {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--sage);
    text-align: right;
    line-height: 1;
}
.ledger-entry__label {
    font-family: var(--font-body);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--charcoal);
    line-height: 1;
}
.ledger-entry__figure {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--charcoal);
    letter-spacing: -0.01em;
    font-variant-numeric: lining-nums tabular-nums;
}
.ledger-entry__caption {
    margin: 0.4rem 0 0 2.35rem;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--charcoal-light);
    line-height: 1.3;
}
.ledger-entry__native {
    margin: 0.2rem 0 0 2.35rem;
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sage);
    font-variant-numeric: lining-nums tabular-nums;
}
.ledger-entry__share {
    margin: 0.75rem 0 0 2.35rem;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.7rem;
}
.ledger-entry__bar {
    height: 1px;
    background: var(--sand-light);
    position: relative;
    overflow: hidden;
}
.ledger-entry__bar-fill {
    position: absolute;
    inset: 0;
    width: var(--share, 0%);
    background: var(--gold);
    box-shadow: 0 0 0 0.5px var(--gold);
    transform-origin: left center;
    animation: ledgerBarSweep 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s backwards;
}
.ledger-entry__pct {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--charcoal-light);
    font-variant-numeric: lining-nums tabular-nums;
    min-width: 3ch;
    text-align: right;
}

.ledger-total {
    padding-top: 1rem;
    animation: ledgerFade 0.5s ease-out 0.32s backwards;
}
.ledger-flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: var(--sage);
    margin-bottom: 0.85rem;
}
.ledger-flourish::before,
.ledger-flourish::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--sand) 20%, var(--sand) 80%, transparent);
}
.ledger-flourish__mark {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: 0.2em;
    color: var(--sage);
    padding: 0 0.5rem;
    transform: translateY(-2px);
}
.ledger-total__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 0.8rem;
}
.ledger-total__label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    color: var(--charcoal);
    letter-spacing: 0.005em;
}
.ledger-total__figure {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 2.35rem;
    line-height: 1;
    color: var(--charcoal);
    letter-spacing: -0.015em;
    font-variant-numeric: lining-nums tabular-nums;
}
.ledger-total__caption {
    margin-top: 0.4rem;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--charcoal-light);
    line-height: 1.3;
}

/* Keep existing card hover shadow; tighten inner title spacing for ledger */
.card:has(.ledger) .card-title {
    margin-bottom: 0.35rem;
    letter-spacing: 0.005em;
}

/* --- Recent Retreats: editorial ledger rows --- */
@keyframes retreatRowFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes retreatBarSweep {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.retreat-ledger {
    font-feature-settings: "lnum" 1, "tnum" 1;
}
.retreat-ledger__body {
    display: flex;
    flex-direction: column;
}
.retreat-ledger__empty {
    padding: 1rem 0;
    color: var(--charcoal-light);
    font-style: italic;
    font-family: var(--font-heading);
}

.retreat-row {
    position: relative;
    padding: 1.1rem 0 1.2rem;
    border-bottom: 1px solid var(--sand);
    animation: retreatRowFade 0.45s ease-out backwards;
    animation-delay: calc(var(--row-i, 0) * 0.07s + 0.05s);
}
.retreat-row:first-child { padding-top: 0.4rem; }
.retreat-row:last-child { border-bottom: none; padding-bottom: 0.4rem; }

.retreat-row__head {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) auto;
    align-items: start;
    column-gap: 1.5rem;
    row-gap: 0.6rem;
}

.retreat-row__meta {
    min-width: 0;
}
.retreat-row__name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--charcoal);
    letter-spacing: -0.005em;
    margin: 0;
}
.retreat-row__name-link {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(to right, var(--sage) 40%, transparent 40%);
    background-size: 6px 1px;
    background-position: 0 100%;
    background-repeat: repeat-x;
    padding-bottom: 2px;
    transition: background-image 0.2s;
}
.retreat-row__name-link:hover,
.retreat-row__name-link:focus-visible {
    background-image: linear-gradient(to right, var(--sage), var(--sage));
    background-size: 100% 1px;
    outline: none;
}
.retreat-row__date {
    margin-top: 0.3rem;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.88rem;
    color: var(--charcoal-light);
    line-height: 1.3;
}
.retreat-row__date-month {
    color: var(--charcoal);
}
.retreat-row__date-sep {
    margin: 0 0.45rem;
    color: var(--sand);
    font-style: normal;
}
.retreat-row__date-rel {
    color: var(--charcoal-light);
}

.retreat-row__figures {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(5rem, auto);
    column-gap: 1.75rem;
    align-items: end;
    margin: 0;
}
.retreat-row__figures > div {
    text-align: right;
}
.retreat-row__fig-label {
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--charcoal-light);
    margin-bottom: 0.15rem;
}
.retreat-row__fig-value {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    color: var(--charcoal);
    font-variant-numeric: lining-nums tabular-nums;
    margin: 0;
    white-space: nowrap;
}
.retreat-row__fig--surplus .retreat-row__fig-value {
    font-weight: 700;
}
.retreat-row__fig-value.positive { color: var(--green-muted); }
.retreat-row__fig-value.negative { color: var(--red-muted); }
.retreat-row__fig-value.incomplete { color: var(--charcoal-light); font-style: italic; }

.retreat-row__ratio {
    margin-top: 0.95rem;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.85rem;
}
.retreat-row__bar {
    position: relative;
    height: 3px;
    background: var(--sand-light);
    display: flex;
    overflow: hidden;
}
.retreat-row__bar-exp,
.retreat-row__bar-sur,
.retreat-row__bar-over {
    height: 100%;
    width: var(--pct, 0%);
    transform-origin: left center;
    animation: retreatBarSweep 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    animation-delay: calc(var(--row-i, 0) * 0.07s + 0.2s);
}
.retreat-row__bar-exp { background: var(--sand); }
.retreat-row__bar-sur { background: var(--sage); }
.retreat-row__bar-over { background: var(--red-muted); }
.retreat-row__bar--incomplete {
    background: repeating-linear-gradient(
        -45deg,
        var(--sand-light) 0,
        var(--sand-light) 4px,
        transparent 4px,
        transparent 8px
    );
}
.retreat-row__margin {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--sage);
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
    min-width: 7ch;
    text-align: right;
}
.retreat-row__margin--loss { color: var(--red-muted); }
.retreat-row__margin--muted {
    color: var(--charcoal-light);
    font-style: italic;
    letter-spacing: 0.02em;
}

.retreat-row--incomplete {
    background: linear-gradient(to right, rgba(196, 122, 122, 0.03), transparent 60%);
}
.retreat-row--incomplete .retreat-row__name {
    color: var(--charcoal-light);
}
.retreat-row--loss .retreat-row__fig-value.negative { color: var(--red-muted); }

/* Narrow viewports: stack figures below the name */
@media (max-width: 720px) {
    .retreat-row__head {
        grid-template-columns: 1fr;
    }
    .retreat-row__figures {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 0.75rem;
        align-items: start;
    }
    .retreat-row__figures > div {
        text-align: left;
    }
    .retreat-row__fig-value { font-size: 1.2rem; }
}

/* ==========================================================================
   Retreat P&L — editorial specimen registry
   Extends the Overview's editorial ledger language: Playfair display figures,
   uppercase tracked labels, sand/gold/sage motifs, hairline rules.
   ========================================================================== */

@keyframes pnlFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pnlRuleIn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes pnlBarSweep {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.pnl-page {
    font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Neutralise the default section-title underline on this page — we draw our own rule. */
.pnl-page > .section-title { display: none; }

/* --- Masthead --- */
.pnl-masthead {
    text-align: center;
    padding: 0.75rem 0 1.25rem;
    animation: pnlFadeUp 0.55s ease-out backwards;
}
.pnl-masthead__eyebrow {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--sage);
    display: inline-flex;
    gap: 0.65rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.7rem;
}
.pnl-masthead__eyebrow-mark {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--gold);
    letter-spacing: 0;
    transform: translateY(-1px);
}
.pnl-masthead__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 2.85rem);
    line-height: 1.05;
    letter-spacing: -0.012em;
    color: var(--charcoal);
    margin: 0 auto;
    max-width: 30ch;
}
.pnl-masthead__amp {
    font-style: italic;
    font-weight: 400;
    color: var(--sage);
    padding: 0 0.06em;
}
.pnl-masthead__rule {
    display: block;
    width: min(26rem, 70%);
    height: 1px;
    margin: 0.85rem auto 0.75rem;
    background: linear-gradient(to right, transparent, var(--sand) 15%, var(--gold) 50%, var(--sand) 85%, transparent);
    transform-origin: center;
    animation: pnlRuleIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s backwards;
}
.pnl-masthead__deck {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--charcoal-light);
    max-width: 46rem;
    margin: 0 auto;
}

/* --- Hero metric strip --- */
.pnl-hero {
    background: var(--white);
    border-top: 1px solid var(--sand);
    border-bottom: 1px solid var(--sand);
    padding: 1.35rem 1.25rem 1.45rem;
    margin: 0 auto 1.5rem;
    position: relative;
    animation: pnlFadeUp 0.5s ease-out 0.08s backwards;
}
.pnl-hero::before,
.pnl-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--sand);
}
.pnl-hero::before { top: 4px; }
.pnl-hero::after { bottom: 4px; }

.pnl-hero__label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    text-align: center;
    color: var(--sage);
    display: flex;
    gap: 0.7rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
}
.pnl-hero__label > span[aria-hidden] {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--gold);
    letter-spacing: 0;
    transform: translateY(-1px);
}
.pnl-hero__figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem 0;
    align-items: end;
    justify-items: center;
    position: relative;
}
.pnl-hero__figure {
    text-align: center;
    padding: 0 1rem;
    position: relative;
    width: 100%;
}
.pnl-hero__figure + .pnl-hero__figure::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--sand) 25%, var(--sand) 75%, transparent);
}
.pnl-hero__fig-label {
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--charcoal-light);
    margin-bottom: 0.35rem;
}
.pnl-hero__fig-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    line-height: 1;
    color: var(--charcoal);
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -0.012em;
}
.pnl-hero__fig-value.negative { color: var(--red-muted); }
.pnl-hero__fig-value.positive { color: var(--sage); }
.pnl-hero__fig-note {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.76rem;
    color: var(--charcoal-light);
    margin-top: 0.35rem;
    line-height: 1.3;
}
.pnl-hero__caption {
    text-align: center;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--charcoal-light);
    margin-top: 1rem;
}
.pnl-hero__caption-mark {
    color: var(--gold);
    padding: 0 0.35rem;
}

/* --- Estimate banner — editorial variant --- */
.pnl-estimate-banner {
    background: linear-gradient(to right, var(--sand-light) 0%, #f0e7d4 100%);
    border: none;
    border-left: 3px solid var(--gold);
    border-right: 3px solid var(--gold);
    border-radius: 0;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--charcoal);
    padding: 0.85rem 1.15rem;
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
}
.pnl-estimate-banner__mark {
    color: var(--gold);
    font-style: normal;
    font-size: 0.9rem;
    transform: translateY(1px);
}

.pnl-help {
    background: transparent;
    border-left: 1px solid var(--sand);
    border-radius: 0;
    padding-left: 1rem;
    margin: 1rem 0 1.25rem;
}
.pnl-help > summary {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: 0.92rem;
    color: var(--sage);
    letter-spacing: 0.01em;
}
.pnl-help > summary::before {
    content: "\203A ";
    color: var(--gold);
    font-style: normal;
    margin-right: 0.25rem;
    transition: transform 0.2s;
}
.pnl-help[open] > summary::before {
    content: "\2304 ";
}

/* --- Filter ribbon --- */
.pnl-filterbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0 1rem;
    border-top: 1px solid var(--sand);
    border-bottom: 1px solid var(--sand);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.pnl-filterbar__clauses {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.65rem 1.15rem;
}
.pnl-filter {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
}
.pnl-filter__label {
    font-family: var(--font-body);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--charcoal-light);
}
.pnl-filter__select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    background-image: linear-gradient(to right, var(--sage) 40%, transparent 40%);
    background-size: 6px 1px;
    background-position: 0 100%;
    background-repeat: repeat-x;
    border: none;
    border-radius: 0;
    padding: 0.15rem 1.1rem 0.3rem 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    color: var(--charcoal);
    cursor: pointer;
    position: relative;
    background-origin: padding-box;
}
.pnl-filter__select:focus-visible {
    outline: none;
    background-image: linear-gradient(to right, var(--sage), var(--sage));
    background-size: 100% 1px;
}
.pnl-filter {
    position: relative;
}
.pnl-filter::after {
    content: "\2304";
    font-family: var(--font-heading);
    color: var(--sage);
    font-size: 0.75rem;
    position: absolute;
    right: 0.1rem;
    bottom: 0.35rem;
    pointer-events: none;
    line-height: 1;
}
.pnl-filter__pilcrow {
    color: var(--sand);
    font-size: 0.9rem;
    transform: translateY(-2px);
    align-self: center;
}
.pnl-export {
    background: none;
    border: none;
    padding: 0.1rem 0 0.3rem;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--sage);
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    background-image: linear-gradient(to right, var(--sage) 40%, transparent 40%);
    background-size: 6px 1px;
    background-position: 0 100%;
    background-repeat: repeat-x;
    transition: background-image 0.2s;
}
.pnl-export:hover,
.pnl-export:focus-visible {
    background-image: linear-gradient(to right, var(--sage), var(--sage));
    background-size: 100% 1px;
    outline: none;
}
.pnl-export__arrow {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.9rem;
    transition: transform 0.2s;
}
.pnl-export:hover .pnl-export__arrow {
    transform: translateX(3px);
}

/* --- Programme totals (editorial ledger table) --- */
.pnl-programme-totals {
    background: var(--white);
    padding: 1.15rem 1.35rem 1.25rem;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    border: 1px solid var(--sand-light);
    animation: pnlFadeUp 0.5s ease-out 0.1s backwards;
}
.pnl-programme-totals__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.2rem;
    flex-wrap: wrap;
}
.pnl-programme-totals__title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--charcoal);
    letter-spacing: 0.005em;
}
.pnl-programme-totals__deck {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--charcoal-light);
}
.pnl-programme-totals__rule {
    height: 1px;
    background: linear-gradient(to right, var(--sage) 0, var(--sand) 30%, var(--sand) 70%, transparent 100%);
    margin: 0.75rem 0 0.75rem;
}
.pnl-programme-totals__table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: lining-nums tabular-nums;
}
.pnl-programme-totals__table th {
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--charcoal-light);
    padding: 0.55rem 0.5rem;
    text-align: right;
    border-bottom: 1px solid var(--sand);
}
.pnl-programme-totals__table th:first-child { text-align: left; }
.pnl-programme-totals__table td {
    padding: 0.65rem 0.5rem;
    border-bottom: 1px solid var(--sand-light);
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--charcoal);
    text-align: right;
    font-variant-numeric: lining-nums tabular-nums;
}
.pnl-programme-totals__table tr:last-child td { border-bottom: none; }
.pnl-programme-totals__table td:first-child {
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--charcoal);
    letter-spacing: 0.01em;
}
.pnl-programme-totals__table td.pnl-ptotals-surplus {
    font-weight: 700;
    color: var(--sage);
}
.pnl-programme-totals__table td.pnl-ptotals-surplus.negative { color: var(--red-muted); }
.pnl-programme-totals__table td.pnl-ptotals-count {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--charcoal-light);
    font-size: 0.95rem;
}
.pnl-programme-totals__table tr.pnl-ptotals-grand td {
    border-top: 2px solid var(--charcoal);
    border-bottom: none;
    padding-top: 0.85rem;
    font-weight: 700;
    font-size: 1.1rem;
    background: linear-gradient(to right, rgba(201, 169, 110, 0.12), rgba(201, 169, 110, 0.04) 50%, transparent);
}
.pnl-programme-totals__table tr.pnl-ptotals-grand td:first-child {
    font-family: var(--font-heading);
    font-weight: 700;
    font-style: italic;
}

/* --- Specimens section heading --- */
.pnl-specimens__heading {
    text-align: center;
    margin: 1.75rem 0 1.4rem;
}
.pnl-specimens__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.45rem;
    letter-spacing: 0.01em;
    color: var(--charcoal);
    line-height: 1.2;
    margin: 0;
}
.pnl-specimens__rule {
    height: 1px;
    width: 6rem;
    margin: 0.6rem auto 0.55rem;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.pnl-specimens__deck {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.88rem;
    color: var(--charcoal-light);
    margin: 0;
}

/* --- Specimen grid + cards --- */
.pnl-specimens__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
    gap: 1.25rem;
}
.pnl-specimen--loading {
    color: var(--charcoal-light);
    font-family: var(--font-heading);
    font-style: italic;
    padding: 2rem 1rem;
    text-align: center;
}

.pnl-specimen {
    background: var(--white);
    border: 1px solid var(--sand-light);
    border-radius: var(--radius-lg);
    padding: 1.15rem 1.25rem 1.25rem;
    position: relative;
    text-align: left;
    font: inherit;
    color: inherit;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
    animation: pnlFadeUp 0.45s ease-out backwards;
    animation-delay: calc(var(--card-i, 0) * 0.05s + 0.1s);
}
.pnl-specimen::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--sage) 0%, var(--gold) 55%, var(--sand) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pnl-specimen:hover,
.pnl-specimen:focus-visible {
    border-color: var(--sand);
    box-shadow: 0 6px 22px rgba(58, 58, 58, 0.1);
    transform: translateY(-3px);
    outline: none;
}
.pnl-specimen:hover::before,
.pnl-specimen:focus-visible::before {
    transform: scaleX(1);
}
.pnl-specimen[disabled] {
    cursor: default;
}
.pnl-specimen--muted {
    background: var(--cream);
    box-shadow: none;
    opacity: 0.85;
}
.pnl-specimen--muted::before { display: none; }
.pnl-specimen--muted:hover { transform: none; box-shadow: none; }

.pnl-specimen--loss { border-color: rgba(196, 122, 122, 0.35); }
.pnl-specimen--loss::before {
    background: linear-gradient(to right, var(--red-muted) 0%, var(--gold) 60%, var(--sand) 100%);
}

.pnl-specimen__header {
    margin-bottom: 0.9rem;
}
.pnl-specimen__eyebrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 0.45rem;
}
.pnl-specimen__programme {
    color: var(--sage);
}
.pnl-specimen__status {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--charcoal-light);
    display: inline-flex;
    gap: 0.3rem;
    align-items: baseline;
}
.pnl-specimen__status--complete { color: var(--green-muted); }
.pnl-specimen__status--upcoming { color: var(--amber); }
.pnl-specimen__status-dot {
    font-family: var(--font-heading);
    font-style: normal;
    font-size: 0.65rem;
    transform: translateY(-2px);
}
.pnl-specimen__name {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--charcoal);
    line-height: 1.15;
    letter-spacing: -0.005em;
    margin: 0 0 0.35rem;
}
.pnl-specimen__date {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--charcoal-light);
    line-height: 1.3;
}
.pnl-specimen__date-sep {
    font-style: normal;
    color: var(--sand);
    margin: 0 0.4rem;
}

.pnl-specimen__note {
    font-family: var(--font-body);
    font-size: 0.74rem;
    color: var(--charcoal-light);
    margin: 0 0 0.85rem;
    padding: 0.45rem 0.6rem;
    background: var(--cream);
    border-left: 2px solid var(--sand);
    line-height: 1.45;
}
.pnl-specimen__note strong { color: var(--charcoal); font-weight: 600; }
.pnl-specimen__explain {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.88rem;
    color: var(--charcoal-light);
    line-height: 1.45;
    margin-top: 0.35rem;
}

.pnl-specimen__ledger {
    margin-top: auto;
    padding-top: 0.2rem;
}
.pnl-specimen__ledger-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    padding: 0.4rem 0;
    border-bottom: 1px dotted var(--sand);
    font-variant-numeric: lining-nums tabular-nums;
}
.pnl-specimen__ledger-row:first-child {
    border-top: 1px solid var(--sand);
    padding-top: 0.55rem;
}
.pnl-specimen__ledger-row--indent {
    padding-left: 0.85rem;
    position: relative;
}
.pnl-specimen__ledger-row--indent::before {
    content: "\2022";
    position: absolute;
    left: 0.1rem;
    top: 50%;
    transform: translateY(-55%);
    color: var(--sand);
    font-size: 0.8rem;
}
.pnl-specimen__ledger-label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--charcoal);
}
.pnl-specimen__ledger-label--sub {
    font-size: 0.76rem;
    color: var(--charcoal-light);
}
.pnl-specimen__ledger-value {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--charcoal);
    letter-spacing: -0.005em;
    white-space: nowrap;
}
.pnl-specimen__ledger-value--sub {
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--charcoal-light);
}
.pnl-specimen__ledger-row--gross {
    border-bottom: 1px solid var(--sand);
}
.pnl-specimen__ledger-row--gross .pnl-specimen__ledger-label,
.pnl-specimen__ledger-row--gross .pnl-specimen__ledger-value {
    font-weight: 600;
}

.pnl-specimen__surplus {
    margin-top: 0.55rem;
    padding-top: 0.65rem;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    border-top: 1px solid var(--gold);
    position: relative;
}
.pnl-specimen__surplus::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gold);
    opacity: 0.35;
}
.pnl-specimen__surplus-label {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--charcoal);
    letter-spacing: 0.005em;
}
.pnl-specimen__surplus-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.55rem;
    line-height: 1;
    color: var(--charcoal);
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -0.012em;
}
.pnl-specimen__surplus-value.positive { color: var(--sage); }
.pnl-specimen__surplus-value.negative { color: var(--red-muted); }

/* Sage/sand ratio bar under the surplus */
.pnl-specimen__ratio {
    margin-top: 0.85rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: center;
}
.pnl-specimen__bar {
    height: 3px;
    background: var(--sand-light);
    position: relative;
    overflow: hidden;
    display: flex;
}
.pnl-specimen__bar-seg {
    height: 100%;
    width: var(--pct, 0%);
    transform-origin: left center;
    animation: pnlBarSweep 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    animation-delay: calc(var(--card-i, 0) * 0.05s + 0.25s);
}
.pnl-specimen__bar-seg--exp { background: var(--sand); }
.pnl-specimen__bar-seg--over { background: var(--red-muted); }
.pnl-specimen__bar-seg--sur { background: var(--sage); }
.pnl-specimen__bar--incomplete {
    background: repeating-linear-gradient(
        -45deg,
        var(--sand-light) 0,
        var(--sand-light) 4px,
        transparent 4px,
        transparent 8px
    );
}
.pnl-specimen__margin {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sage);
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
    min-width: 6ch;
    text-align: right;
}
.pnl-specimen__margin--loss { color: var(--red-muted); }
.pnl-specimen__margin--muted {
    color: var(--charcoal-light);
    font-style: italic;
    letter-spacing: 0.02em;
}

/* Participant & paying-transaction annotations */
.pnl-specimen__annotations {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.15rem 0 0.75rem;
}
.pnl-specimen__ann {
    font-family: var(--font-body);
    font-size: 0.74rem;
    color: var(--charcoal-light);
    line-height: 1.4;
}
.pnl-specimen__ann strong {
    color: var(--charcoal);
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
}

/* Corner ornament on hover — almost invisible signature */
.pnl-specimen__corner {
    position: absolute;
    top: 0.7rem;
    right: 0.75rem;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--gold);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}
.pnl-specimen:hover .pnl-specimen__corner,
.pnl-specimen:focus-visible .pnl-specimen__corner {
    opacity: 0.85;
}

.pnl-specimen.row-highlight {
    animation: pnlFadeUp 0.45s ease-out, pnlSpecimenHighlight 2.5s ease-in-out;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.35), var(--shadow-md);
}
@keyframes pnlSpecimenHighlight {
    0%   { box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.6), var(--shadow-md); }
    100% { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0), var(--shadow-sm); }
}

/* --- Chart card --- */
.pnl-chart {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.4rem 1.25rem;
    box-shadow: var(--shadow-sm);
    margin-top: 2rem;
    animation: pnlFadeUp 0.5s ease-out 0.15s backwards;
    border-top: 2px solid transparent;
    border-image: linear-gradient(to right, var(--sage), var(--gold), var(--sand)) 1;
}
.pnl-chart__heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.pnl-chart__eyebrow {
    font-family: var(--font-body);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 0.25rem;
}
.pnl-chart__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--charcoal);
    margin: 0;
    letter-spacing: -0.005em;
}
.pnl-chart__deck {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    color: var(--charcoal-light);
    margin: 0.2rem 0 0;
    max-width: 40rem;
}
.pnl-chart__canvas {
    height: 320px;
    padding-top: 0.5rem;
}

/* --- Modal — editorial drilldown --- */
.pnl-modal {
    background: var(--white);
    border: 1px solid var(--sand);
    border-top: 4px solid var(--sage);
    padding: 1.5rem 1.75rem 1.75rem;
}
.pnl-modal__header {
    align-items: flex-start;
    margin-bottom: 0.25rem;
}
.pnl-modal__eyebrow {
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 0.4rem;
}
.pnl-modal__title {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--charcoal);
    margin: 0;
    letter-spacing: -0.01em;
}
.pnl-modal__rule {
    height: 1px;
    width: 3.5rem;
    background: var(--gold);
    margin-top: 0.75rem;
}
.pnl-modal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin: 1rem 0 1.15rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--charcoal-light);
}
.pnl-modal__meta-item { display: inline-flex; gap: 0.35rem; }
.pnl-modal__meta-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--charcoal-light);
}
.pnl-modal__meta-value {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-style: italic;
    color: var(--charcoal);
}
.pnl-modal__ledger {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: lining-nums tabular-nums;
}
.pnl-modal__ledger td {
    padding: 0.45rem 0.25rem;
    border-bottom: 1px dotted var(--sand);
}
.pnl-modal__ledger td:last-child {
    text-align: right;
    font-family: var(--font-heading);
    font-size: 1rem;
}
.pnl-modal__ledger tr.pnl-modal__section td {
    background: transparent;
    border-bottom: 1px solid var(--sand);
    font-family: var(--font-body);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sage);
    padding-top: 1rem;
}
.pnl-modal__ledger tr.pnl-modal__indent td:first-child {
    padding-left: 1.2rem;
    position: relative;
    color: var(--charcoal-light);
}
.pnl-modal__ledger tr.pnl-modal__indent td:first-child::before {
    content: "\2022";
    position: absolute;
    left: 0.35rem;
    color: var(--sand);
}
.pnl-modal__ledger tr.pnl-modal__total td {
    border-bottom: none;
    border-top: 1px solid var(--charcoal);
    font-weight: 700;
    padding-top: 0.75rem;
}
.pnl-modal__ledger tr.pnl-modal__grand td {
    border-top: 1px solid var(--gold);
    background: linear-gradient(to right, rgba(201, 169, 110, 0.12), transparent);
    font-weight: 700;
    padding-top: 0.85rem;
}
.pnl-modal__ledger tr.pnl-modal__grand td:first-child {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1rem;
}
.pnl-modal__ledger tr.pnl-modal__grand td:last-child {
    font-size: 1.35rem;
    font-weight: 700;
}
.pnl-modal__ledger tr.pnl-modal__grand .positive { color: var(--sage); }
.pnl-modal__ledger tr.pnl-modal__grand .negative { color: var(--red-muted); }

/* --- Narrow viewports --- */
@media (max-width: 640px) {
    .pnl-masthead__title { font-size: 2rem; }
    .pnl-hero { padding: 1.1rem 1rem 1.15rem; }
    .pnl-hero__figure + .pnl-hero__figure::before { display: none; }
    .pnl-specimens__grid { grid-template-columns: 1fr; }
    .pnl-filterbar { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
    .pnl-filter__pilcrow { display: none; }
}

/* Assistance summary shared by the overview and its print view. */
.overview-assistance-year { border-top: 1px solid #d9ddd2; padding: 1rem; margin-top: 1rem; background: #f3f4ee; border-radius: 8px; }
.overview-assistance-year h4 { margin: 0 0 .35rem; }
.overview-assistance-remaining { margin: .4rem 0; }
.overview-assistance-remaining strong { font-size: 2rem; display: block; color: #30463b; }
.overview-assistance-shares { margin: .5rem 0; }
.overview-assistance-shares > div { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; font-size: .85rem; }
.overview-assistance-shares dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.overview-assistance-bar { display: flex; height: 16px; margin: .8rem 0; background: #e6e9e1; border-radius: 3px; overflow: hidden; }
.overview-assistance-bar span { display: block; height: 100%; }
.overview-assistance-confirmed { background: #36584a; }
.overview-assistance-provisional { background: repeating-linear-gradient(135deg, #bd9653 0, #bd9653 4px, #f4e7cd 4px, #f4e7cd 8px); }
.overview-assistance-available { background: #b7cbb0; }
.overview-assistance-key { display: inline-block; width: .65rem; height: .65rem; margin-right: .4rem; }
.overview-assistance-share-bar { height: 8px; background: #e6e9e1; margin: .1rem 0 .6rem; }
.overview-assistance-share-bar span { display: block; height: 100%; background: #7c9b8c; }
.overview-assistance-shares > div.overview-assistance-share-bar { display: block; padding: 0; }

/* Trustee review: retain Canopy while making essential explanations readable. */
.pnl-masthead__deck, .pnl-programme-totals__deck, .pnl-hero__caption,
.pnl-chart__deck, .pnl-specimens__deck, .pnl-specimen__explain {
    font-style: normal; font-size: 0.95rem; line-height: 1.5;
    color: var(--charcoal-light);
}
.retreat-chip { min-height: 32px; height: auto; }
.chip-code { font-size: 0.75rem; }
.chip-val { font-size: 0.8rem; color: var(--charcoal); }
.traffic-dot { flex-shrink: 0; }
.section-subtitle em { font-style: normal; }