/* ===========================================================================
   Theme tokens.

   Every colour below names a surface, a hairline or a piece of type — the
   brand accents (the KPI gradients, the status greens and reds, the yellow
   scope line, the blue table head, the filter controls) are deliberately not
   tokenised, so they read the same in both themes.

   Light is the default: a document with no data-theme attribute gets the
   :root block. The dark block holds the dashboard's original navy values
   unchanged, so switching to dark reproduces the design exactly as it was.

   The attribute is set on <html> by the bootstrap script in App.razor before
   first paint, and flipped by the switch at the foot of the sidebar.
   =========================================================================== */

:root {
    color-scheme: light;

    /* page wash and overlays */
    --fc-overlay-faint : rgba(16, 42, 96, 0.038);
    --fc-overlay-soft  : rgba(16, 42, 96, 0.045);
    --fc-overlay-soft-2: rgba(16, 42, 96, 0.05);
    --fc-overlay-strong: rgba(16, 42, 96, 0.075);
    --fc-overlay-hover : rgba(16, 42, 96, 0.062);
    --fc-overlay-zebra : rgba(16, 42, 96, 0.028);
    --fc-page-bg       : #eef1f8;
    --fc-page-bg-2     : #eef1f8;
    --fc-page-glow     : rgba(120, 165, 235, 0.22);
    --fc-page-glow-0   : rgba(238, 241, 248, 0);
    --fc-page-glow-2   : rgba(120, 165, 235, 0.22);
    --fc-page-wash-a   : #f4f7fd;
    --fc-page-wash-b   : #e7ecf8;
    --fc-page-wash-c   : #e7ecf8;

    /* card surfaces */
    --fc-surface     : #ffffff;
    --fc-surface-2   : #ffffff;
    --fc-surface-3   : #ffffff;
    --fc-surface-deep: #f4f7fd;
    --fc-tfoot-bg    : #e6ecfa;
    --fc-tfoot-line  : #c9d5ee;

    /* sidebar rail */
    --fc-rail-a: #f8fafe;
    --fc-rail-b: #eef2fb;
    --fc-rail-c: #e4eaf6;

    /* hairlines and borders */
    --fc-hairline: rgba(16, 42, 96, 0.085);
    --fc-line    : rgba(23, 57, 128, 0.2);
    --fc-line-012: rgba(23, 57, 128, 0.12);
    --fc-line-014: rgba(23, 57, 128, 0.14);
    --fc-line-016: rgba(23, 57, 128, 0.16);
    --fc-line-018: rgba(23, 57, 128, 0.18);
    --fc-line-022: rgba(23, 57, 128, 0.22);
    --fc-line-025: rgba(23, 57, 128, 0.25);
    --fc-line-026: rgba(23, 57, 128, 0.26);
    --fc-line-03 : rgba(23, 57, 128, 0.3);
    --fc-line-035: rgba(23, 57, 128, 0.35);
    --fc-line-04 : rgba(23, 57, 128, 0.4);
    --fc-line-045: rgba(23, 57, 128, 0.45);
    --fc-line-05 : rgba(23, 57, 128, 0.5);
    --fc-line-w05: rgba(16, 42, 96, 0.07);
    --fc-line-w06: rgba(16, 42, 96, 0.08);
    --fc-line-w10: rgba(16, 42, 96, 0.1);
    --fc-line-w22: rgba(16, 42, 96, 0.14);

    /* type */
    --fc-ink       : #0e1d3c;
    --fc-ink-35d17a: #1e854c;
    --fc-ink-4a9fe0: #1e70ae;
    --fc-ink-4ade80: #188640;
    --fc-ink-4bd47a: #1f8442;
    --fc-ink-6b7590: #565e73;
    --fc-ink-6cc24a: #3d8122;
    --fc-ink-6f86ad: #445777;
    --fc-ink-7fe0a6: #208348;
    --fc-ink-898781: #5f5e59;
    --fc-ink-8b94ad: #485066;
    --fc-ink-8c9ab2: #445065;
    --fc-ink-8ee4ab: #1f8441;
    --fc-ink-8fa3c2: #394c69;
    --fc-ink-93a1b8: #414d62;
    --fc-ink-93e6ac: #1f853d;
    --fc-ink-98a1b8: #424a60;
    --fc-ink-98a5b9: #414c5f;
    --fc-ink-9aa3b5: #444c5d;
    --fc-ink-9ec5ff: #0052cc;
    --fc-ink-9fabc0: #3d495d;
    --fc-ink-9fc8ff: #0057cc;
    --fc-ink-9fd8ff: #0076c7;
    --fc-ink-a8b6cd: #35435c;
    --fc-ink-a9b8d4: #30405f;
    --fc-ink-b6c1d2: #334053;
    --fc-ink-b7bcc9: #3b414f;
    --fc-ink-b9c4d4: #323f52;
    --fc-ink-b9c6dc: #2b3c57;
    --fc-ink-bcd3f2: #233855;
    --fc-ink-c2cbdb: #2f3a4f;
    --fc-ink-c3c2b7: #49483d;
    --fc-ink-c5cddb: #2f3a4c;
    --fc-ink-c8d1e0: #2b384d;
    --fc-ink-cddff7: #20334d;
    --fc-ink-cfb894: #604c2b;
    --fc-ink-cfe0f8: #1f324d;
    --fc-ink-d7aaff: #6c00cc;
    --fc-ink-dbe3ef: #203048;
    --fc-ink-dfe6f0: #203045;
    --fc-ink-e1e0d9: #3c3a2f;
    --fc-ink-e2e9f4: #1d2d46;
    --fc-ink-e8eaf0: #262c3b;
    --fc-ink-eaf0f8: #1b2c42;
    --fc-ink-ee5b52: #ba1c12;
    --fc-ink-eef2f8: #1a2a40;
    --fc-ink-f2cf4a: #8a6f0a;
    --fc-ink-f4f4f2: #0e1d3c;
    --fc-ink-f5c842: #916f08;
    --fc-ink-f5d98a: #926f0c;
    --fc-ink-faint : #40526f;
    --fc-ink-ff8a80: #cc1000;
    --fc-ink-ffb38a: #cc4700;
    --fc-ink-ffcf8a: #a86300;
    --fc-ink-ffd166: #996b00;
    --fc-ink-ffd79a: #a86600;
    --fc-ink-ffe0b0: #a36300;
    --fc-ink-ffe9b0: #946b00;
    --fc-ink-fff   : #0e1d3c;
    --fc-ink-muted : #2d4465;
    --fc-ink-soft  : #303d52;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    /* page wash and overlays */
    --fc-overlay-faint : rgba(255, 255, 255, 0.035);
    --fc-overlay-soft  : rgba(255, 255, 255, 0.04);
    --fc-overlay-soft-2: rgba(255, 255, 255, 0.05);
    --fc-overlay-strong: rgba(255, 255, 255, 0.08);
    --fc-overlay-hover : rgba(255, 255, 255, 0.06);
    --fc-overlay-zebra : rgba(255, 255, 255, 0.022);
    --fc-page-bg       : #010e2f;
    --fc-page-bg-2     : #010721;
    --fc-page-glow     : rgba(6, 32, 86, 0.5);
    --fc-page-glow-0   : rgba(1, 7, 33, 0);
    --fc-page-glow-2   : rgba(6, 32, 86, 0.55);
    --fc-page-wash-a   : #020b28;
    --fc-page-wash-b   : #010423;
    --fc-page-wash-c   : #01051a;

    /* card surfaces */
    --fc-surface     : #011140;
    --fc-surface-2   : #01163e;
    --fc-surface-3   : #011447;
    --fc-surface-deep: #020b2b;
    --fc-tfoot-bg    : #021241;
    --fc-tfoot-line  : #0b2358;

    /* sidebar rail */
    --fc-rail-a: #0b1a38;
    --fc-rail-b: #081428;
    --fc-rail-c: #050b18;

    /* hairlines and borders */
    --fc-hairline: rgba(255, 255, 255, 0.055);
    --fc-line    : rgba(120, 165, 235, 0.2);
    --fc-line-012: rgba(120, 165, 235, 0.12);
    --fc-line-014: rgba(120, 165, 235, 0.14);
    --fc-line-016: rgba(120, 165, 235, 0.16);
    --fc-line-018: rgba(120, 165, 235, 0.18);
    --fc-line-022: rgba(120, 165, 235, 0.22);
    --fc-line-025: rgba(120, 165, 235, 0.25);
    --fc-line-026: rgba(120, 165, 235, 0.26);
    --fc-line-03 : rgba(120, 165, 235, 0.3);
    --fc-line-035: rgba(120, 165, 235, 0.35);
    --fc-line-04 : rgba(120, 165, 235, 0.4);
    --fc-line-045: rgba(120, 165, 235, 0.45);
    --fc-line-05 : rgba(120, 165, 235, 0.5);
    --fc-line-w05: rgba(255, 255, 255, 0.05);
    --fc-line-w06: rgba(255, 255, 255, 0.06);
    --fc-line-w10: rgba(255, 255, 255, 0.1);
    --fc-line-w22: rgba(255, 255, 255, 0.22);

    /* type */
    --fc-ink       : #ffffff;
    --fc-ink-35d17a: #35d17a;
    --fc-ink-4a9fe0: #4a9fe0;
    --fc-ink-4ade80: #4ade80;
    --fc-ink-4bd47a: #4bd47a;
    --fc-ink-6b7590: #6b7590;
    --fc-ink-6cc24a: #6cc24a;
    --fc-ink-6f86ad: #6f86ad;
    --fc-ink-7fe0a6: #7fe0a6;
    --fc-ink-898781: #898781;
    --fc-ink-8b94ad: #8b94ad;
    --fc-ink-8c9ab2: #8c9ab2;
    --fc-ink-8ee4ab: #8ee4ab;
    --fc-ink-8fa3c2: #8fa3c2;
    --fc-ink-93a1b8: #93a1b8;
    --fc-ink-93e6ac: #93e6ac;
    --fc-ink-98a1b8: #98a1b8;
    --fc-ink-98a5b9: #98a5b9;
    --fc-ink-9aa3b5: #9aa3b5;
    --fc-ink-9ec5ff: #9ec5ff;
    --fc-ink-9fabc0: #9fabc0;
    --fc-ink-9fc8ff: #9fc8ff;
    --fc-ink-9fd8ff: #9fd8ff;
    --fc-ink-a8b6cd: #a8b6cd;
    --fc-ink-a9b8d4: #a9b8d4;
    --fc-ink-b6c1d2: #b6c1d2;
    --fc-ink-b7bcc9: #b7bcc9;
    --fc-ink-b9c4d4: #b9c4d4;
    --fc-ink-b9c6dc: #b9c6dc;
    --fc-ink-bcd3f2: #bcd3f2;
    --fc-ink-c2cbdb: #c2cbdb;
    --fc-ink-c3c2b7: #c3c2b7;
    --fc-ink-c5cddb: #c5cddb;
    --fc-ink-c8d1e0: #c8d1e0;
    --fc-ink-cddff7: #cddff7;
    --fc-ink-cfb894: #cfb894;
    --fc-ink-cfe0f8: #cfe0f8;
    --fc-ink-d7aaff: #d7aaff;
    --fc-ink-dbe3ef: #dbe3ef;
    --fc-ink-dfe6f0: #dfe6f0;
    --fc-ink-e1e0d9: #e1e0d9;
    --fc-ink-e2e9f4: #e2e9f4;
    --fc-ink-e8eaf0: #e8eaf0;
    --fc-ink-eaf0f8: #eaf0f8;
    --fc-ink-ee5b52: #ee5b52;
    --fc-ink-eef2f8: #eef2f8;
    --fc-ink-f2cf4a: #f2cf4a;
    --fc-ink-f4f4f2: #f4f4f2;
    --fc-ink-f5c842: #f5c842;
    --fc-ink-f5d98a: #f5d98a;
    --fc-ink-faint : #7f93b5;
    --fc-ink-ff8a80: #ff8a80;
    --fc-ink-ffb38a: #ffb38a;
    --fc-ink-ffcf8a: #ffcf8a;
    --fc-ink-ffd166: #ffd166;
    --fc-ink-ffd79a: #ffd79a;
    --fc-ink-ffe0b0: #ffe0b0;
    --fc-ink-ffe9b0: #ffe9b0;
    --fc-ink-fff   : #fff;
    --fc-ink-muted : #9fb4d4;
    --fc-ink-soft  : #bcc7d8;
}

/* The page shells paint their own background; this stops the browser's white
   showing through behind them while a circuit is reconnecting or on overscroll. */
html, body {
    background-color: var(--fc-page-bg);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: var(--fc-ink-fff);
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    /* No forced top padding here any more — the new full-bleed dark Executive
       Summary home page needs to touch the top edge. Every other page opts
       back in via .faac-page-pad (see the FAAC dashboard section below). */
    padding-top: 0;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Compensates for the removal of the global forced `article` padding in
   MainLayout.razor.css (needed so the new full-bleed dark Executive Summary
   home page can render edge-to-edge). Every other page opts back in to
   left/right/top/bottom padding by wrapping its content in this class. */
.faac-page-pad {
    padding: 1.5rem 1.5rem 2rem 2rem;
}

.faac-placeholder-card {
    background: #f9f9f7;
    border: 1px solid #e1e0d9;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    max-width: 48rem;
    color: #33322f;
    line-height: 1.55;
}

.faac-placeholder-card p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   FAAC dashboard — chart chrome & ink, filter bar, KPI tiles, chart cards.
   Palette follows the Cowork "dataviz" skill's validated default categorical
   palette (fixed hue order, never reassigned): see Charts/ChartHelpers.cs.
   ========================================================================== */

.page-lede {
    color: #52514e;
    max-width: 62rem;
    margin-bottom: 1.25rem;
}

.faac-section-title {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
}

.faac-note {
    color: var(--fc-ink-898781);
    font-size: 0.9rem;
    margin-top: 1rem;
}

.faac-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    background: #f9f9f7;
    border: 1px solid #e1e0d9;
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.5rem;
}

.faac-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 10rem;
}

.faac-filter-field label {
    font-size: 0.8rem;
    color: #52514e;
    font-weight: 600;
}

.faac-filter-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.faac-filter-card {
    flex: 1 1 260px;
    min-width: 240px;
    border-color: #e1e0d9;
}

.faac-filter-card > .card-header {
    background: #f9f9f7;
    color: #52514e;
    font-weight: 600;
    font-size: 0.85rem;
}

.faac-filter-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.faac-reset-btn {
    height: 2.4rem;
}

.faac-loading {
    color: #52514e;
}

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

.faac-kpi-tile {
    background: #fcfcfb;
    border: 1px solid #e1e0d9;
    border-radius: 8px;
    padding: 1rem 1.2rem;
}

.faac-kpi-label {
    font-size: 0.82rem;
    color: #52514e;
}

.faac-kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0b0b0b;
    font-variant-numeric: tabular-nums;
    margin-top: 0.15rem;
}

.faac-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.faac-chart-card {
    background: #fcfcfb;
    border: 1px solid #e1e0d9;
    border-radius: 8px;
    padding: 0.75rem;
    min-width: 0;
}

.faac-chart-card-wide {
    grid-column: 1 / -1;
}

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

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

.faac-sparkline-card {
    background: #fcfcfb;
    border: 1px solid #e1e0d9;
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
}

.faac-chart, .faac-sparkline {
    width: 100%;
    height: auto;
    display: block;
}

.faac-grid {
    font-variant-numeric: tabular-nums;
}

/* SVG chart text/line roles (shared by every chart the Charts/ChartHelpers.cs builders emit) */
.chart-title {
    fill: #0b0b0b;
    font-size: 14px;
    font-weight: 600;
}

.chart-title-sm {
    fill: #52514e;
    font-size: 11px;
    font-weight: 600;
}

.chart-legend-label {
    fill: #52514e;
    font-size: 11px;
}

.chart-axis-label {
    fill: var(--fc-ink-898781);
    font-size: 10px;
}

.chart-value-label {
    fill: #0b0b0b;
    font-size: 10px;
    font-weight: 600;
}

.chart-value-label-sm {
    fill: #0b0b0b;
    font-size: 8px;
    font-weight: 600;
}

.chart-grid {
    stroke: var(--fc-ink-e1e0d9);
    stroke-width: 1;
}

.chart-baseline {
    stroke: var(--fc-ink-c3c2b7);
    stroke-width: 1;
}

/* ==========================================================================
   Part D — "Command Centre" dashboard additions: dark hero band, dark
   overview KPI tiles with accent bars, donut/treemap label roles, and small
   layout helpers. The rest of the page (rankings/distribution/trend charts,
   the States/LGCs grid pages) stays on the existing light chart-card theme
   above — only the hero + top KPI row adopt the reference images' dark look.
   ========================================================================== */

.faac-hero {
    background-image: linear-gradient(135deg, #0b1220 0%, #0f1b33 60%, #1a1030 100%);
    border-radius: 12px;
    padding: 1.6rem 1.9rem;
    margin-bottom: 1.5rem;
    color: var(--fc-ink-f4f4f2);
}

.faac-hero h1 {
    margin: 0 0 0.4rem;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.page-lede-dark {
    color: var(--fc-ink-b7bcc9);
    max-width: 62rem;
    margin-bottom: 0;
}

.faac-section-title-first {
    margin-top: 0.25rem;
}

.faac-note-tight {
    margin-top: 0.15rem;
}

.faac-kpi-sub {
    font-size: 0.75rem;
    color: var(--fc-ink-898781);
    margin-top: 0.2rem;
}

.faac-kpi-row-dark {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.faac-kpi-tile-dark {
    background: linear-gradient(160deg, #101a2e 0%, #0c1424 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 4px solid #2a78d6;
    border-radius: 8px;
    padding: 1rem 1.2rem;
    color: #f4f4f2;
}

.faac-kpi-tile-dark .faac-kpi-label {
    color: #9aa3b5;
}

.faac-kpi-tile-dark .faac-kpi-value {
    color: #ffffff;
}

.faac-kpi-tile-dark .faac-kpi-sub {
    color: #7c8598;
}

.faac-accent-0 { border-left-color: #2a78d6; }
.faac-accent-1 { border-left-color: #eb6834; }
.faac-accent-2 { border-left-color: #1baf7a; }
.faac-accent-3 { border-left-color: #eda100; }
.faac-accent-4 { border-left-color: #e87ba4; }

/* Donut / treemap text roles — these sit on top of saturated categorical
   fills rather than the page background, so they need light, high-contrast
   text rather than the dark chart-ink roles above. */
.donut-slice-label {
    fill: #ffffff;
    font-size: 10px;
    font-weight: 700;
}

.treemap-label {
    fill: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.treemap-value {
    fill: rgba(255, 255, 255, 0.92);
    font-size: 10px;
    font-weight: 600;
}

/* ==========================================================================
   Compare States / Compare LGCs head-to-head pages.
   ========================================================================== */

.faac-compare-picker-bar {
    flex-wrap: wrap;
}

.faac-compare-card-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.faac-compare-card {
    background: #fcfcfb;
    border: 1px solid #e1e0d9;
    border-top: 4px solid #2a78d6;
    border-radius: 8px;
    padding: 1rem 1.1rem;
}

.faac-compare-card-name {
    font-weight: 700;
    font-size: 1.02rem;
    margin-bottom: 0.6rem;
}

.faac-compare-metric-row {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 0.6rem;
}

.faac-compare-metric-row:last-of-type {
    margin-bottom: 0;
}

.faac-compare-metric-label {
    font-size: 0.72rem;
    color: var(--fc-ink-898781);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.faac-compare-metric-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0b0b0b;
    font-variant-numeric: tabular-nums;
}

.faac-compare-metric-sub {
    font-size: 0.75rem;
    color: var(--fc-ink-898781);
}

.faac-panel-title-light {
    font-size: 0.85rem;
    font-weight: 700;
    color: #52514e;
    margin-bottom: 0.6rem;
}

.faac-insights-list-light {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.faac-insights-list-light li {
    font-size: 0.85rem;
    line-height: 1.42;
    color: #33322f;
    padding-left: 1rem;
    position: relative;
}

.faac-insights-list-light li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2a78d6;
}

.faac-compare-table th, .faac-compare-table td {
    text-align: right;
    white-space: nowrap;
}

.faac-compare-table th:first-child, .faac-compare-table td:first-child {
    text-align: left;
}

.faac-compare-total-row td {
    border-top: 2px solid #c3c2b7;
}

.faac-lgc-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.faac-lgc-picker-cell {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}


/* ---------- Phones and small tablets -----------------------------------------------
   Every chart is drawn on a fixed pixel canvas sized for a desktop column. Squeezed
   into a ~350px phone column those canvases scale to a third, which renders an 11px
   axis label at 4px — decoration rather than data. Below 820px the chart is allowed to
   render at its authored size and the panel scrolls sideways instead, the same swipe
   the wide data tables already use, so every label stays full size.

   min-width keeps the narrow canvases (the gauges and dials) filling the panel exactly
   as they do today, since they are already wider than they need to be. The !important
   beats the per-page max-width caps, which exist to hold a chart inside a desktop grid
   column and have no meaning once the grid has collapsed to one column.              */
@media (max-width: 820px) {
    .so-panel, .gz-panel, .exec-panel, .ds-panel,
    .ta-map-body, .ta-band-panel, .de-map-body,
    *:has(> .faac-chart) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .faac-chart {
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        min-width: 100%;
        /* The panels are column flex boxes, so a chart left on width:auto would be
           stretched to the panel's width by the default stretch alignment and never
           reach its own size. These two opt out of that in a flex and a grid panel. */
        align-self: flex-start;
        justify-self: start;
    }
}

/* ---------------------------------------------------------------------------
   Chart chrome.

   The SVG builders are C# and emit their colours as presentation attributes,
   which cannot read a custom property. CSS beats a presentation attribute,
   though, so each chrome colour is matched by value here and handed a token
   instead. The dark value of every token is the literal the builder already
   emits, so dark charts are untouched; only light gets new values. Series
   colours and labels drawn on a filled shape are deliberately not listed.
   --------------------------------------------------------------------------- */

:root {
    --fc-chart-e8eef8    : #1b2a43;
    --fc-chart-e4e9f2    : #202c43;
    --fc-chart-dfe6f0    : #203045;
    --fc-chart-cfdcf0    : #20334f;
    --fc-chart-c2cbdb    : #2f3a4f;
    --fc-chart-b9c9e4    : #25395b;
    --fc-chart-9fb4d4    : #2d4465;
    --fc-chart-9fb0c8    : #374860;
    --fc-chart-9fabc0    : #3d495d;
    --fc-chart-8794ac    : #475267;
    --fc-chart-8697b5    : #41506b;
    --fc-chart-7f93b5    : #40526f;
    --fc-chart-7f8ca4    : #4b566a;
    --fc-chart-6b7590    : #565e73;
    --fc-chart-line-032  : rgba(16, 42, 96, 0.304);
    --fc-chart-line-022  : rgba(16, 42, 96, 0.209);
    --fc-chart-line-018  : rgba(16, 42, 96, 0.171);
    --fc-chart-line-016  : rgba(16, 42, 96, 0.152);
    --fc-chart-line-013  : rgba(16, 42, 96, 0.123);
    --fc-chart-line-012  : rgba(16, 42, 96, 0.114);
    --fc-chart-line-007  : rgba(16, 42, 96, 0.067);
    --fc-chart-grid      : rgba(23, 57, 128, 0.18);
    --fc-chart-track     : #e3e9f5;
    --fc-chart-chip      : rgba(16, 42, 96, 0.07);
    --fc-chart-ink-strong: #101c3d;
}

:root[data-theme="dark"] {
    --fc-chart-e8eef8    : #e8eef8;
    --fc-chart-e4e9f2    : #e4e9f2;
    --fc-chart-dfe6f0    : #dfe6f0;
    --fc-chart-cfdcf0    : #cfdcf0;
    --fc-chart-c2cbdb    : #c2cbdb;
    --fc-chart-b9c9e4    : #b9c9e4;
    --fc-chart-9fb4d4    : #9fb4d4;
    --fc-chart-9fb0c8    : #9fb0c8;
    --fc-chart-9fabc0    : #9fabc0;
    --fc-chart-8794ac    : #8794ac;
    --fc-chart-8697b5    : #8697b5;
    --fc-chart-7f93b5    : #7f93b5;
    --fc-chart-7f8ca4    : #7f8ca4;
    --fc-chart-6b7590    : #6b7590;
    --fc-chart-line-032  : rgba(255,255,255,0.32);
    --fc-chart-line-022  : rgba(255,255,255,0.22);
    --fc-chart-line-018  : rgba(255,255,255,0.18);
    --fc-chart-line-016  : rgba(255,255,255,0.16);
    --fc-chart-line-013  : rgba(255,255,255,0.13);
    --fc-chart-line-012  : rgba(255,255,255,0.12);
    --fc-chart-line-007  : rgba(255,255,255,0.07);
    --fc-chart-grid      : rgba(120, 165, 235, 0.18);
    --fc-chart-track     : #0d1b3f;
    --fc-chart-chip      : rgba(255,255,255,0.09);
    --fc-chart-ink-strong: #ffffff;
}

.faac-chart [fill="#e8eef8"], .faac-sparkline [fill="#e8eef8"] { fill: var(--fc-chart-e8eef8); }
.faac-chart [fill="#e4e9f2"], .faac-sparkline [fill="#e4e9f2"] { fill: var(--fc-chart-e4e9f2); }
.faac-chart [fill="#dfe6f0"], .faac-sparkline [fill="#dfe6f0"] { fill: var(--fc-chart-dfe6f0); }
.faac-chart [fill="#cfdcf0"], .faac-sparkline [fill="#cfdcf0"] { fill: var(--fc-chart-cfdcf0); }
.faac-chart [fill="#c2cbdb"], .faac-sparkline [fill="#c2cbdb"] { fill: var(--fc-chart-c2cbdb); }
.faac-chart [fill="#b9c9e4"], .faac-sparkline [fill="#b9c9e4"] { fill: var(--fc-chart-b9c9e4); }
.faac-chart [fill="#9fb4d4"], .faac-sparkline [fill="#9fb4d4"] { fill: var(--fc-chart-9fb4d4); }
.faac-chart [fill="#9fb0c8"], .faac-sparkline [fill="#9fb0c8"] { fill: var(--fc-chart-9fb0c8); }
.faac-chart [fill="#9fabc0"], .faac-sparkline [fill="#9fabc0"] { fill: var(--fc-chart-9fabc0); }
.faac-chart [fill="#8794ac"], .faac-sparkline [fill="#8794ac"] { fill: var(--fc-chart-8794ac); }
.faac-chart [fill="#8697b5"], .faac-sparkline [fill="#8697b5"] { fill: var(--fc-chart-8697b5); }
.faac-chart [fill="#7f93b5"], .faac-sparkline [fill="#7f93b5"] { fill: var(--fc-chart-7f93b5); }
.faac-chart [fill="#7f8ca4"], .faac-sparkline [fill="#7f8ca4"] { fill: var(--fc-chart-7f8ca4); }
.faac-chart [fill="#6b7590"], .faac-sparkline [fill="#6b7590"] { fill: var(--fc-chart-6b7590); }
.faac-chart [stroke="rgba(255,255,255,0.32)"], .faac-sparkline [stroke="rgba(255,255,255,0.32)"] { stroke: var(--fc-chart-line-032); }
.faac-chart [stroke="rgba(255,255,255,0.22)"], .faac-sparkline [stroke="rgba(255,255,255,0.22)"] { stroke: var(--fc-chart-line-022); }
.faac-chart [stroke="rgba(255,255,255,0.18)"], .faac-sparkline [stroke="rgba(255,255,255,0.18)"] { stroke: var(--fc-chart-line-018); }
.faac-chart [stroke="rgba(255,255,255,0.16)"], .faac-sparkline [stroke="rgba(255,255,255,0.16)"] { stroke: var(--fc-chart-line-016); }
.faac-chart [stroke="rgba(255,255,255,0.13)"], .faac-sparkline [stroke="rgba(255,255,255,0.13)"] { stroke: var(--fc-chart-line-013); }
.faac-chart [stroke="rgba(255,255,255,0.12)"], .faac-sparkline [stroke="rgba(255,255,255,0.12)"] { stroke: var(--fc-chart-line-012); }
.faac-chart [stroke="rgba(255,255,255,0.07)"], .faac-sparkline [stroke="rgba(255,255,255,0.07)"] { stroke: var(--fc-chart-line-007); }
.faac-chart [stroke="rgba(120, 165, 235, 0.18)"], .faac-sparkline [stroke="rgba(120, 165, 235, 0.18)"] { stroke: var(--fc-chart-grid); }
.faac-chart [fill="#0d1b3f"] { fill: var(--fc-chart-track); }
.faac-chart [fill="rgba(255,255,255,0.09)"] { fill: var(--fc-chart-chip); }
.faac-chart .fc-ink-strong { fill: var(--fc-chart-ink-strong); }
.faac-chart .faac-state-callout [fill="#ffffff"] { fill: var(--fc-chart-ink-strong); }