@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-lbqbc54ig8] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-lbqbc54ig8] {
    flex: 1;
}

.sidebar[b-lbqbc54ig8] {
    background-image: linear-gradient(180deg, var(--fc-rail-a) 0%, var(--fc-rail-b) 55%, var(--fc-rail-c) 100%);
}

.top-row[b-lbqbc54ig8] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-lbqbc54ig8]  a, .top-row[b-lbqbc54ig8]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-lbqbc54ig8]  a:hover, .top-row[b-lbqbc54ig8]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-lbqbc54ig8]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-lbqbc54ig8] {
        justify-content: space-between;
    }

    .top-row[b-lbqbc54ig8]  a, .top-row[b-lbqbc54ig8]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-lbqbc54ig8] {
        flex-direction: row;
    }

    .sidebar[b-lbqbc54ig8] {
        width: 268px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-lbqbc54ig8] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-lbqbc54ig8]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-lbqbc54ig8] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-lbqbc54ig8] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-lbqbc54ig8] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Sidebar navigation — command-centre theme.

   A deep navy rail with an emblem block at the top, one line icon per destination, a solid
   blue pill marking the current page, and summary cards at the foot. Everything is driven
   by currentColor so an icon brightens with its label rather than needing a second rule. */

.navbar-toggler[b-3zeuluwkrh] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.25rem;
    color: white;
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.65%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.5rem rgba(255, 255, 255, 0.08);
}

.navbar-toggler:checked[b-3zeuluwkrh] { background-color: rgba(255, 255, 255, 0.18); }

/* ---------- Brand ---------- */
.nav-brand[b-3zeuluwkrh] {
    padding: 0.95rem 1rem 0.85rem;
    border-bottom: 1px solid var(--fc-line-014);
}

.navbar-brand[b-3zeuluwkrh] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.faac-emblem[b-3zeuluwkrh] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
}

.faac-emblem svg[b-3zeuluwkrh] { width: 34px; height: 34px; display: block; }

/* The artwork's own blue is close to the rail behind it, so the sweep is lifted a few
   steps here and only here; the paths themselves carry no colour, which keeps the mark
   reusable on a light surface. */
.faac-emblem-sweep-a[b-3zeuluwkrh] { fill: #2f6fc4; }
.faac-emblem-sweep-b[b-3zeuluwkrh] { fill: #e02b36; }

.faac-brand-text[b-3zeuluwkrh] { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }

.faac-brand-mark[b-3zeuluwkrh] {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--fc-ink);
}

.faac-brand-sub[b-3zeuluwkrh] {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--fc-ink-4ade80);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 0.12rem;
}

/* ---------- Items ---------- */
.nav-item[b-3zeuluwkrh] { font-size: 0.82rem; padding: 0 0.35rem 0.12rem; }
.nav-item:first-of-type[b-3zeuluwkrh] { padding-top: 0.7rem; }

.nav-item[b-3zeuluwkrh]  .nav-link {
    color: var(--fc-ink-a9b8d4);
    background: none;
    border: none;
    border-radius: 9px;
    height: 2.35rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    line-height: 1.1;
    width: 100%;
    padding: 0 0.6rem;
    font-weight: 500;
    position: relative;
    transition: background-color 0.12s ease, color 0.12s ease;
}

    .nav-item[b-3zeuluwkrh]  .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.06);
       /* color: #ffffff;*/
        color: red;
    }

/* The current page is a solid pill with a brighter bar down its leading edge — the same
   treatment the reference dashboards use, and far easier to find than a tint. */
.nav-item[b-3zeuluwkrh]  a.active {
    background-color: #1d4ed8;
    background-image: linear-gradient(90deg, #1d4ed8 0%, #2563eb 100%);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 1px 10px rgba(29, 78, 216, 0.45);
}

.nav-item[b-3zeuluwkrh]  a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42rem;
    bottom: 0.42rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #7dd3fc;
}

.nav-ico[b-3zeuluwkrh] {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fc-ink-6f86ad);
}

.nav-ico[b-3zeuluwkrh]  svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-item[b-3zeuluwkrh]  .nav-link:hover .nav-ico,
.nav-item[b-3zeuluwkrh]  a.active .nav-ico { color: #ffffff; }

.nav-text[b-3zeuluwkrh] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Group labels and sub-items ---------- */
.nav-item-group-label[b-3zeuluwkrh] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;

    color: #5f74a0;
    padding: 0.55rem 0.95rem 0.3rem;
}

/* A hairline guide ties the children to their heading without indenting them off-screen. */
.nav-group[b-3zeuluwkrh] {
    position: relative;
    margin-left: 1.15rem;
    padding-left: 0.45rem;
    border-left: 1px solid var(--fc-line-018);
}

.nav-group .nav-item[b-3zeuluwkrh] { padding-left: 0; padding-right: 0.35rem; }

.nav-sub[b-3zeuluwkrh]  .nav-link {
    /*height: 1.30rem;*/
    height: 2.01rem;
    font-size: 0.795rem;
    gap: 0.5rem;
}

.nav-sub .nav-ico[b-3zeuluwkrh], .nav-sub .nav-ico[b-3zeuluwkrh]  svg { width: 15px; height: 15px; }

/* ---------- Foot cards ---------- */
.faac-nav-cards[b-3zeuluwkrh] {
    padding: 0.9rem 0.7rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faac-nav-card[b-3zeuluwkrh] {
    border-radius: 10px;
    padding: 0.6rem 0.7rem 0.65rem;
    border: 1px solid var(--fc-line);
    background: var(--fc-overlay-soft);
}

.faac-nav-card-about[b-3zeuluwkrh] {
    background: linear-gradient(160deg, rgba(29, 78, 216, 0.22), rgba(12, 28, 66, 0.35));
    border-color: rgba(96, 141, 224, 0.35);
}

.faac-nav-card-coverage[b-3zeuluwkrh] {
    background: linear-gradient(160deg, rgba(34, 197, 94, 0.14), rgba(8, 32, 24, 0.3));
    border-color: rgba(34, 197, 94, 0.3);
}

.faac-nav-card-head[b-3zeuluwkrh] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
}

.faac-card-ico[b-3zeuluwkrh] {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.faac-nav-card-about .faac-card-ico[b-3zeuluwkrh] { color: var(--fc-ink-ffd166); }
.faac-nav-card-coverage .faac-card-ico[b-3zeuluwkrh] { color: var(--fc-ink-4ade80); }

.faac-nav-card-label[b-3zeuluwkrh] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fc-ink-cfe0f8);
}

.faac-nav-card-value[b-3zeuluwkrh] {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--fc-ink);
    letter-spacing: 0.01em;
}

.faac-nav-card-meta[b-3zeuluwkrh] {
    font-size: 0.64rem;
    color: var(--fc-ink-muted);
    margin-top: 0.1rem;
}

.faac-nav-card-foot[b-3zeuluwkrh] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.62rem;
    color: var(--fc-ink-8fa3c2);
    margin-top: 0.35rem;
    padding-top: 0.32rem;
    border-top: 1px solid var(--fc-line-016);
}

.faac-nav-dot[b-3zeuluwkrh] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
    flex-shrink: 0;
}

.faac-nav-footer-value[b-3zeuluwkrh] {
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--fc-ink-cfe0f8);
    margin-top: 0.35rem;
}

.faac-nav-footer-sub[b-3zeuluwkrh] {
    font-size: 0.655rem;
    line-height: 1.35;
    color: var(--fc-ink-a9b8d4);
}

/* ---------- Scroller ---------- */
.nav-scrollable[b-3zeuluwkrh] { display: none; }
.navbar-toggler:checked ~ .nav-scrollable[b-3zeuluwkrh] { display: block; }

@media (min-width: 641px) {
    .navbar-toggler[b-3zeuluwkrh] { display: none; }

    .nav-scrollable[b-3zeuluwkrh] {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: calc(100vh - 4.1rem);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--fc-line-045) transparent;
    }

    .nav-scrollable[b-3zeuluwkrh]::-webkit-scrollbar { width: 8px; }
    .nav-scrollable[b-3zeuluwkrh]::-webkit-scrollbar-track { background: transparent; }
    .nav-scrollable[b-3zeuluwkrh]::-webkit-scrollbar-thumb {
        background: rgba(120, 165, 235, 0.35);
        border-radius: 4px;
    }
    .nav-scrollable[b-3zeuluwkrh]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.6); }
}

/* ---------- Theme switch ----------
   Sits between the last link and the summary cards. Both icons and both labels are
   in the markup; which pair shows is decided by the data-theme attribute on <html>,
   so the control reads correctly on first paint without waiting for a circuit. */
.faac-theme-row[b-3zeuluwkrh] {
    padding: 0.55rem 0.7rem 0;
    margin-top: 0.35rem;
    border-top: 1px solid var(--fc-line-016);
}

.faac-theme-toggle[b-3zeuluwkrh] {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0.55rem;
    border-radius: 9px;
    border: 1px solid var(--fc-line-018);
    background: var(--fc-overlay-soft);
    color: var(--fc-ink-a9b8d4);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.faac-theme-toggle:hover[b-3zeuluwkrh] {
    background: var(--fc-overlay-hover);
    color: var(--fc-ink);
    border-color: var(--fc-line-03);
}

.faac-theme-toggle:focus-visible[b-3zeuluwkrh] {
    outline: 2px solid #2f6fd0;
    outline-offset: 2px;
}

.faac-theme-ico[b-3zeuluwkrh] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f5c842;
}

.faac-theme-ico svg[b-3zeuluwkrh] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.faac-theme-label[b-3zeuluwkrh] { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The track is a plain pill; the knob is pushed across by the attribute, not by JS. */
.faac-theme-switch[b-3zeuluwkrh] {
    flex-shrink: 0;
    width: 30px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid var(--fc-line-03);
    background: var(--fc-overlay-strong);
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.faac-theme-knob[b-3zeuluwkrh] {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f5c842;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

/* Light is the default, so the light pair shows unless the dark attribute is set. */
.faac-theme-ico-moon[b-3zeuluwkrh], .faac-theme-label-dark[b-3zeuluwkrh] { display: none; }

:root[data-theme="dark"] .faac-theme-ico-sun[b-3zeuluwkrh],
:root[data-theme="dark"] .faac-theme-label-light[b-3zeuluwkrh] { display: none; }

:root[data-theme="dark"] .faac-theme-ico-moon[b-3zeuluwkrh] { display: inline-flex; color: #9fc8ff; }
:root[data-theme="dark"] .faac-theme-label-dark[b-3zeuluwkrh] { display: block; }
:root[data-theme="dark"] .faac-theme-knob[b-3zeuluwkrh] { transform: translateX(14px); background: #9fc8ff; }
:root[data-theme="dark"] .faac-theme-switch[b-3zeuluwkrh] { background: rgba(120, 165, 235, 0.28); }

@media (prefers-reduced-motion: reduce) {
    .faac-theme-toggle[b-3zeuluwkrh], .faac-theme-switch[b-3zeuluwkrh], .faac-theme-knob[b-3zeuluwkrh] { transition: none; }
}

/* The hamburger's glyph is a data URI, so it cannot be driven by a token. The light
   rail gets its own copy with dark strokes; the dark block restores the original. */
.navbar-toggler[b-3zeuluwkrh] {
    color: #16204a;
    border-color: rgba(23, 57, 128, 0.2);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2822, 32, 74, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.5rem rgba(16, 42, 96, 0.05);
}

.navbar-toggler:checked[b-3zeuluwkrh] { background-color: rgba(16, 42, 96, 0.1); }

:root[data-theme="dark"] .navbar-toggler[b-3zeuluwkrh] {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.12);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.65%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.5rem rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .navbar-toggler:checked[b-3zeuluwkrh] { background-color: rgba(255, 255, 255, 0.18); }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-cf6af7l89g],
.components-reconnect-repeated-attempt-visible[b-cf6af7l89g],
.components-reconnect-failed-visible[b-cf6af7l89g],
.components-pause-visible[b-cf6af7l89g],
.components-resume-failed-visible[b-cf6af7l89g],
.components-rejoining-animation[b-cf6af7l89g] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-cf6af7l89g],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-cf6af7l89g],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-cf6af7l89g],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-cf6af7l89g],
#components-reconnect-modal.components-reconnect-retrying[b-cf6af7l89g],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-cf6af7l89g],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-cf6af7l89g],
#components-reconnect-modal.components-reconnect-failed[b-cf6af7l89g],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-cf6af7l89g] {
    display: block;
}


#components-reconnect-modal[b-cf6af7l89g] {
    /* The dashboard is dark end to end; the stock white card reads as a browser error.
       Phones surface this panel often — screen locks and network handoffs both drop the
       circuit — so it is worth looking like part of the app. */
    background-color: #020b2b;
    color: #e8eaf0;
    font-size: 0.92rem;
    width: min(20rem, calc(100vw - 2.5rem));
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid rgba(120, 165, 235, 0.28);
    border-radius: 0.6rem;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-cf6af7l89g 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-cf6af7l89g 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-cf6af7l89g 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-cf6af7l89g]::backdrop {
    background-color: rgba(1, 7, 33, 0.72);
    animation: components-reconnect-modal-fadeInOpacity-b-cf6af7l89g 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-cf6af7l89g {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-cf6af7l89g {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-cf6af7l89g {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-cf6af7l89g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-cf6af7l89g] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-cf6af7l89g] {
    border: 0;
    background-color: #1d4ed8;
    color: #f2f7ff;
    padding: 6px 26px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
}

    #components-reconnect-modal button:hover[b-cf6af7l89g] {
        background-color: #2563eb;
    }

    #components-reconnect-modal button:active[b-cf6af7l89g] {
        background-color: #1d4ed8;
    }

.components-rejoining-animation[b-cf6af7l89g] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-cf6af7l89g] {
        position: absolute;
        border: 3px solid #7dd3fc;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-cf6af7l89g 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-cf6af7l89g] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-cf6af7l89g {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AskFaac.razor.rz.scp.css */
/* Ask FAAC: header, conversation thread and composer, in the dashboard's own surfaces. */

.af-page[b-kc527vosq2] {
    background-color: var(--fc-page-bg);
    background-image:
        radial-gradient(120% 80% at 50% 0%, var(--fc-page-glow) 0%, var(--fc-page-glow-0) 70%),
        linear-gradient(180deg, var(--fc-page-wash-a) 0%, var(--fc-page-bg) 55%, var(--fc-page-wash-b) 100%);
    color: var(--fc-ink);
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
    display: flex;
    flex-direction: column;
}

/* ---------- Header ---------- */
.af-top[b-kc527vosq2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.4rem;
}

.af-brand-text h1[b-kc527vosq2] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--fc-ink);
}

.af-brand-sub[b-kc527vosq2] {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    color: var(--fc-ink-f5c842);
    margin-top: 0.1rem;
}

.af-ghost[b-kc527vosq2] {
    appearance: none;
    background: var(--fc-surface);
    color: var(--fc-ink);
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.af-ghost:hover:not(:disabled)[b-kc527vosq2] { background: var(--fc-overlay-hover); }
.af-ghost:disabled[b-kc527vosq2] { opacity: 0.5; cursor: default; }

/* ---------- Notices ---------- */
.af-notice[b-kc527vosq2] {
    margin: 0 0.75rem 0.5rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    background: var(--fc-surface);
    font-size: 0.82rem;
    line-height: 1.45;
}

.af-notice-warn[b-kc527vosq2] {
    border-color: rgba(245, 200, 66, 0.55);
    background: rgba(245, 200, 66, 0.1);
}

.af-notice code[b-kc527vosq2] {
    font-size: 0.78rem;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    background: var(--fc-overlay-strong);
}

/* ---------- Shell: thread + composer ---------- */
.af-shell[b-kc527vosq2] {
    flex: 1;
    min-height: 26rem;
    height: calc(100vh - 7.5rem);
    display: flex;
    flex-direction: column;
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 12px;
    overflow: hidden;
}

.af-thread[b-kc527vosq2] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    scroll-behavior: smooth;
}

.af-thread[b-kc527vosq2]::-webkit-scrollbar { width: 9px; }
.af-thread[b-kc527vosq2]::-webkit-scrollbar-track { background: var(--fc-overlay-soft); }
.af-thread[b-kc527vosq2]::-webkit-scrollbar-thumb { background: var(--fc-line-045); border-radius: 6px; }

/* ---------- Welcome ---------- */
.af-welcome[b-kc527vosq2] {
    margin: auto;
    max-width: 44rem;
    text-align: center;
    padding: 1rem 0.5rem;
}

.af-welcome-title[b-kc527vosq2] {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
}

.af-welcome p[b-kc527vosq2] {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--fc-ink-muted);
    margin: 0 auto 0.9rem;
}

.af-chips[b-kc527vosq2] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.af-chip[b-kc527vosq2] {
    appearance: none;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--fc-line-035);
    background: var(--fc-overlay-soft);
    color: var(--fc-ink);
    cursor: pointer;
    text-align: left;
}

.af-chip:hover:not(:disabled)[b-kc527vosq2] { background: var(--fc-overlay-strong); border-color: var(--fc-line-05); }
.af-chip:disabled[b-kc527vosq2] { opacity: 0.5; cursor: default; }

/* ---------- Messages ---------- */
.af-row[b-kc527vosq2] { display: flex; gap: 0.6rem; min-width: 0; }
.af-row-user[b-kc527vosq2] { justify-content: flex-end; }
.af-row-bot[b-kc527vosq2] { justify-content: flex-start; align-items: flex-start; }

.af-bubble[b-kc527vosq2] {
    max-width: min(34rem, 85%);
    padding: 0.55rem 0.85rem;
    border-radius: 14px 14px 4px 14px;
    background: linear-gradient(135deg, #0a4d9f 0%, #2563eb 100%);
    color: #ffffff;
    font-size: 0.88rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.af-avatar[b-kc527vosq2] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #011f45 0%, #0a4d9f 100%);
    border: 1px solid var(--fc-line-035);
}

.af-bot[b-kc527vosq2] {
    min-width: 0;
    flex: 0 1 auto;
    max-width: min(54rem, calc(100% - 42px));
    padding: 0.6rem 0.85rem 0.7rem;
    border-radius: 4px 14px 14px 14px;
    background: var(--fc-overlay-soft);
    border: 1px solid var(--fc-line-018);
    font-size: 0.88rem;
    line-height: 1.55;
}

.af-bot-error[b-kc527vosq2] {
    border-color: rgba(238, 91, 82, 0.55);
    background: rgba(238, 91, 82, 0.08);
}

/* The answer text is injected as markup (MarkupString), which carries no scope attribute,
   so these rules reach it through ::deep. */
.af-md[b-kc527vosq2]  p { margin: 0 0 0.55rem; }
.af-md[b-kc527vosq2]  p:last-child { margin-bottom: 0; }
.af-md[b-kc527vosq2]  ul, .af-md[b-kc527vosq2]  ol { margin: 0 0 0.55rem; padding-left: 1.2rem; }
.af-md[b-kc527vosq2]  li { margin-bottom: 0.15rem; }
.af-md[b-kc527vosq2]  h4 { font-size: 0.86rem; font-weight: 800; margin: 0.6rem 0 0.3rem; }
.af-md[b-kc527vosq2]  strong { font-weight: 800; }
.af-md[b-kc527vosq2]  code {
    font-size: 0.78rem;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    background: var(--fc-overlay-strong);
}

.af-md[b-kc527vosq2]  .af-md-table { overflow-x: auto; margin: 0.3rem 0 0.55rem; }
.af-md[b-kc527vosq2]  table { border-collapse: collapse; font-size: 0.8rem; }
.af-md[b-kc527vosq2]  th, .af-md[b-kc527vosq2]  td { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--fc-hairline); text-align: left; white-space: nowrap; }
.af-md[b-kc527vosq2]  th { font-weight: 700; background: var(--fc-tfoot-bg); }

/* ---------- Audit trail ---------- */
.af-trace[b-kc527vosq2] {
    margin-top: 0.6rem;
    font-size: 0.72rem;
    color: var(--fc-ink-muted);
}

.af-trace summary[b-kc527vosq2] { cursor: pointer; font-weight: 700; letter-spacing: 0.02em; }
.af-trace ul[b-kc527vosq2] { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.af-trace li[b-kc527vosq2] { margin-bottom: 0.25rem; overflow-wrap: anywhere; }
.af-trace-tool[b-kc527vosq2] { font-weight: 700; color: var(--fc-ink); }
.af-trace-args[b-kc527vosq2] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.68rem; }

/* ---------- Typing indicator ---------- */
.af-typing[b-kc527vosq2] { display: flex; align-items: center; gap: 0.3rem; }
.af-dot[b-kc527vosq2] { width: 7px; height: 7px; border-radius: 50%; background: var(--fc-ink-muted); opacity: 0.4; animation: af-bounce-b-kc527vosq2 1.1s infinite ease-in-out; }
.af-dot:nth-child(2)[b-kc527vosq2] { animation-delay: 0.15s; }
.af-dot:nth-child(3)[b-kc527vosq2] { animation-delay: 0.3s; }
.af-typing-text[b-kc527vosq2] { margin-left: 0.4rem; font-size: 0.78rem; color: var(--fc-ink-muted); }

@keyframes af-bounce-b-kc527vosq2 {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
    40% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .af-dot[b-kc527vosq2] { animation: none; opacity: 0.7; }
    .af-thread[b-kc527vosq2] { scroll-behavior: auto; }
}

/* ---------- Composer ---------- */
.af-composer[b-kc527vosq2] {
    display: flex;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-top: 1px solid var(--fc-line);
    background: var(--fc-surface-deep);
}

.af-input[b-kc527vosq2] {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 0.9rem;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--fc-line-035);
    background: #ffffff;
    color: #161b26;
}

.af-input[b-kc527vosq2]::placeholder { color: #7a8494; }
.af-input:focus[b-kc527vosq2] { outline: 2px solid #2b8ad3; outline-offset: 1px; }
.af-input:disabled[b-kc527vosq2] { opacity: 0.7; }

.af-send[b-kc527vosq2] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #0a4d9f 0%, #2563eb 100%);
    cursor: pointer;
}

.af-send svg[b-kc527vosq2] { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.af-send:hover:not(:disabled)[b-kc527vosq2] { filter: brightness(1.08); }
.af-send:disabled[b-kc527vosq2] { opacity: 0.5; cursor: default; }

.af-foot[b-kc527vosq2] {
    padding: 0.35rem 0.9rem 0.55rem;
    font-size: 0.66rem;
    color: var(--fc-ink-muted);
    background: var(--fc-surface-deep);
}

@media (max-width: 640.98px) {
    .af-shell[b-kc527vosq2] { height: calc(100vh - 9rem); }
    .af-brand-sub[b-kc527vosq2] { font-size: 0.85rem; }
    .af-send span[b-kc527vosq2] { display: none; }
    .af-bot[b-kc527vosq2] { max-width: calc(100% - 38px); }
}
/* /Components/Pages/CompareLgcs.razor.rz.scp.css */
/* LGC Head-to-Head Comparison — same dark surfaces, filter bar, panels, table and
   insight blocks as the rest of the dashboard, with one addition: a card per compared
   council, carrying the colour that council keeps across every chart on the page.

   Chart canvas widths are set in the razor to match the column each chart sits in,
   because an SVG's type scales with its panel: rendered px = font units x panel width
   / canvas width. Matching them is what makes every chart come out at one type size. */

.so-page[b-ygcwsgipd6] {
    background-color: var(--fc-page-bg);
    background-image:
        radial-gradient(120% 80% at 50% 0%, var(--fc-page-glow) 0%, var(--fc-page-glow-0) 70%),
        linear-gradient(180deg, var(--fc-page-wash-a) 0%, var(--fc-page-bg) 55%, var(--fc-page-wash-b) 100%);
    color: var(--fc-ink-e8eaf0);
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top row: brand block + light filter bar (Geopolitical Zones shape) ------ */
.sa-top[b-ygcwsgipd6] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.sa-top1[b-ygcwsgipd6] {
    /* display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    grid-template-columns: max-content 1fr;*/
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    gap: 0.6rem; /* Puts space between the stacked items */
    margin-bottom: 0.6rem;
    display: flex;
    width: 100%; /* Ensures the parent itself spans full width */
}

.sa-brand[b-ygcwsgipd6] {
    /*background: #020b2b;
    border: 1px solid var(--fc-line);
    border-radius: 10px;*/
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Sized to its own content, as on the State Disbursement Records page: a fixed
       285px was cut for the small two-line label and clips the larger heading. */
    min-width: 0;
}

.sa-brand-logo[b-ygcwsgipd6] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-brand-text[b-ygcwsgipd6] { min-width: 0; }

/* Two lines, two colours — the header the Executive Summary, Geopolitical Zones, State
   Analysis and State Disbursement Records pages already use: the page name in white,
   and under it the period or scope currently in view, in amber. */
.sa-brand-text h1[b-ygcwsgipd6] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--fc-ink);
}

.sa-brand-sub[b-ygcwsgipd6] {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    color: var(--fc-ink-f5c842);
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
/* Filter bar: the font sizes and spacing of the Geopolitical Zones bar, which is
   the reference for this control across the dashboard. Only the type scale and the
   gaps differ from what was here before — the colours, borders and the chevron were
   already the same. */
.sa-filter[b-ygcwsgipd6] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.sa-field[b-ygcwsgipd6] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    margin-right:0.5rem;
}

.sa-field label[b-ygcwsgipd6] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.sa-field-pair[b-ygcwsgipd6] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.sa-select[b-ygcwsgipd6] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.8rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.sa-select:focus[b-ygcwsgipd6] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.sa-seg-row[b-ygcwsgipd6] {
    display: flex;
    gap: 0.18rem;
}

.sa-seg[b-ygcwsgipd6] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
    margin-left:0.5rem;

}

.sa-seg:hover[b-ygcwsgipd6] { background: #e2e7f3; }

.sa-seg-on[b-ygcwsgipd6] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.sa-search[b-ygcwsgipd6] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.sa-search-icon[b-ygcwsgipd6] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--fc-ink-6b7590);
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.sa-search-input[b-ygcwsgipd6] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.sa-search-input[b-ygcwsgipd6]::placeholder { color: var(--fc-ink-98a1b8); }

/* Buttons are as wide as their word and no wider. */
.sa-btn[b-ygcwsgipd6] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-decoration: none;
    margin-left:0.5rem;
    margin-right:0.5rem;
}

.sa-btn-apply[b-ygcwsgipd6] { background: #058940; }
.sa-btn-apply:hover[b-ygcwsgipd6] { background: #047235; }
.sa-btn-apply:disabled[b-ygcwsgipd6] { background: #6f8f7c; cursor: default; }
.sa-btn-reset[b-ygcwsgipd6] { background: #8216d8; }
.sa-btn-reset:hover[b-ygcwsgipd6] { background: #6f10ba; }
.sa-btn-export[b-ygcwsgipd6] { background: #8216d8; }
.sa-btn-export:hover[b-ygcwsgipd6] { background: #6f10ba; color: #ffffff; }
.sa-btn-print[b-ygcwsgipd6] { background: #0324d9; }
.sa-btn-print:hover[b-ygcwsgipd6] { background: #021fb8; }

.sa-btn-icon[b-ygcwsgipd6] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .sa-filter[b-ygcwsgipd6] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.sa-select-year[b-ygcwsgipd6],
.sa-select-state[b-ygcwsgipd6],
.sa-select-year[b-ygcwsgipd6],
.sa-select-state[b-ygcwsgipd6],
.sa-select-zone[b-ygcwsgipd6] {
    width: max-content;
    min-width: 0;
}

/* ---------- Status blocks ---------- */
.so-loading[b-ygcwsgipd6] { color: var(--fc-ink-muted); font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-ygcwsgipd6], .so-warn[b-ygcwsgipd6] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-ygcwsgipd6] { background: var(--fc-surface); border: 1px solid var(--fc-line-022); }
.so-empty strong[b-ygcwsgipd6] { color: var(--fc-ink); font-size: 0.9rem; }
.so-empty span[b-ygcwsgipd6] { color: var(--fc-ink-9fabc0); font-size: 0.76rem; }

.sa-empty-inline[b-ygcwsgipd6] { margin-bottom: 0; padding: 0.7rem 0.9rem; }
.sa-empty-inline strong[b-ygcwsgipd6] { font-size: 0.76rem; }
.sa-empty-inline span[b-ygcwsgipd6] { font-size: 0.66rem; }

.so-warn[b-ygcwsgipd6] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-ygcwsgipd6] { color: var(--fc-ink-ffd79a); font-size: 0.76rem; }
.so-warn span[b-ygcwsgipd6] { color: var(--fc-ink-cfb894); font-size: 0.7rem; }

/* ---------- KPI strip ---------- */
.so-kpis[b-ygcwsgipd6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.sa-kpis[b-ygcwsgipd6] { margin-bottom: 0.6rem; }

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-ygcwsgipd6] {
    border-radius: 8px;
    padding: 0.34rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-ygcwsgipd6] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-ygcwsgipd6] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-ygcwsgipd6] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-ygcwsgipd6] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-ygcwsgipd6] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-ygcwsgipd6] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-num[b-ygcwsgipd6] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-ygcwsgipd6] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Rows and panels ---------- */
.so-row[b-ygcwsgipd6] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The records table is the point of the page, so it gets the full width. 
.sa-row-table { grid-template-columns: minmax(0, 1fr); }*/
.sa-row-table[b-ygcwsgipd6] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0,0.75fr);
    
}


/* Trend canvas 620, donut canvas 470 — the fractions carry the same 1.32:1 ratio so
   both charts render at one type size. The insight list needs the least room. */
.sa-row-b[b-ygcwsgipd6] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* Both canvases are 765, so the columns are equal. */
.sa-row-c[b-ygcwsgipd6] { grid-template-columns: 1fr 1fr; }

.so-panel[b-ygcwsgipd6] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-title[b-ygcwsgipd6] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fc-ink);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-ygcwsgipd6] {
    font-weight: 500;
    font-size: 0.6rem;
    color: var(--fc-ink-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-ygcwsgipd6]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* Panel header: title on the left, row-count chips on the right. */
.sa-panel-head[b-ygcwsgipd6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-panel-meta[b-ygcwsgipd6] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.sa-chip[b-ygcwsgipd6] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sa-chip-count[b-ygcwsgipd6] { background: rgba(120, 165, 235, 0.16); color: var(--fc-ink-bcd3f2); }
.sa-chip-search[b-ygcwsgipd6] { background: rgba(245, 200, 66, 0.16); color: var(--fc-ink-f5d98a); }
.sa-chip-view[b-ygcwsgipd6] { background: rgba(47, 168, 90, 0.18); color: var(--fc-ink-8ee4ab); }

/* ---------- Tiles ---------- */
.so-tiles[b-ygcwsgipd6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.sa-tiles[b-ygcwsgipd6] { margin-top: auto; padding-top: 0.4rem; }

.so-tile[b-ygcwsgipd6] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid var(--fc-line-w10);
    background: var(--fc-overlay-soft);
}

.so-tile-good[b-ygcwsgipd6] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-info[b-ygcwsgipd6] { border-color: var(--fc-line-04); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-ygcwsgipd6] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
}

.so-tile-val[b-ygcwsgipd6] {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--fc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-ygcwsgipd6] { font-size: 0.56rem; color: var(--fc-ink-a8b6cd); }

/* ---------- The records table ---------- */
.so-table-scroll[b-ygcwsgipd6] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--fc-line-022);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--fc-line-05) transparent;
}

/* Tall enough to read a year at a glance, short enough that the analytics below stay
   on the same screen. */
.sa-table-scroll[b-ygcwsgipd6] { max-height: 312px; }

.so-table-scroll[b-ygcwsgipd6]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-ygcwsgipd6]::-webkit-scrollbar-track { background: var(--fc-overlay-soft); }
.so-table-scroll[b-ygcwsgipd6]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-ygcwsgipd6]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-ygcwsgipd6] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    white-space: nowrap;
}

.so-table thead th[b-ygcwsgipd6] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-ygcwsgipd6] {
    padding: 0.24rem 0.45rem;
    border-bottom: 1px solid var(--fc-line-012);
    color: var(--fc-ink-dfe6f0);
}

.so-table tbody tr:nth-child(even) td[b-ygcwsgipd6] { background: var(--fc-overlay-zebra); }
.so-table tbody tr:hover td[b-ygcwsgipd6] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-ygcwsgipd6] { text-align: right; }
.so-table thead th.so-num[b-ygcwsgipd6] { text-align: right; }
.so-money[b-ygcwsgipd6] { font-variant-numeric: tabular-nums; }
.so-td-state[b-ygcwsgipd6] { font-weight: 700; color: var(--fc-ink); }

.so-table tfoot td[b-ygcwsgipd6] {
    position: sticky;
    bottom: 0;
    background: var(--fc-tfoot-bg);
    color: var(--fc-ink);
    font-weight: 700;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid var(--fc-tfoot-line);
}

.so-table tfoot .so-td-state[b-ygcwsgipd6] { text-transform: uppercase; letter-spacing: 0.04em; }

/* Colour carries meaning here: the period is a neutral pill, the two money columns take
   the same hues as their series in the charts, and the zone chip uses the zone's own
   colour from the map — with its ink chosen by measured contrast, not assumed. */
.sa-th-period[b-ygcwsgipd6], .sa-td-period[b-ygcwsgipd6] { width: 6.2rem; }
.sa-th-lgcs[b-ygcwsgipd6] { width: 5.2rem; }

.sa-period-pill[b-ygcwsgipd6] {
    display: inline-block;
    background: rgba(120, 165, 235, 0.14);
    border: 1px solid var(--fc-line-026);
    border-radius: 5px;
    padding: 0.02rem 0.32rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--fc-ink-cddff7);
}

.sa-fct-tag[b-ygcwsgipd6] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #a9560c;
    color: #ffffff;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.sa-td-state-amt[b-ygcwsgipd6] { color: var(--fc-ink-9fc8ff); font-weight: 600; }
.sa-td-lgc-amt[b-ygcwsgipd6] { color: var(--fc-ink-93e6ac); font-weight: 600; }

.sa-count-chip[b-ygcwsgipd6] {
    display: inline-block;
    min-width: 1.55rem;
    background: rgba(47, 168, 90, 0.16);
    border: 1px solid rgba(47, 168, 90, 0.34);
    border-radius: 5px;
    padding: 0.02rem 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--fc-ink-8ee4ab);
    text-align: center;
}

.sa-zone-chip[b-ygcwsgipd6] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Executive insights ---------- */
.keyinsight-panel-title[b-ygcwsgipd6] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fc-ink);
    margin-bottom: 0.5rem;
}

.keyinsights-title[b-ygcwsgipd6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exec-bulb-icon[b-ygcwsgipd6] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--fc-ink-f5c842);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.exec-insight-section[b-ygcwsgipd6] { margin-top: 0.5rem; }
.exec-insight-section:first-of-type[b-ygcwsgipd6] { margin-top: 0.1rem; }

.exec-insight-heading[b-ygcwsgipd6] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fc-ink-f5c842);
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-ygcwsgipd6] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-ygcwsgipd6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-ygcwsgipd6] {
    color: var(--fc-ink-93a1b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-ygcwsgipd6] { color: var(--fc-ink-eaf0f8); font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-ygcwsgipd6] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-ygcwsgipd6] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-trend-list li:last-child[b-ygcwsgipd6] { border-bottom: none; }

.exec-trend-arrow[b-ygcwsgipd6] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-ygcwsgipd6]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-ygcwsgipd6] { font-size: 0.635rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-trend-headline[b-ygcwsgipd6] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-ygcwsgipd6] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-ygcwsgipd6] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-insights-list li:last-child[b-ygcwsgipd6] { border-bottom: none; }

.exec-insight-icon[b-ygcwsgipd6] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-ygcwsgipd6]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-ygcwsgipd6] { font-size: 0.635rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-insight-accent[b-ygcwsgipd6] { font-weight: 700; }

/* ---------- Footer ---------- */
.so-foot[b-ygcwsgipd6] {
    font-size: 0.58rem;
    color: var(--fc-ink-faint);
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .sa-row-b[b-ygcwsgipd6] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sa-row-b[b-ygcwsgipd6], .sa-row-c[b-ygcwsgipd6] { grid-template-columns: minmax(0, 1fr); }
    .sa-top[b-ygcwsgipd6] { flex-direction: column; }
    .sa-brand[b-ygcwsgipd6] { flex: 1 1 auto; }
    .so-kpis[b-ygcwsgipd6] { flex-direction: column; }
    .so-kpi[b-ygcwsgipd6] { flex: 1 1 auto; }
}

@media print {
    .sa-filter[b-ygcwsgipd6] { display: none !important; }
    .sa-table-scroll[b-ygcwsgipd6] { max-height: none; overflow: visible; }
}

/* ---------- The compare slots inside the filter bar ---------- */
/* Each slot is underlined in the colour that state will carry in the charts, so the
   picker and the trend lines agree before Apply is pressed. */
.cmp-slot-row[b-ygcwsgipd6] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.cmp-slot[b-ygcwsgipd6] {
    border-bottom: 2px solid transparent;
    padding-bottom: 0.12rem;
    min-width: 0;
}

.cmp-slot-select[b-ygcwsgipd6] { width: max-content; min-width: 0; }

/* A council slot is two stacked boxes: the state narrows the list, the council picks. */
.cmp-slot-pair[b-ygcwsgipd6] {
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
}

.cmp-slot-pair .cmp-slot-select:disabled[b-ygcwsgipd6] {
    background-color: #e9ecf4;
    color: var(--fc-ink-8b94ad);
    cursor: not-allowed;
}

/* ---------- One card per compared state ---------- */
.cmp-cards[b-ygcwsgipd6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.6rem;
}

.cmp-card[b-ygcwsgipd6] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-top: 3px solid #3987e5;
    border-radius: 10px;
    padding: 0.4rem 0.6rem 0.5rem;
    min-width: 0;
}

.cmp-card-head[b-ygcwsgipd6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 0;
}

.cmp-card-name[b-ygcwsgipd6] {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmp-card-share[b-ygcwsgipd6] {
    font-size: 0.54rem;
    font-weight: 700;
    color: var(--fc-ink-muted);
    white-space: nowrap;
}

.cmp-card-state[b-ygcwsgipd6] {
    font-size: 0.54rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--fc-ink-93a1b8);
}

.cmp-card-total[b-ygcwsgipd6] {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--fc-ink);
    line-height: 1.15;
    margin: 0.05rem 0 0.25rem;
}

/* Two metrics per row on a narrow card, four across on a wide one, so a group of two
   or three does not leave half the card empty. */
.cmp-card-grid[b-ygcwsgipd6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 0.2rem 0.5rem;
}

.cmp-card-grid > div[b-ygcwsgipd6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cmp-metric-label[b-ygcwsgipd6] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-93a1b8);
    white-space: nowrap;
}

.cmp-metric-value[b-ygcwsgipd6] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--fc-ink-eaf0f8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmp-metric-of[b-ygcwsgipd6] {
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--fc-ink-93a1b8);
    margin-left: 0.2rem;
}

.cmp-metric-sub[b-ygcwsgipd6] { font-size: 0.5rem; color: var(--fc-ink-8c9ab2); }

/* The leader of each bucket, chipped in that state's own colour. */
.cmp-leader-chip[b-ygcwsgipd6] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (max-width: 1100px) {
    .cmp-cards[b-ygcwsgipd6] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .cmp-cards[b-ygcwsgipd6] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/CompareStates.razor.rz.scp.css */
/* State Head-to-Head Comparison — same dark surfaces, filter bar, panels, table and
   insight blocks as the rest of the dashboard, with one addition: a card per compared
   state, carrying the colour that state keeps across every chart on the page.

   Chart canvas widths are set in the razor to match the column each chart sits in,
   because an SVG's type scales with its panel: rendered px = font units x panel width
   / canvas width. Matching them is what makes every chart come out at one type size. */

.so-page[b-84osl34988] {
    background-color: var(--fc-page-bg);
    background-image:
        radial-gradient(120% 80% at 50% 0%, var(--fc-page-glow) 0%, var(--fc-page-glow-0) 70%),
        linear-gradient(180deg, var(--fc-page-wash-a) 0%, var(--fc-page-bg) 55%, var(--fc-page-wash-b) 100%);
    color: var(--fc-ink-e8eaf0);
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top row: brand block + light filter bar (Geopolitical Zones shape) ------ */
.sa-top[b-84osl34988] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    width: 100%; /* Ensures the parent itself spans full width */
}


/*.sa-top {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}*/

.sa-brand[b-84osl34988] {
    /*background: #020b2b;
    border: 1px solid var(--fc-line);
    border-radius: 10px;*/
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Sized to its own content, as on the State Disbursement Records page: a fixed
       285px was cut for the small two-line label and clips the larger heading. */
    min-width: 0;
}

.sa-brand-logo[b-84osl34988] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-brand-text[b-84osl34988] { min-width: 0; }

/* Two lines, two colours — the header the Executive Summary, Geopolitical Zones, State
   Analysis and State Disbursement Records pages already use: the page name in white,
   and under it the period or scope currently in view, in amber. */
.sa-brand-text h1[b-84osl34988] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--fc-ink);
}

.sa-brand-sub[b-84osl34988] {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    color: var(--fc-ink-f5c842);
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
/* Filter bar: the font sizes and spacing of the Geopolitical Zones bar, which is
   the reference for this control across the dashboard. Only the type scale and the
   gaps differ from what was here before — the colours, borders and the chevron were
   already the same. */
.sa-filter[b-84osl34988] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.sa-field[b-84osl34988] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    margin-right:0.5rem;
}

.sa-field label[b-84osl34988] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.sa-field-pair[b-84osl34988] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.sa-select[b-84osl34988] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.8rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.sa-select:focus[b-84osl34988] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.sa-seg-row[b-84osl34988] {
    display: flex;
    gap: 0.18rem;
}

.sa-seg[b-84osl34988] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
    margin-left:0.5rem;

}

.sa-seg:hover[b-84osl34988] { background: #e2e7f3; }

.sa-seg-on[b-84osl34988] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.sa-search[b-84osl34988] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.sa-search-icon[b-84osl34988] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--fc-ink-6b7590);
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.sa-search-input[b-84osl34988] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.sa-search-input[b-84osl34988]::placeholder { color: var(--fc-ink-98a1b8); }

/* Buttons are as wide as their word and no wider. */
.sa-btn[b-84osl34988] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-decoration: none;
    margin-left:0.5rem;
    margin-right:0.5rem;
}

.sa-btn-apply[b-84osl34988] { background: #058940; }
.sa-btn-apply:hover[b-84osl34988] { background: #047235; }
.sa-btn-apply:disabled[b-84osl34988] { background: #6f8f7c; cursor: default; }
.sa-btn-reset[b-84osl34988] { background: #8216d8; }
.sa-btn-reset:hover[b-84osl34988] { background: #6f10ba; }
.sa-btn-export[b-84osl34988] { background: #8216d8; }
.sa-btn-export:hover[b-84osl34988] { background: #6f10ba; color: #ffffff; }
.sa-btn-print[b-84osl34988] { background: #0324d9; }
.sa-btn-print:hover[b-84osl34988] { background: #021fb8; }

.sa-btn-icon[b-84osl34988] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .sa-filter[b-84osl34988] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.sa-select-year[b-84osl34988],
.sa-select-state[b-84osl34988],
.sa-select-year[b-84osl34988],
.sa-select-state[b-84osl34988],
.sa-select-zone[b-84osl34988] {
    width: max-content;
    min-width: 0;
}

/* ---------- Status blocks ---------- */
.so-loading[b-84osl34988] { color: var(--fc-ink-muted); font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-84osl34988], .so-warn[b-84osl34988] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-84osl34988] { background: var(--fc-surface); border: 1px solid var(--fc-line-022); }
.so-empty strong[b-84osl34988] { color: var(--fc-ink); font-size: 0.9rem; }
.so-empty span[b-84osl34988] { color: var(--fc-ink-9fabc0); font-size: 0.76rem; }

.sa-empty-inline[b-84osl34988] { margin-bottom: 0; padding: 0.7rem 0.9rem; }
.sa-empty-inline strong[b-84osl34988] { font-size: 0.76rem; }
.sa-empty-inline span[b-84osl34988] { font-size: 0.66rem; }

.so-warn[b-84osl34988] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-84osl34988] { color: var(--fc-ink-ffd79a); font-size: 0.76rem; }
.so-warn span[b-84osl34988] { color: var(--fc-ink-cfb894); font-size: 0.7rem; }

/* ---------- KPI strip ---------- */
.so-kpis[b-84osl34988] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.sa-kpis[b-84osl34988] { margin-bottom: 0.6rem; }

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-84osl34988] {
    border-radius: 8px;
    padding: 0.34rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-84osl34988] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-84osl34988] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-84osl34988] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-84osl34988] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-84osl34988] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-84osl34988] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-num[b-84osl34988] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-84osl34988] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Rows and panels ---------- */
.so-row[b-84osl34988] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The records table is the point of the page, so it gets the full width. 
.sa-row-table { grid-template-columns: minmax(0, 1fr); }*/
.sa-row-table[b-84osl34988] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0,0.75fr);
    
}


/* Trend canvas 620, donut canvas 470 — the fractions carry the same 1.32:1 ratio so
   both charts render at one type size. The insight list needs the least room. */
.sa-row-b[b-84osl34988] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* Both canvases are 765, so the columns are equal. */
.sa-row-c[b-84osl34988] { grid-template-columns: 1fr 1fr; }

.so-panel[b-84osl34988] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-title[b-84osl34988] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fc-ink);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-84osl34988] {
    font-weight: 500;
    font-size: 0.6rem;
    color: var(--fc-ink-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-84osl34988]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* Panel header: title on the left, row-count chips on the right. */
.sa-panel-head[b-84osl34988] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-panel-meta[b-84osl34988] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.sa-chip[b-84osl34988] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sa-chip-count[b-84osl34988] { background: rgba(120, 165, 235, 0.16); color: var(--fc-ink-bcd3f2); }
.sa-chip-search[b-84osl34988] { background: rgba(245, 200, 66, 0.16); color: var(--fc-ink-f5d98a); }
.sa-chip-view[b-84osl34988] { background: rgba(47, 168, 90, 0.18); color: var(--fc-ink-8ee4ab); }

/* ---------- Tiles ---------- */
.so-tiles[b-84osl34988] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.sa-tiles[b-84osl34988] { margin-top: auto; padding-top: 0.4rem; }

.so-tile[b-84osl34988] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid var(--fc-line-w10);
    background: var(--fc-overlay-soft);
}

.so-tile-good[b-84osl34988] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-info[b-84osl34988] { border-color: var(--fc-line-04); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-84osl34988] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
}

.so-tile-val[b-84osl34988] {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--fc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-84osl34988] { font-size: 0.56rem; color: var(--fc-ink-a8b6cd); }

/* ---------- The records table ---------- */
.so-table-scroll[b-84osl34988] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--fc-line-022);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--fc-line-05) transparent;
}

/* Tall enough to read a year at a glance, short enough that the analytics below stay
   on the same screen. */
.sa-table-scroll[b-84osl34988] { max-height: 312px; }

.so-table-scroll[b-84osl34988]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-84osl34988]::-webkit-scrollbar-track { background: var(--fc-overlay-soft); }
.so-table-scroll[b-84osl34988]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-84osl34988]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-84osl34988] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    white-space: nowrap;
}

.so-table thead th[b-84osl34988] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-84osl34988] {
    padding: 0.24rem 0.45rem;
    border-bottom: 1px solid var(--fc-line-012);
    color: var(--fc-ink-dfe6f0);
}

.so-table tbody tr:nth-child(even) td[b-84osl34988] { background: var(--fc-overlay-zebra); }
.so-table tbody tr:hover td[b-84osl34988] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-84osl34988] { text-align: right; }
.so-table thead th.so-num[b-84osl34988] { text-align: right; }
.so-money[b-84osl34988] { font-variant-numeric: tabular-nums; }
.so-td-state[b-84osl34988] { font-weight: 700; color: var(--fc-ink); }

.so-table tfoot td[b-84osl34988] {
    position: sticky;
    bottom: 0;
    background: var(--fc-tfoot-bg);
    color: var(--fc-ink);
    font-weight: 700;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid var(--fc-tfoot-line);
}

.so-table tfoot .so-td-state[b-84osl34988] { text-transform: uppercase; letter-spacing: 0.04em; }

/* Colour carries meaning here: the period is a neutral pill, the two money columns take
   the same hues as their series in the charts, and the zone chip uses the zone's own
   colour from the map — with its ink chosen by measured contrast, not assumed. */
.sa-th-period[b-84osl34988], .sa-td-period[b-84osl34988] { width: 6.2rem; }
.sa-th-lgcs[b-84osl34988] { width: 5.2rem; }

.sa-period-pill[b-84osl34988] {
    display: inline-block;
    background: rgba(120, 165, 235, 0.14);
    border: 1px solid var(--fc-line-026);
    border-radius: 5px;
    padding: 0.02rem 0.32rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--fc-ink-cddff7);
}

.sa-fct-tag[b-84osl34988] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #a9560c;
    color: #ffffff;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.sa-td-state-amt[b-84osl34988] { color: var(--fc-ink-9fc8ff); font-weight: 600; }
.sa-td-lgc-amt[b-84osl34988] { color: var(--fc-ink-93e6ac); font-weight: 600; }

.sa-count-chip[b-84osl34988] {
    display: inline-block;
    min-width: 1.55rem;
    background: rgba(47, 168, 90, 0.16);
    border: 1px solid rgba(47, 168, 90, 0.34);
    border-radius: 5px;
    padding: 0.02rem 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--fc-ink-8ee4ab);
    text-align: center;
}

.sa-zone-chip[b-84osl34988] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Executive insights ---------- */
.keyinsight-panel-title[b-84osl34988] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fc-ink);
    margin-bottom: 0.5rem;
}

.keyinsights-title[b-84osl34988] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exec-bulb-icon[b-84osl34988] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--fc-ink-f5c842);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.exec-insight-section[b-84osl34988] { margin-top: 0.5rem; }
.exec-insight-section:first-of-type[b-84osl34988] { margin-top: 0.1rem; }

.exec-insight-heading[b-84osl34988] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fc-ink-f5c842);
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-84osl34988] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-84osl34988] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-84osl34988] {
    color: var(--fc-ink-93a1b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-84osl34988] { color: var(--fc-ink-eaf0f8); font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-84osl34988] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-84osl34988] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-trend-list li:last-child[b-84osl34988] { border-bottom: none; }

.exec-trend-arrow[b-84osl34988] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-84osl34988]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-84osl34988] { font-size: 0.635rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-trend-headline[b-84osl34988] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-84osl34988] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-84osl34988] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-insights-list li:last-child[b-84osl34988] { border-bottom: none; }

.exec-insight-icon[b-84osl34988] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-84osl34988]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-84osl34988] { font-size: 0.635rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-insight-accent[b-84osl34988] { font-weight: 700; }

/* ---------- Footer ---------- */
.so-foot[b-84osl34988] {
    font-size: 0.58rem;
    color: var(--fc-ink-faint);
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .sa-row-b[b-84osl34988] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sa-row-b[b-84osl34988], .sa-row-c[b-84osl34988] { grid-template-columns: minmax(0, 1fr); }
    .sa-top[b-84osl34988] { flex-direction: column; }
    .sa-brand[b-84osl34988] { flex: 1 1 auto; }
    .so-kpis[b-84osl34988] { flex-direction: column; }
    .so-kpi[b-84osl34988] { flex: 1 1 auto; }
}

@media print {
    .sa-filter[b-84osl34988] { display: none !important; }
    .sa-table-scroll[b-84osl34988] { max-height: none; overflow: visible; }
}

/* ---------- The compare slots inside the filter bar ---------- */
/* Each slot is underlined in the colour that state will carry in the charts, so the
   picker and the trend lines agree before Apply is pressed. */
.cmp-slot-row[b-84osl34988] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.cmp-slot[b-84osl34988] {
    border-bottom: 2px solid transparent;
    padding-bottom: 0.12rem;
    min-width: 0;
}

.cmp-slot-select[b-84osl34988] { width: max-content; min-width: 0; }

/* ---------- One card per compared state ---------- */
.cmp-cards[b-84osl34988] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.6rem;
}

.cmp-card[b-84osl34988] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-top: 3px solid #3987e5;
    border-radius: 10px;
    padding: 0.4rem 0.6rem 0.5rem;
    min-width: 0;
}

.cmp-card-head[b-84osl34988] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 0;
}

.cmp-card-name[b-84osl34988] {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmp-card-share[b-84osl34988] {
    font-size: 0.54rem;
    font-weight: 700;
    color: var(--fc-ink-muted);
    white-space: nowrap;
}

.cmp-card-total[b-84osl34988] {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--fc-ink);
    line-height: 1.15;
    margin: 0.05rem 0 0.25rem;
}

/* Two metrics per row on a narrow card, four across on a wide one, so a group of two
   or three does not leave half the card empty. */
.cmp-card-grid[b-84osl34988] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 0.2rem 0.5rem;
}

.cmp-card-grid > div[b-84osl34988] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cmp-metric-label[b-84osl34988] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-93a1b8);
    white-space: nowrap;
}

.cmp-metric-value[b-84osl34988] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--fc-ink-eaf0f8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmp-metric-of[b-84osl34988] {
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--fc-ink-93a1b8);
    margin-left: 0.2rem;
}

.cmp-metric-sub[b-84osl34988] { font-size: 0.5rem; color: var(--fc-ink-8c9ab2); }

/* The leader of each bucket, chipped in that state's own colour. */
.cmp-leader-chip[b-84osl34988] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (max-width: 1100px) {
    .cmp-cards[b-84osl34988] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .cmp-cards[b-84osl34988] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/DataExplorer.razor.rz.scp.css */
/* Data Explorer — the same dark surfaces, filter bar, KPI strip, panels, table and
   insight blocks as the rest of the dashboard.

   Chart canvas widths are set in the razor to match the column each chart sits in,
   because an SVG's type scales with its panel: rendered px = font units x panel width
   / canvas width. Matching them is what makes every chart come out at one type size:
   625 in the 1.32fr column, 470 in the ~1fr columns, 765 across half the page, and two
   215-unit dials side by side in one column. */

.so-page[b-bt3afdnpcg] {
    background-color: var(--fc-page-bg);
    background-image:
        radial-gradient(120% 80% at 50% 0%, var(--fc-page-glow) 0%, var(--fc-page-glow-0) 70%),
        linear-gradient(180deg, var(--fc-page-wash-a) 0%, var(--fc-page-bg) 55%, var(--fc-page-wash-b) 100%);
    color: var(--fc-ink-e8eaf0);
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top row: brand block + light filter bar (Geopolitical Zones shape) ------ */
.sa-top[b-bt3afdnpcg] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.sa-brand[b-bt3afdnpcg] {
    background: var(--fc-surface-deep);
    border: 1px solid var(--fc-line);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 285px;
    min-width: 0;
}

.sa-brand-logo[b-bt3afdnpcg] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-brand-text[b-bt3afdnpcg] { min-width: 0; }

.sa-brand-title[b-bt3afdnpcg] {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--fc-ink);
    line-height: 1.15;
}

.sa-brand-sub[b-bt3afdnpcg] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--fc-ink-35d17a);
    line-height: 1.2;
}

.sa-brand-range[b-bt3afdnpcg] {
    font-size: 0.63rem;
    color: var(--fc-ink-b6c1d2);
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
/* Filter bar: the font sizes and spacing of the Geopolitical Zones bar, which is
   the reference for this control across the dashboard. Only the type scale and the
   gaps differ from what was here before — the colours, borders and the chevron were
   already the same. */
.sa-filter[b-bt3afdnpcg] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.sa-field[b-bt3afdnpcg] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    margin-right:0.5rem;
}

.sa-field label[b-bt3afdnpcg] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.sa-field-pair[b-bt3afdnpcg] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.sa-select[b-bt3afdnpcg] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.8rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.sa-select:focus[b-bt3afdnpcg] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.sa-seg-row[b-bt3afdnpcg] {
    display: flex;
    gap: 0.18rem;
}

.sa-seg[b-bt3afdnpcg] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
    margin-left:0.5rem;

}

.sa-seg:hover[b-bt3afdnpcg] { background: #e2e7f3; }

.sa-seg-on[b-bt3afdnpcg] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.sa-search[b-bt3afdnpcg] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.sa-search-icon[b-bt3afdnpcg] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--fc-ink-6b7590);
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.sa-search-input[b-bt3afdnpcg] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.sa-search-input[b-bt3afdnpcg]::placeholder { color: var(--fc-ink-98a1b8); }

/* Buttons are as wide as their word and no wider. */
.sa-btn[b-bt3afdnpcg] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-decoration: none;
    margin-left:0.5rem;
    margin-right:0.5rem;
}

.sa-btn-apply[b-bt3afdnpcg] { background: #058940; }
.sa-btn-apply:hover[b-bt3afdnpcg] { background: #047235; }
.sa-btn-apply:disabled[b-bt3afdnpcg] { background: #6f8f7c; cursor: default; }
.sa-btn-reset[b-bt3afdnpcg] { background: #8216d8; }
.sa-btn-reset:hover[b-bt3afdnpcg] { background: #6f10ba; }
.sa-btn-export[b-bt3afdnpcg] { background: #8216d8; }
.sa-btn-export:hover[b-bt3afdnpcg] { background: #6f10ba; color: #ffffff; }
.sa-btn-print[b-bt3afdnpcg] { background: #0324d9; }
.sa-btn-print:hover[b-bt3afdnpcg] { background: #021fb8; }

.sa-btn-icon[b-bt3afdnpcg] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .sa-filter[b-bt3afdnpcg] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.sa-select-year[b-bt3afdnpcg],
.sa-select-state[b-bt3afdnpcg],
.sa-select-year[b-bt3afdnpcg],
.sa-select-state[b-bt3afdnpcg],
.sa-select-zone[b-bt3afdnpcg] {
    width: max-content;
    min-width: 0;
}

/* ---------- Status blocks ---------- */
.so-loading[b-bt3afdnpcg] { color: var(--fc-ink-muted); font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-bt3afdnpcg], .so-warn[b-bt3afdnpcg] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-bt3afdnpcg] { background: var(--fc-surface); border: 1px solid var(--fc-line-022); }
.so-empty strong[b-bt3afdnpcg] { color: var(--fc-ink); font-size: 0.9rem; }
.so-empty span[b-bt3afdnpcg] { color: var(--fc-ink-9fabc0); font-size: 0.76rem; }

.sa-empty-inline[b-bt3afdnpcg] { margin-bottom: 0; padding: 0.7rem 0.9rem; }
.sa-empty-inline strong[b-bt3afdnpcg] { font-size: 0.76rem; }
.sa-empty-inline span[b-bt3afdnpcg] { font-size: 0.66rem; }

.so-warn[b-bt3afdnpcg] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-bt3afdnpcg] { color: var(--fc-ink-ffd79a); font-size: 0.76rem; }
.so-warn span[b-bt3afdnpcg] { color: var(--fc-ink-cfb894); font-size: 0.7rem; }

/* ---------- KPI strip ---------- */
.so-kpis[b-bt3afdnpcg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.sa-kpis[b-bt3afdnpcg] { margin-bottom: 0.6rem; }

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-bt3afdnpcg] {
    border-radius: 8px;
    padding: 0.34rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-bt3afdnpcg] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-bt3afdnpcg] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-bt3afdnpcg] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-bt3afdnpcg] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-bt3afdnpcg] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-bt3afdnpcg] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-num[b-bt3afdnpcg] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-bt3afdnpcg] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Rows and panels ---------- */
.so-row[b-bt3afdnpcg] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The records table is the point of the page, so it gets the full width. 
.sa-row-table { grid-template-columns: minmax(0, 1fr); }*/
.sa-row-table[b-bt3afdnpcg] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0,0.75fr);
    
}


/* Trend canvas 620, donut canvas 470 — the fractions carry the same 1.32:1 ratio so
   both charts render at one type size. The insight list needs the least room. */
.sa-row-b[b-bt3afdnpcg] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* Both canvases are 765, so the columns are equal. */
.sa-row-c[b-bt3afdnpcg] { grid-template-columns: 1fr 1fr; }

.so-panel[b-bt3afdnpcg] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-title[b-bt3afdnpcg] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fc-ink);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-bt3afdnpcg] {
    font-weight: 500;
    font-size: 0.6rem;
    color: var(--fc-ink-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-bt3afdnpcg]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* Panel header: title on the left, row-count chips on the right. */
.sa-panel-head[b-bt3afdnpcg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-panel-meta[b-bt3afdnpcg] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.sa-chip[b-bt3afdnpcg] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sa-chip-count[b-bt3afdnpcg] { background: rgba(120, 165, 235, 0.16); color: var(--fc-ink-bcd3f2); }
.sa-chip-search[b-bt3afdnpcg] { background: rgba(245, 200, 66, 0.16); color: var(--fc-ink-f5d98a); }
.sa-chip-view[b-bt3afdnpcg] { background: rgba(47, 168, 90, 0.18); color: var(--fc-ink-8ee4ab); }

/* ---------- Tiles ---------- */
.so-tiles[b-bt3afdnpcg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.sa-tiles[b-bt3afdnpcg] { margin-top: auto; padding-top: 0.4rem; }

.so-tile[b-bt3afdnpcg] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid var(--fc-line-w10);
    background: var(--fc-overlay-soft);
}

.so-tile-good[b-bt3afdnpcg] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-info[b-bt3afdnpcg] { border-color: var(--fc-line-04); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-bt3afdnpcg] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
}

.so-tile-val[b-bt3afdnpcg] {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--fc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-bt3afdnpcg] { font-size: 0.56rem; color: var(--fc-ink-a8b6cd); }

/* ---------- The records table ---------- */
.so-table-scroll[b-bt3afdnpcg] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--fc-line-022);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--fc-line-05) transparent;
}

/* Tall enough to read a year at a glance, short enough that the analytics below stay
   on the same screen. */
.sa-table-scroll[b-bt3afdnpcg] { max-height: 312px; }

.so-table-scroll[b-bt3afdnpcg]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-bt3afdnpcg]::-webkit-scrollbar-track { background: var(--fc-overlay-soft); }
.so-table-scroll[b-bt3afdnpcg]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-bt3afdnpcg]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-bt3afdnpcg] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    white-space: nowrap;
}

.so-table thead th[b-bt3afdnpcg] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-bt3afdnpcg] {
    padding: 0.24rem 0.45rem;
    border-bottom: 1px solid var(--fc-line-012);
    color: var(--fc-ink-dfe6f0);
}

.so-table tbody tr:nth-child(even) td[b-bt3afdnpcg] { background: var(--fc-overlay-zebra); }
.so-table tbody tr:hover td[b-bt3afdnpcg] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-bt3afdnpcg] { text-align: right; }
.so-table thead th.so-num[b-bt3afdnpcg] { text-align: right; }
.so-money[b-bt3afdnpcg] { font-variant-numeric: tabular-nums; }
.so-td-state[b-bt3afdnpcg] { font-weight: 700; color: var(--fc-ink); }

.so-table tfoot td[b-bt3afdnpcg] {
    position: sticky;
    bottom: 0;
    background: var(--fc-tfoot-bg);
    color: var(--fc-ink);
    font-weight: 700;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid var(--fc-tfoot-line);
}

.so-table tfoot .so-td-state[b-bt3afdnpcg] { text-transform: uppercase; letter-spacing: 0.04em; }

/* Colour carries meaning here: the period is a neutral pill, the two money columns take
   the same hues as their series in the charts, and the zone chip uses the zone's own
   colour from the map — with its ink chosen by measured contrast, not assumed. */
.sa-th-period[b-bt3afdnpcg], .sa-td-period[b-bt3afdnpcg] { width: 6.2rem; }
.sa-th-lgcs[b-bt3afdnpcg] { width: 5.2rem; }

.sa-period-pill[b-bt3afdnpcg] {
    display: inline-block;
    background: rgba(120, 165, 235, 0.14);
    border: 1px solid var(--fc-line-026);
    border-radius: 5px;
    padding: 0.02rem 0.32rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--fc-ink-cddff7);
}

.sa-fct-tag[b-bt3afdnpcg] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #a9560c;
    color: #ffffff;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.sa-td-state-amt[b-bt3afdnpcg] { color: var(--fc-ink-9fc8ff); font-weight: 600; }
.sa-td-lgc-amt[b-bt3afdnpcg] { color: var(--fc-ink-93e6ac); font-weight: 600; }

.sa-count-chip[b-bt3afdnpcg] {
    display: inline-block;
    min-width: 1.55rem;
    background: rgba(47, 168, 90, 0.16);
    border: 1px solid rgba(47, 168, 90, 0.34);
    border-radius: 5px;
    padding: 0.02rem 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--fc-ink-8ee4ab);
    text-align: center;
}

.sa-zone-chip[b-bt3afdnpcg] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Executive insights ---------- */
.keyinsight-panel-title[b-bt3afdnpcg] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fc-ink);
    margin-bottom: 0.5rem;
}

.keyinsights-title[b-bt3afdnpcg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exec-bulb-icon[b-bt3afdnpcg] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--fc-ink-f5c842);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.exec-insight-section[b-bt3afdnpcg] { margin-top: 0.5rem; }
.exec-insight-section:first-of-type[b-bt3afdnpcg] { margin-top: 0.1rem; }

.exec-insight-heading[b-bt3afdnpcg] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fc-ink-f5c842);
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-bt3afdnpcg] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-bt3afdnpcg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-bt3afdnpcg] {
    color: var(--fc-ink-93a1b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-bt3afdnpcg] { color: var(--fc-ink-eaf0f8); font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-bt3afdnpcg] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-bt3afdnpcg] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-trend-list li:last-child[b-bt3afdnpcg] { border-bottom: none; }

.exec-trend-arrow[b-bt3afdnpcg] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-bt3afdnpcg]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-bt3afdnpcg] { font-size: 0.635rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-trend-headline[b-bt3afdnpcg] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-bt3afdnpcg] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-bt3afdnpcg] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-insights-list li:last-child[b-bt3afdnpcg] { border-bottom: none; }

.exec-insight-icon[b-bt3afdnpcg] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-bt3afdnpcg]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-bt3afdnpcg] { font-size: 0.635rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-insight-accent[b-bt3afdnpcg] { font-weight: 700; }

/* ---------- Footer ---------- */
.so-foot[b-bt3afdnpcg] {
    font-size: 0.58rem;
    color: var(--fc-ink-faint);
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .sa-row-b[b-bt3afdnpcg] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sa-row-b[b-bt3afdnpcg], .sa-row-c[b-bt3afdnpcg] { grid-template-columns: minmax(0, 1fr); }
    .sa-top[b-bt3afdnpcg] { flex-direction: column; }
    .sa-brand[b-bt3afdnpcg] { flex: 1 1 auto; }
    .so-kpis[b-bt3afdnpcg] { flex-direction: column; }
    .so-kpi[b-bt3afdnpcg] { flex: 1 1 auto; }
}

@media print {
    .sa-filter[b-bt3afdnpcg] { display: none !important; }
    .sa-table-scroll[b-bt3afdnpcg] { max-height: none; overflow: visible; }
}

/* ---------- Row grids ---------- */
/* A: the result table | the ranking (470) | the insight list. */
.de-row-a[b-bt3afdnpcg] { grid-template-columns: 1.5fr 1.07fr 1fr; }

/* B: the concentration donut (470) | the map or the dials | the bands (520). */
.de-row-b[b-bt3afdnpcg] { grid-template-columns: 1.02fr 1fr 1.13fr; }

/* With the map lifted out to its own row, row B holds two cards rather than three. */
.de-row-b2[b-bt3afdnpcg] { grid-template-columns: 1fr 1fr; }

.de-row-map[b-bt3afdnpcg] { grid-template-columns: minmax(0, 1fr); }



/* The council grouping runs to 774 rows, so the body scrolls inside the card. */
.de-table-scroll[b-bt3afdnpcg] { max-height: 330px; }

/* Two dials share one card, side by side, each taking half the width. */
.de-dials[b-bt3afdnpcg] { min-width: 0; }

.de-dial-row[b-bt3afdnpcg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    align-items: center;
    margin-block: auto;
    min-width: 0;
}

/* The band a row falls in, chipped in the band's own step of the ramp. */
.de-band-chip[b-bt3afdnpcg] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* The state a council belongs to, since council names repeat across states. */
.de-note[b-bt3afdnpcg] {
    margin-left: 0.3rem;
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--fc-ink-93a1b8);
}

/* The map keeps Nigeria's own proportions, with the ramp legend under it; the SVG
   carries no scope attribute of its own, hence ::deep. */
.de-map-panel[b-bt3afdnpcg] { min-width: 0; }

.de-map-body[b-bt3afdnpcg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin-block: auto;
    min-width: 0;
}

/* Capped rather than stretched: at full row width the map would be over 800px tall, and
   the labels are already comfortable at this size. */
.de-map-body[b-bt3afdnpcg]  svg.faac-statemap-labelled {
    max-width: 1180px;
    margin: 0 auto;
}

.de-map-body[b-bt3afdnpcg]  svg.faac-chart {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
}

.de-map-legend[b-bt3afdnpcg] { width: 100%; max-width: 290px; }

@media (max-width: 1280px) {
    .de-row-a[b-bt3afdnpcg], .de-row-b[b-bt3afdnpcg] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .de-row-a[b-bt3afdnpcg], .de-row-b[b-bt3afdnpcg] { grid-template-columns: minmax(0, 1fr); }
    .de-dial-row[b-bt3afdnpcg] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/DataSources.razor.rz.scp.css */
/* Data Sources & Provenance — dark navy, consistent with every other page in the
   dashboard. Four bands: the registry of publishing bodies, the ingestion dials and the
   two tier splits, the document ledger beside the insights, then the per-year shape of
   the archive with the lineage. */

.ds-page[b-enl8tcybkp] {
    background-color: var(--fc-page-bg);
    background-image:
        radial-gradient(120% 80% at 50% 0%, var(--fc-page-glow) 0%, var(--fc-page-glow-0) 70%),
        linear-gradient(180deg, var(--fc-page-wash-a) 0%, var(--fc-page-bg) 55%, var(--fc-page-wash-b) 100%);
    color: var(--fc-ink-e8eaf0);
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Header: brand, KPIs and filter on one line ---------- */
.ds-top[b-enl8tcybkp] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}

.ds-brand[b-enl8tcybkp] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.05rem;
    flex: 0 1 auto;
    min-width: 0;
}

.ds-title[b-enl8tcybkp] {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--fc-ink);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ds-title-sub[b-enl8tcybkp] {
    display: block;
    font-size: 0.53rem;
    font-weight: 600;
    color: var(--fc-ink-muted);
    letter-spacing: 0.05em;
}

.ds-range[b-enl8tcybkp] { font-size: 0.53rem; color: var(--fc-ink-faint); white-space: nowrap; }

.ds-kpis[b-enl8tcybkp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
    flex: 1 1 auto;
}

.ds-kpi[b-enl8tcybkp] {
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.ds-kpi-1[b-enl8tcybkp] { background: linear-gradient(160deg, #17399c, #0e2470); }
.ds-kpi-2[b-enl8tcybkp] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.ds-kpi-3[b-enl8tcybkp] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.ds-kpi-4[b-enl8tcybkp] { background: linear-gradient(160deg, #a9560c, #71390a); }
.ds-kpi-5[b-enl8tcybkp] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.ds-kpi-cap[b-enl8tcybkp] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.ds-kpi-num[b-enl8tcybkp] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.ds-kpi-unit[b-enl8tcybkp] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
/* Filter bar: the font sizes and spacing of the Geopolitical Zones bar, which is
   the reference for this control across the dashboard. Only the type scale and the
   gaps differ from what was here before — the colours, borders and the chevron were
   already the same. */
.ds-filter[b-enl8tcybkp] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.ds-field[b-enl8tcybkp] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    margin-right:0.5rem;
}

.ds-field label[b-enl8tcybkp] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.ds-field-pair[b-enl8tcybkp] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.ds-select[b-enl8tcybkp] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.8rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.ds-select:focus[b-enl8tcybkp] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.ds-seg-row[b-enl8tcybkp] {
    display: flex;
    gap: 0.18rem;
}

.ds-seg[b-enl8tcybkp] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
    margin-left:0.5rem;

}

.ds-seg:hover[b-enl8tcybkp] { background: #e2e7f3; }

.ds-seg-on[b-enl8tcybkp] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.ds-search[b-enl8tcybkp] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.ds-search-icon[b-enl8tcybkp] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--fc-ink-6b7590);
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.ds-search-input[b-enl8tcybkp] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.ds-search-input[b-enl8tcybkp]::placeholder { color: var(--fc-ink-98a1b8); }

/* Buttons are as wide as their word and no wider. */
.ds-btn[b-enl8tcybkp] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-decoration: none;
    margin-left:0.5rem;
    margin-right:0.5rem;
}

.ds-btn-apply[b-enl8tcybkp] { background: #058940; }
.ds-btn-apply:hover[b-enl8tcybkp] { background: #047235; }
.ds-btn-apply:disabled[b-enl8tcybkp] { background: #6f8f7c; cursor: default; }
.ds-btn-reset[b-enl8tcybkp] { background: #8216d8; }
.ds-btn-reset:hover[b-enl8tcybkp] { background: #6f10ba; }
.ds-btn-export[b-enl8tcybkp] { background: #8216d8; }
.ds-btn-export:hover[b-enl8tcybkp] { background: #6f10ba; color: #ffffff; }
.ds-btn-print[b-enl8tcybkp] { background: #0324d9; }
.ds-btn-print:hover[b-enl8tcybkp] { background: #021fb8; }

.ds-btn-icon[b-enl8tcybkp] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .ds-filter[b-enl8tcybkp] { flex-wrap: wrap; margin-left: 0; }
}

/* ---------- Rows and panels ---------- */
.ds-row[b-enl8tcybkp] {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
    align-items: stretch;
}

.ds-row-registry[b-enl8tcybkp] { grid-template-columns: 1fr; }
.ds-row-a[b-enl8tcybkp] { grid-template-columns: 1fr 1fr 1fr; }
.ds-row-b[b-enl8tcybkp] { grid-template-columns: 1.62fr 1fr; }
.ds-row-c[b-enl8tcybkp] { grid-template-columns: 1fr 1fr 1fr; }

.ds-panel[b-enl8tcybkp] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    padding: 0.4rem 0.5rem 0.45rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ds-panel-title[b-enl8tcybkp] {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--fc-ink);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.3rem;
    line-height: 1.2;
}

.ds-panel-title-sub[b-enl8tcybkp] {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--fc-ink-muted);
    font-size: 0.55rem;
}

.ds-panel[b-enl8tcybkp]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- Source registry cards ---------- */
/* Four cards on a desktop row, each sized by the grid rather than by its text, so the
   links line up down the row no matter how long a publisher's description runs. */
.ds-cards[b-enl8tcybkp] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}

.ds-card[b-enl8tcybkp] {
    background: var(--fc-overlay-faint);
    border: 1px solid var(--fc-line-022);
    border-top: 3px solid #2f7ff0;
    border-radius: 7px;
    padding: 0.4rem 0.5rem 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    min-width: 0;
}

.ds-card-head[b-enl8tcybkp] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.ds-card-abbr[b-enl8tcybkp] {
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--fc-ink);
    border-radius: 4px;
    padding: 0.1rem 0.32rem;
    white-space: nowrap;
}

.ds-card-role[b-enl8tcybkp] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    padding: 0.08rem 0.3rem;
    white-space: nowrap;
    border: 1px solid transparent;
}

.ds-card-role-primary[b-enl8tcybkp] { color: var(--fc-ink-9ec5ff); border-color: rgba(47, 127, 240, 0.5); background: rgba(47, 127, 240, 0.14); }
.ds-card-role-support[b-enl8tcybkp] { color: var(--fc-ink-9fd8ff); border-color: rgba(74, 159, 224, 0.5); background: rgba(74, 159, 224, 0.12); }
.ds-card-role-check[b-enl8tcybkp] { color: var(--fc-ink-7fe0a6); border-color: rgba(34, 164, 93, 0.5); background: rgba(34, 164, 93, 0.14); }
.ds-card-role-context[b-enl8tcybkp] { color: var(--fc-ink-d7aaff); border-color: rgba(130, 22, 216, 0.5); background: rgba(130, 22, 216, 0.16); }

.ds-card-name[b-enl8tcybkp] {
    font-size: 0.605rem;
    font-weight: 800;
    color: var(--fc-ink);
    line-height: 1.2;
}

.ds-card-desc[b-enl8tcybkp] {
    font-size: 0.565rem;
    line-height: 1.3;
    color: var(--fc-ink-soft);
    flex: 1 1 auto;
}

.ds-card-meta[b-enl8tcybkp] {
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
    border-top: 1px solid var(--fc-line-016);
    padding-top: 0.22rem;
    margin-top: 0.08rem;
}

.ds-card-meta-row[b-enl8tcybkp] {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    font-size: 0.545rem;
    line-height: 1.25;
}

.ds-card-meta-label[b-enl8tcybkp] {
    color: var(--fc-ink-8fa3c2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.ds-card-meta-value[b-enl8tcybkp] { color: var(--fc-ink-e2e9f4); font-weight: 600; text-align: right; min-width: 0; }

.ds-card-link[b-enl8tcybkp] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-start;
    margin-top: 0.12rem;
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--fc-ink-9ec5ff);
    text-decoration: none;
    border: 1px solid var(--fc-line-04);
    border-radius: 5px;
    padding: 0.16rem 0.36rem;
    background: rgba(47, 127, 240, 0.1);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.ds-card-link:hover[b-enl8tcybkp] { background: rgba(47, 127, 240, 0.22); color: #ffffff; border-color: rgba(120, 165, 235, 0.7); }

.ds-link-icon[b-enl8tcybkp] {
    width: 9px;
    height: 9px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ---------- Gauge trio ---------- */
/* Three dials share the card, so each gets a third of it and the SVG canvases are sized
   to that third — the reason the numbers inside them come out the same size as the type
   in the charts either side. */
.ds-gauges[b-enl8tcybkp] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.2rem;
    align-items: center;
    flex: 1 1 auto;
}

.ds-gauges[b-enl8tcybkp]  .faac-chart { width: 100%; height: auto; display: block; }

/* ---------- Document ledger ---------- */
.ds-panel-table[b-enl8tcybkp] { min-width: 0; }

.ds-table-scroll[b-enl8tcybkp] {
    overflow: auto;
    flex: 1 1 auto;
    min-height: 18rem;
    max-height: 44rem;
    border: 1px solid var(--fc-line-016);
    border-radius: 6px;
}

.ds-table-scroll[b-enl8tcybkp]::-webkit-scrollbar { width: 9px; height: 9px; }
.ds-table-scroll[b-enl8tcybkp]::-webkit-scrollbar-track { background: var(--fc-overlay-soft); }
.ds-table-scroll[b-enl8tcybkp]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.ds-table-scroll[b-enl8tcybkp]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.ds-table[b-enl8tcybkp] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.565rem;
}

.ds-table thead th[b-enl8tcybkp] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #06205a;
    color: #cfe0f8;
    font-size: 0.53rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 0.26rem 0.28rem;
    white-space: nowrap;
    border-bottom: 1px solid rgba(120, 165, 235, 0.3);
}

.ds-table tbody td[b-enl8tcybkp] {
    padding: 0.2rem 0.28rem;
    border-bottom: 1px solid var(--fc-line-w05);
    color: var(--fc-ink-dbe3ef);
    white-space: nowrap;
}

.ds-table tbody tr:nth-child(even) td[b-enl8tcybkp] { background: var(--fc-overlay-zebra); }
.ds-table tbody tr:hover td[b-enl8tcybkp] { background: rgba(74, 159, 224, 0.14); }

.ds-num[b-enl8tcybkp] { text-align: right; }
.ds-money[b-enl8tcybkp] { font-variant-numeric: tabular-nums; }
.ds-of[b-enl8tcybkp] { color: var(--fc-ink-faint); font-size: 0.5rem; margin-left: 0.1rem; }
.ds-short[b-enl8tcybkp] { color: var(--fc-ink-ffcf8a); font-weight: 700; }

.ds-td-period[b-enl8tcybkp] { font-weight: 700; color: var(--fc-ink); }

/* The file name is the point of the row, so it gets the room: it is the one cell allowed
   to wrap and the one that takes the width the rest of the columns do not need. */
.ds-td-file[b-enl8tcybkp] {
    color: var(--fc-ink-cfe0f8);
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 11rem;
    max-width: 14rem;
}

.ds-file-name[b-enl8tcybkp] {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.535rem;
}

/* The provenance note is printed under the file name rather than left to a tooltip,
   because on a re-sourced month it is the only thing that contradicts the file name — and
   a caveat nobody can see is a caveat nobody acts on. */
.ds-file-note[b-enl8tcybkp] {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.52rem;
    line-height: 1.25;
    color: var(--fc-ink-8fa3c2);
    font-style: italic;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ds-file-note-src[b-enl8tcybkp] {
    color: var(--fc-ink-7fe0a6);
    font-style: normal;
}

.ds-note-icon[b-enl8tcybkp] {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 0.15rem;
    vertical-align: -1px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ds-chip[b-enl8tcybkp] {
    display: inline-block;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 0.04rem 0.26rem;
    white-space: nowrap;
}

.ds-status[b-enl8tcybkp] {
    display: inline-block;
    font-size: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 4px;
    padding: 0.06rem 0.3rem;
    white-space: nowrap;
    border: 1px solid transparent;
}

.ds-chip-none[b-enl8tcybkp] { opacity: 0.85; font-style: italic; }

/* A month whose two tiers came from different publishers is marked down the left edge, so
   the split is visible while scrolling the ledger and not only on the chips. */
.ds-tr-split td:first-child[b-enl8tcybkp] { box-shadow: inset 2px 0 0 0 #22a45d; }

.ds-status-ok[b-enl8tcybkp] { color: var(--fc-ink-7fe0a6); border-color: rgba(34, 164, 93, 0.5); background: rgba(34, 164, 93, 0.14); }
.ds-status-resourced[b-enl8tcybkp] { color: var(--fc-ink-7fe0a6); border-color: rgba(34, 164, 93, 0.6); background: rgba(34, 164, 93, 0.2); }
.ds-status-onetier[b-enl8tcybkp] { color: var(--fc-ink-ffcf8a); border-color: rgba(232, 160, 43, 0.6); background: rgba(232, 160, 43, 0.2); }
.ds-status-names[b-enl8tcybkp] { color: var(--fc-ink-9fd8ff); border-color: rgba(74, 159, 224, 0.45); background: rgba(74, 159, 224, 0.1); }
.ds-status-noted[b-enl8tcybkp] { color: var(--fc-ink-9fd8ff); border-color: rgba(74, 159, 224, 0.5); background: rgba(74, 159, 224, 0.12); }
.ds-status-effort[b-enl8tcybkp] { color: var(--fc-ink-ffcf8a); border-color: rgba(232, 160, 43, 0.55); background: rgba(232, 160, 43, 0.14); }
.ds-status-partial[b-enl8tcybkp] { color: var(--fc-ink-ffb38a); border-color: rgba(232, 118, 43, 0.55); background: rgba(232, 118, 43, 0.14); }
.ds-status-empty[b-enl8tcybkp] { color: var(--fc-ink-ff8a80); border-color: rgba(232, 51, 43, 0.55); background: rgba(232, 51, 43, 0.14); }

.ds-th-link[b-enl8tcybkp], .ds-td-link[b-enl8tcybkp] { text-align: right; white-space: nowrap; }

.ds-td-link a[b-enl8tcybkp] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.535rem;
    font-weight: 700;
    color: var(--fc-ink-9ec5ff);
    text-decoration: none;
    border: 1px solid var(--fc-line-035);
    border-radius: 4px;
    padding: 0.08rem 0.3rem;
}

.ds-td-link a:hover[b-enl8tcybkp] { background: rgba(47, 127, 240, 0.2); color: #ffffff; }

/* The footer prints the whole source mix for a tier — "OAGF 42 · NBS 35 · Not sourced 1".
   Left to nowrap it would set the column's width for all 78 rows, so it wraps instead. */
.ds-td-mix[b-enl8tcybkp] {
    white-space: normal !important;
    font-size: 0.5rem;
    line-height: 1.2;
}

.ds-table tfoot td[b-enl8tcybkp] {
    position: sticky;
    bottom: 0;
    background: #06205a;
    color: var(--fc-ink);
    font-weight: 800;
    font-size: 0.545rem;
    padding: 0.24rem 0.34rem;
    border-top: 1px solid var(--fc-line-035);
    white-space: nowrap;
}

/* ---------- Key insights: Summary / Trends / Key Findings ---------- */
.exec-insight-section[b-enl8tcybkp] { margin-top: 0.3rem; }
.exec-insight-section:first-of-type[b-enl8tcybkp] { margin-top: 0.1rem; }

.exec-insight-heading[b-enl8tcybkp] {
    font-size: 0.53rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fc-ink-8fa3c2);
    padding-bottom: 0.12rem;
    margin-bottom: 0.16rem;
    border-bottom: 1px solid var(--fc-line-018);
}

.exec-sum-list[b-enl8tcybkp] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-enl8tcybkp] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.585rem;
    line-height: 1.3;
}

.exec-sum-label[b-enl8tcybkp] { color: var(--fc-ink-muted); white-space: nowrap; }
.exec-sum-value[b-enl8tcybkp] { color: var(--fc-ink-eaf0f8); font-weight: 600; text-align: right; min-width: 0; }

.exec-trend-list[b-enl8tcybkp] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-enl8tcybkp] {
    display: flex;
    gap: 0.3rem;
    align-items: flex-start;
    padding: 0.18rem 0;
    border-bottom: 1px solid var(--fc-line-w05);
}

.exec-trend-list li:last-child[b-enl8tcybkp] { border-bottom: none; }

.exec-trend-arrow[b-enl8tcybkp] {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 0.08rem;
}

.exec-trend-arrow[b-enl8tcybkp]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-enl8tcybkp] { font-size: 0.585rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-trend-headline[b-enl8tcybkp] { font-weight: 700; }

.exec-insights-list[b-enl8tcybkp] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-enl8tcybkp] {
    display: flex;
    gap: 0.3rem;
    align-items: flex-start;
    padding: 0.18rem 0;
    border-bottom: 1px solid var(--fc-line-w05);
}

.exec-insights-list li:last-child[b-enl8tcybkp] { border-bottom: none; }

.exec-insight-icon[b-enl8tcybkp] {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.06rem;
}

.exec-insight-icon[b-enl8tcybkp]  svg {
    width: 9px;
    height: 9px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-enl8tcybkp] { font-size: 0.585rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-insight-accent[b-enl8tcybkp] { font-weight: 700; }

.keyinsight-panel-title[b-enl8tcybkp] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--fc-ink);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}

.exec-bulb-icon[b-enl8tcybkp] {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: var(--fc-ink-ffd166);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ---------- Data lineage ---------- */
.ds-flow[b-enl8tcybkp] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
    counter-reset: none;
}

.ds-flow-step[b-enl8tcybkp] {
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
    padding: 0.2rem 0;
    position: relative;
}

/* The connector is drawn behind the numbered dots so the five stages read as one run
   rather than as five unrelated bullets. */
.ds-flow-step:not(:last-child)[b-enl8tcybkp]::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 1.05rem;
    bottom: -0.1rem;
    width: 1px;
    background: rgba(120, 165, 235, 0.3);
}

.ds-flow-dot[b-enl8tcybkp] {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-top: 0.06rem;
}

.ds-flow-body[b-enl8tcybkp] { display: flex; flex-direction: column; gap: 0.02rem; min-width: 0; }
.ds-flow-head[b-enl8tcybkp] { font-size: 0.575rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.ds-flow-text[b-enl8tcybkp] { font-size: 0.565rem; line-height: 1.3; color: var(--fc-ink-soft); }

/* ---------- Citation strip ---------- */
.ds-cite[b-enl8tcybkp] {
    background: rgba(47, 127, 240, 0.07);
    border: 1px solid var(--fc-line-025);
    border-left: 3px solid #2f7ff0;
    border-radius: 7px;
    padding: 0.38rem 0.55rem;
    margin-bottom: 0.45rem;
}

.ds-cite-title[b-enl8tcybkp] {
    font-size: 0.56rem;
    font-weight: 800;
    color: var(--fc-ink);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.14rem;
}

.ds-cite-body[b-enl8tcybkp] { font-size: 0.575rem; line-height: 1.35; color: var(--fc-ink-soft); }

.ds-cite-example[b-enl8tcybkp] {
    display: block;
    margin: 0.16rem 0;
    padding-left: 0.5rem;
    border-left: 2px solid var(--fc-line-045);
    color: var(--fc-ink-e2e9f4);
    font-style: italic;
}

/* ---------- Notices and footer ---------- */
.ds-warn[b-enl8tcybkp], .ds-empty[b-enl8tcybkp] {
    background: rgba(232, 160, 43, 0.1);
    border: 1px solid rgba(232, 160, 43, 0.45);
    border-radius: 7px;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.45rem;
    font-size: 0.6rem;
    color: var(--fc-ink-ffe0b0);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ds-warn strong[b-enl8tcybkp], .ds-empty strong[b-enl8tcybkp] { color: var(--fc-ink); }

.ds-loading[b-enl8tcybkp] { font-size: 0.65rem; color: var(--fc-ink-muted); padding: 0.6rem 0; }

.ds-foot[b-enl8tcybkp] {
    font-size: 0.53rem;
    color: var(--fc-ink-faint);
    text-align: center;
    padding: 0.3rem 0 0.1rem;
    line-height: 1.35;
}

/* ---------- Responsive ---------- */
@media (max-width: 1500px) {
    .ds-cards[b-enl8tcybkp] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
    .ds-row-a[b-enl8tcybkp], .ds-row-c[b-enl8tcybkp] { grid-template-columns: 1fr 1fr; }
    .ds-row-b[b-enl8tcybkp] { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .ds-row-a[b-enl8tcybkp], .ds-row-c[b-enl8tcybkp] { grid-template-columns: 1fr; }
    .ds-cards[b-enl8tcybkp] { grid-template-columns: 1fr; }
    .ds-gauges[b-enl8tcybkp] { grid-template-columns: 1fr; }
}

@media print {
    .ds-filter[b-enl8tcybkp] { display: none; }
    .ds-table-scroll[b-enl8tcybkp] { max-height: none; overflow: visible; }
}
/* /Components/Pages/FaacOverview.razor.rz.scp.css */
/* Executive Summary — full-bleed dark navy dashboard.
   Every surface colour below is sampled from the reference design: the deep
   navy ground (#010721), the single card/panel fill shared by the small stat
   cards, the chart panels and the footer strip (#01163e), and the five hero
   KPI gradients. Chart series colours still come from the validated
   categorical palette in Charts/ChartHelpers.cs. */

.exec-page[b-09hqml3h1c] {
    background-color: var(--fc-page-bg-2);
    background-image:
        radial-gradient(120% 80% at 50% 0%, var(--fc-page-glow-2) 0%, var(--fc-page-glow-0) 70%),
        linear-gradient(180deg, var(--fc-page-wash-a) 0%, var(--fc-page-bg-2) 55%, var(--fc-page-wash-c) 100%);
    color: var(--fc-ink-e8eaf0);
    min-height: 100vh;
    padding: 0.9rem 1rem 1.1rem;
    font-variant-numeric: tabular-nums;
}

/* ---- Header ---- */
.exec-header[b-09hqml3h1c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.exec-header-left[b-09hqml3h1c] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.exec-logo[b-09hqml3h1c] {
    width: 58px;
    height: 58px;
    object-fit: contain;
    flex-shrink: 0;
}

.exec-header-text h1[b-09hqml3h1c] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--fc-ink);
}

.exec-subtitle[b-09hqml3h1c] {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    color: var(--fc-ink-f5c842);
    margin-top: 0.1rem;
}

.exec-date-line[b-09hqml3h1c] {
    font-size: 0.82rem;
    color: var(--fc-ink-b6c1d2);
    margin-top: 0.15rem;
}

.exec-header-right[b-09hqml3h1c] {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.exec-header-badges[b-09hqml3h1c] {
    display: flex;
    gap: 0.6rem;
}

.exec-date-badge[b-09hqml3h1c], .exec-filters-badge[b-09hqml3h1c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--fc-line-w22);
    border-radius: 8px;
    padding: 0.45rem 0.8rem;
    font-size: 0.83rem;
    color: var(--fc-ink-eef2f8);
    background: var(--fc-overlay-soft);
    white-space: nowrap;
}

.exec-badge-icon[b-09hqml3h1c] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--fc-ink-eef2f8);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-asof[b-09hqml3h1c] {
    font-size: 0.78rem;
    color: var(--fc-ink-98a5b9);
}

.exec-loading[b-09hqml3h1c] {
    color: var(--fc-ink-9aa3b5);
    padding: 2rem 0;
}

/* ---- Hero KPI cards ---- */
.exec-kpi-row[b-09hqml3h1c] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}

@media (max-width: 1150px) {
    .exec-kpi-row[b-09hqml3h1c] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

.exec-kpi-card[b-09hqml3h1c] {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.5rem 0.6rem 0;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    min-width: 0;
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

.exec-kpi-blue[b-09hqml3h1c]   { background-image: linear-gradient(180deg, #0144b0 0%, #012573 100%); }
.exec-kpi-teal[b-09hqml3h1c]   { background-image: linear-gradient(180deg, #017a92 0%, #01516c 100%); }
.exec-kpi-green[b-09hqml3h1c]  { background-image: linear-gradient(180deg, #017050 0%, #014a33 100%); }
.exec-kpi-purple[b-09hqml3h1c] { background-image: linear-gradient(180deg, #4b278f 0%, #321866 100%); }
.exec-kpi-amber[b-09hqml3h1c]  { background-image: linear-gradient(180deg, #b37102 0%, #814c01 100%); }

.exec-kpi-label[b-09hqml3h1c] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    line-height: 1.25;
}

.exec-kpi-sub[b-09hqml3h1c] {
    font-size: 0.6rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
    margin-top: 0.1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.exec-kpi-body[b-09hqml3h1c] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding-bottom: 1.1rem;
    min-width: 0;
}

.exec-kpi-icon[b-09hqml3h1c] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.12) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-kpi-icon svg[b-09hqml3h1c] {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #ffffff;
}

.exec-kpi-value[b-09hqml3h1c] {
    min-width: 0;
    text-align: center;
}

.exec-kpi-number[b-09hqml3h1c] {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.05;
    white-space: nowrap;
}

.exec-kpi-unit[b-09hqml3h1c] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.95);
    margin-top: 0.1rem;
}

/* Hairline shape-only trend along the bottom edge of each hero card. */
.exec-kpi-spark[b-09hqml3h1c] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    opacity: 0.7;
    pointer-events: none;
}

.exec-kpi-spark[b-09hqml3h1c]  .exec-spark-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---- Small stat cards ---- */
.exec-stat-row[b-09hqml3h1c] {
    display: grid;
    /*grid-template-columns: repeat(7, minmax(0, 1fr));*/
    grid-template-columns: auto auto auto 1fr 1fr 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

@media (max-width: 1400px) {
    .exec-stat-row[b-09hqml3h1c] {
        grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    }
}

.exec-stat-card[b-09hqml3h1c] {
    background: var(--fc-surface-2);
    border: 1px solid var(--fc-line-018);
    border-radius: 8px;
    padding: 0.45rem 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.exec-stat-icon[b-09hqml3h1c] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exec-stat-icon svg[b-09hqml3h1c] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #ffffff;
}

.exec-stat-icon-blue[b-09hqml3h1c]   { background-image: linear-gradient(150deg, #2f7fd6 0%, #1a5aa8 100%); }
.exec-stat-icon-green[b-09hqml3h1c]  { background-image: linear-gradient(150deg, #1f8a44 0%, #14652f 100%); }
.exec-stat-icon-red[b-09hqml3h1c]    { background-image: linear-gradient(150deg, #a52a2a 0%, #6f1a1c 100%); }
.exec-stat-icon-trophy[b-09hqml3h1c] { background-image: linear-gradient(150deg, #2b3f66 0%, #16233f 100%); }

.exec-stat-icon-trophy svg[b-09hqml3h1c] { stroke: #f2c141; }
.exec-stat-icon-red svg[b-09hqml3h1c]    { stroke: #ffffff; }

.exec-stat-icon-green svg polygon[b-09hqml3h1c],
.exec-stat-icon-red svg polygon[b-09hqml3h1c] {
    fill: #ffffff;
    stroke: none;
}

.exec-stat-text[b-09hqml3h1c] {
    min-width: 0;
}

.exec-stat-label[b-09hqml3h1c] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--fc-ink-dbe3ef);
    text-transform: uppercase;
    letter-spacing: 0.035em;
    line-height: 1.3;
}

.exec-stat-value[b-09hqml3h1c] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--fc-ink);
    line-height: 1.2;
    margin-top: 0.1rem;
    white-space: nowrap;
}

.exec-stat-unit[b-09hqml3h1c] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-left: 0.2rem;
}

.exec-stat-sub[b-09hqml3h1c] {
    font-size: 0.74rem;
    color: var(--fc-ink-9fabc0);
    margin-top: 0.05rem;
    white-space: nowrap;
}

.exec-stat-sub-strong[b-09hqml3h1c] {
    color: var(--fc-ink-dbe3ef);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.exec-good[b-09hqml3h1c] { color: var(--fc-ink-6cc24a); }
.exec-bad[b-09hqml3h1c]  { color: var(--fc-ink-ee5b52); }

/* ---- Main grid: two stacked panel rows on the left, tall insights column right ---- */
.exec-main-grid[b-09hqml3h1c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(255px, 25.5%);
    gap: 0.85rem;
    margin-bottom: 0.85rem;
    align-items: stretch;
}

.exec-main-left[b-09hqml3h1c] {
    display: grid;
    /* The ranked row stays at its own (now much shorter) content height; whatever the
       insights column adds to the band goes to the trend row instead. */
    /*grid-template-rows: minmax(0, 1fr) auto;*/
    /*grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);*/
    grid-template-rows: auto auto;
    gap: 0.85rem;
    min-width: 0;
}

.exec-panel-row[b-09hqml3h1c] {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.exec-panel-row-trend[b-09hqml3h1c] {
    grid-template-columns: 1.3fr 1fr;
}

.exec-panel-row-rank[b-09hqml3h1c] {
    grid-template-columns: 1.26fr 1fr 1fr;
}

@media (max-width: 1250px) {
    .exec-main-grid[b-09hqml3h1c] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1000px) {
    .exec-panel-row-trend[b-09hqml3h1c], .exec-panel-row-rank[b-09hqml3h1c] {
        grid-template-columns: 1fr;
    }
}

.exec-panel[b-09hqml3h1c] {
    background: var(--fc-surface-2);
    border: 1px solid var(--fc-line-018);
    border-radius: 10px;
    padding: 0.75rem 0.9rem 0.85rem;
    min-width: 0;
}

.exec-panel-title[b-09hqml3h1c] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fc-ink);
    margin-bottom: 0.5rem;
}

.exec-panel-title-sub[b-09hqml3h1c] {
    font-weight: 500;
    color: var(--fc-ink-b6c1d2);
}

.exec-panel[b-09hqml3h1c]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
}

/* Once the panels stack into one column the SVGs would scale up to the full page
   width; cap them so the charts keep a sensible size and stay centred. */
    /* Both charts in this row sit in panels whose height is set by the insights column,
   so any leftover splits evenly above and below the plot instead of pooling under it. */
    .exec-panel-trend[b-09hqml3h1c],
    .exec-panel-lgc[b-09hqml3h1c] {
        display: flex;
        flex-direction: column;
    }

        .exec-panel-trend[b-09hqml3h1c]  .faac-chart {
            max-width: 840px;
            margin-block: auto;
        }

        .exec-panel-lgc[b-09hqml3h1c]  .faac-chart {
            max-width: 620px;
            margin: auto;
        }
    /* Leftover height in these panels spreads between the rows rather than piling up
   under the last one — the right-hand insights column sets the row height. */
    .exec-panel-zones[b-09hqml3h1c],
    .exec-panel-ranked[b-09hqml3h1c] {
        display: flex;
        flex-direction: column;
    }

        .exec-zonebar-list[b-09hqml3h1c],
        .exec-panel-ranked .exec-ranked-list[b-09hqml3h1c] {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
        }
    /* ---- Executive insights (tall right-hand column) ---- */
    .exec-panel-insights[b-09hqml3h1c] {
        display: flex;
        flex-direction: column;
        /* Whatever height the left-hand panels set, the three blocks spread to meet it
       rather than leaving one gap at the bottom of the card. */
        justify-content: space-between;
        padding-bottom: 0.5rem;
    }

    .exec-insights-title[b-09hqml3h1c] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .exec-bulb-icon[b-09hqml3h1c] {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: var(--fc-ink-f5c842);
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }
    /* Three blocks share the column — Summary, Trends, Key Findings — so the type is
   a step smaller than the rest of the page and the rows are tight. */
    .exec-insight-section[b-09hqml3h1c] {
        margin-top: 0.35rem;
    }

        .exec-insight-section:first-of-type[b-09hqml3h1c] {
            margin-top: 0.15rem;
        }

    .exec-insight-heading[b-09hqml3h1c] {
        font-size: 0.585rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.13em;
        color: var(--fc-ink-f5c842);
        padding-bottom: 0.15rem;
        border-bottom: 1px solid rgba(245, 200, 66, 0.28);
        margin-bottom: 0.22rem;
    }
    /* Summary — label/value pairs, one line each wherever they fit. */
    .exec-sum-list[b-09hqml3h1c] {
        display: flex;
        flex-direction: column;
        gap: 0.12rem;
    }

    .exec-sum-row[b-09hqml3h1c] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem;
        font-size: 0.625rem;
        line-height: 1.34;
    }

    .exec-sum-label[b-09hqml3h1c] {
        color: var(--fc-ink-93a1b8);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .exec-sum-value[b-09hqml3h1c] {
        color: var(--fc-ink-eaf0f8);
        font-weight: 600;
        text-align: right;
        min-width: 0;
    }
    /* Trends — an arrow carries direction, so colour is never the only cue. */
    .exec-trend-list[b-09hqml3h1c] {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

        .exec-trend-list li[b-09hqml3h1c] {
            display: grid;
            grid-template-columns: 13px minmax(0, 1fr);
            gap: 0.35rem;
            align-items: start;
            padding: 0.14rem 0;
            border-bottom: 1px solid var(--fc-hairline);
        }

            .exec-trend-list li:last-child[b-09hqml3h1c] {
                border-bottom: none;
            }

    .exec-trend-arrow[b-09hqml3h1c] {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0.12rem;
    }

        .exec-trend-arrow[b-09hqml3h1c]  svg {
            width: 13px;
            height: 13px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2.4;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .exec-trend-text[b-09hqml3h1c] {
        font-size: 0.625rem;
        line-height: 1.28;
        color: var(--fc-ink-soft);
        min-width: 0;
    }

    .exec-trend-headline[b-09hqml3h1c] {
        font-weight: 700;
    }
    /* Key findings — the same icon-disc rows as before, one step tighter. */
    .exec-insights-list[b-09hqml3h1c] {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

        .exec-insights-list li[b-09hqml3h1c] {
            display: grid;
            grid-template-columns: 21px minmax(0, 1fr);
            gap: 0.4rem;
            align-items: center;
            padding: 0.14rem 0;
            border-bottom: 1px solid var(--fc-hairline);
        }

            .exec-insights-list li:last-child[b-09hqml3h1c] {
                border-bottom: none;
            }

    .exec-insight-icon[b-09hqml3h1c] {
        width: 21px;
        height: 21px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .exec-insight-icon[b-09hqml3h1c]  svg {
            width: 12px;
            height: 12px;
            fill: none;
            stroke: #ffffff;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .exec-insight-text[b-09hqml3h1c] {
        font-size: 0.625rem;
        line-height: 1.28;
        color: var(--fc-ink-soft);
        min-width: 0;
    }

    .exec-insight-accent[b-09hqml3h1c] {
        font-weight: 700;
    }
    /* ---- Zone bars ---- */
    .exec-rank-caption[b-09hqml3h1c] {
        font-size: 0.55rem;
        color: var(--fc-ink-98a5b9);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: right;
        margin-bottom: 0.3rem;
    }

    .exec-zonebar-row[b-09hqml3h1c] {
        display: grid;
        grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
        align-items: center;
        gap: 0.45rem;
        margin-bottom: 0.28rem;
    }

        .exec-zonebar-row:last-child[b-09hqml3h1c] {
            margin-bottom: 0;
        }

    .exec-zonebar-name[b-09hqml3h1c] {
        font-size: 0.655rem;
        color: var(--fc-ink-eef2f8);
        white-space: nowrap;
    }

    .exec-zonebar-plot[b-09hqml3h1c] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        min-width: 0;
    }

    .exec-zonebar-fill[b-09hqml3h1c] {
        height: 12px;
        border-radius: 3px;
        flex-grow: 0;
        flex-shrink: 0;
        min-width: 2px;
    }

    .exec-zonebar-value[b-09hqml3h1c] {
        font-size: 0.555rem;
        color: var(--fc-ink-c5cddb);
        white-space: nowrap;
    }
    /* ---- Ranked lists (top / bottom 5 states, top 5 LGCs) ---- */

    .exec-ranked-list[b-09hqml3h1c] {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.32rem;
    }

        .exec-ranked-list li[b-09hqml3h1c] {
            display: grid;
            grid-template-columns: 1.05rem minmax(0, max-content) minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.35rem;
        }

    .exec-rank-badge[b-09hqml3h1c] {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 1.5px solid currentColor;
        background: var(--fc-overlay-soft-2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.52rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .exec-rank-number[b-09hqml3h1c] {
        font-size: 0.62rem;
        font-weight: 600;
        color: var(--fc-ink-dbe3ef);
        text-align: center;
    }

    .exec-rank-name[b-09hqml3h1c] {
        font-size: 0.655rem;
        color: var(--fc-ink-eef2f8);
        white-space: nowrap;
    }

    .exec-rank-plot[b-09hqml3h1c] {
        display: block;
        min-width: 0;
    }

    .exec-rank-bar[b-09hqml3h1c] {
        display: block;
        height: 12px;
        border-radius: 3px;
        min-width: 2px;
    }

    .exec-rank-value[b-09hqml3h1c] {
        font-size: 0.6rem;
        color: var(--fc-ink-eef2f8);
        font-weight: 600;
        white-space: nowrap;
        text-align: right;
    }
    /* ---- Footer strip ---- */
    .exec-footer-strip[b-09hqml3h1c] {
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr 1fr 1.50fr;
        gap: 0.5rem;
        background: var(--fc-surface-2);
        border: 1px solid var(--fc-line-018);
        border-radius: 8px;
        padding: 0.425rem 1rem;
    }

    @media (max-width: 1200px) {
        .exec-footer-strip[b-09hqml3h1c] {
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        }
    }

    .exec-footer-item[b-09hqml3h1c] {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding-left: 1rem;
        border-left: 1px solid var(--fc-line-w10);
        min-width: 0;
    }

        .exec-footer-item:first-child[b-09hqml3h1c] {
            padding-left: 0;
            border-left: none;
        }

    .exec-footer-icon[b-09hqml3h1c] {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .exec-footer-icon svg[b-09hqml3h1c] {
            width: 28px;
            height: 28px;
            fill: none;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .exec-footer-icon-green svg[b-09hqml3h1c] {
        stroke: #4fbf5a;
    }

    .exec-footer-icon-blue svg[b-09hqml3h1c] {
        stroke: #4a9fe0;
    }

    .exec-footer-icon-slate svg[b-09hqml3h1c] {
        stroke: #93a6c0;
    }

    .exec-footer-icon-shield svg[b-09hqml3h1c] {
        stroke: #3f8ede;
        fill: rgba(47, 127, 214, 0.28);
    }

    .exec-footer-text[b-09hqml3h1c] {
        min-width: 0;
    }

    .exec-footer-value[b-09hqml3h1c] {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--fc-ink-f2cf4a);
        line-height: 1.2;
    }

    .exec-footer-unit[b-09hqml3h1c] {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.05em;
    }

    .exec-footer-value-sm[b-09hqml3h1c] {
        font-size: 0.67rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.35;
    }

    .exec-footer-label[b-09hqml3h1c] {
        font-size: 0.7rem;
        color: var(--fc-ink-b9c4d4);
        line-height: 1.35;
        margin-top: 0.1rem;
    }
/* /Components/Pages/GeopoliticalZones.razor.rz.scp.css */
/* Geopolitical Zone Analysis — dark navy dashboard with a light filter bar and a
   light summary table, matching the reference design. Surfaces sampled from it:
   page #010E2F→#010423, panels #011140, filter bar #F4F5F9, table title #021C95,
   table body #F3F5F8, total row #021241, footer #011447. Zone series colours come
   from the validated dark categorical order in Charts/ChartHelpers.cs. */

.gz-page[b-fzkfhw3gtb] {
    background-color: var(--fc-page-bg);
    background-image:
        radial-gradient(120% 80% at 50% 0%, var(--fc-page-glow) 0%, var(--fc-page-glow-0) 70%),
        linear-gradient(180deg, var(--fc-page-wash-a) 0%, var(--fc-page-bg) 55%, var(--fc-page-wash-b) 100%);
    color: var(--fc-ink-e8eaf0);
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

.gz-loading[b-fzkfhw3gtb] {
    color: var(--fc-ink-9aa3b5);
    padding: 2rem 0;
}

.gz-empty[b-fzkfhw3gtb] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line-022);
    border-radius: 10px;
    padding: 1.4rem 1.5rem;
    margin-top: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.gz-empty strong[b-fzkfhw3gtb] { color: var(--fc-ink); font-size: 0.95rem; }
.gz-empty span[b-fzkfhw3gtb] { color: var(--fc-ink-9fabc0); font-size: 0.8rem; }

/* Shown when a refresh could not reach the database. Advisory, not an error page: the
   figures already on screen stay readable underneath it. */
.gz-datawarn[b-fzkfhw3gtb] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    margin-top: 0.7rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
}

.gz-datawarn strong[b-fzkfhw3gtb] { color: var(--fc-ink-ffd79a); font-size: 0.78rem; }
.gz-datawarn span[b-fzkfhw3gtb] { color: var(--fc-ink-cfb894); font-size: 0.72rem; }

/* ---------- Top row: brand block + filter bar ---------- */
.gz-top1[b-fzkfhw3gtb] {
    /* display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    grid-template-columns: max-content 1fr;
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    gap: 0.6rem; /* Puts space between the stacked items */
    margin-bottom: 0.6rem;
    display: flex;
    width: 100%; /* Ensures the parent itself spans full width */
    
}

.gz-top[b-fzkfhw3gtb] {
    display: flex;
    flex-direction: row; /* Aligns items horizontally side-by-side */
    justify-content: space-between; /* Pushes the first item left and the second item right */
    align-items: center; /* Vertically centers both items if they have different heights */
    gap: 0.6rem; /* Safety gap if the screen gets too narrow */
    margin-bottom: 0.6rem;
    width: 100%; /* Ensures the bar stretches across the full width */
}

.gz-brand[b-fzkfhw3gtb] {
   /* background: #020b2b;
    border: 1px solid var(--fc-line);
    border-radius: 10px;*/
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /*flex: 0 0 250px;*/
    min-width: 0;
}

.gz-brand-logo[b-fzkfhw3gtb] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.gz-brand-text[b-fzkfhw3gtb] { min-width: 0; }

.gz-brand-title[b-fzkfhw3gtb] {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--fc-ink);
    line-height: 1.15;
}

.gz-brand-sub[b-fzkfhw3gtb] {
    /*font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: var(--fc-ink-35d17a);
    line-height: 1.2;*/

    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    color: var(--fc-ink-f5c842);
    margin-top: 0.1rem;
}

.gz-brand-range[b-fzkfhw3gtb] {
    color: var(--fc-ink-b6c1d2);
    /*font-size: 0.63rem;
    margin-top: 0.1rem;*/
    font-size: 0.82rem;
    margin-top: 0.15rem;
}

.gz-brand-text h1[b-fzkfhw3gtb] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--fc-ink);
}

.exec-subtitle[b-fzkfhw3gtb] {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    color: var(--fc-ink-f5c842);
    margin-top: 0.1rem;
}

.exec-date-line[b-fzkfhw3gtb] {
    font-size: 0.82rem;
    color: var(--fc-ink-b6c1d2);
    margin-top: 0.15rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
.gz-filter[b-fzkfhw3gtb] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    /*font-size: 16px;*/
}

.gz-field[b-fzkfhw3gtb] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    margin-right:0.5rem;
}

.gz-field label[b-fzkfhw3gtb] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.gz-field-pair[b-fzkfhw3gtb] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.gz-select[b-fzkfhw3gtb] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.8rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.gz-select:focus[b-fzkfhw3gtb] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.gz-seg-row[b-fzkfhw3gtb] {
    display: flex;
    gap: 0.18rem;
}

.gz-seg[b-fzkfhw3gtb] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
    margin-left:0.5rem;

}

.gz-seg:hover[b-fzkfhw3gtb] { background: #e2e7f3; }

.gz-seg-on[b-fzkfhw3gtb] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.gz-search[b-fzkfhw3gtb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.gz-search-icon[b-fzkfhw3gtb] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--fc-ink-6b7590);
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.gz-search-input[b-fzkfhw3gtb] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.gz-search-input[b-fzkfhw3gtb]::placeholder { color: var(--fc-ink-98a1b8); }

/* Buttons are as wide as their word and no wider. */
.gz-btn[b-fzkfhw3gtb] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-decoration: none;
    margin-left:0.5rem;
    margin-right:0.5rem;
}

.gz-btn-apply[b-fzkfhw3gtb] { background: #058940; }
.gz-btn-apply:hover[b-fzkfhw3gtb] { background: #047235; }
.gz-btn-apply:disabled[b-fzkfhw3gtb] { background: #6f8f7c; cursor: default; }
.gz-btn-reset[b-fzkfhw3gtb] { background: #8216d8; }
.gz-btn-reset:hover[b-fzkfhw3gtb] { background: #6f10ba; }
.gz-btn-export[b-fzkfhw3gtb] { background: #8216d8; }
.gz-btn-export:hover[b-fzkfhw3gtb] { background: #6f10ba; color: #ffffff; }
.gz-btn-print[b-fzkfhw3gtb] { background: #0324d9; }
.gz-btn-print:hover[b-fzkfhw3gtb] { background: #021fb8; }

.gz-btn-icon[b-fzkfhw3gtb] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .gz-filter[b-fzkfhw3gtb] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.gz-select-year[b-fzkfhw3gtb],
.gz-select-state[b-fzkfhw3gtb],
.gz-select-zone[b-fzkfhw3gtb] {
    width: max-content;
    min-width: 0;
}

/* ---------- KPI row ---------- */
.gz-kpi-row[b-fzkfhw3gtb] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.6rem;
}

.gz-b-row[b-fzkfhw3gtb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    margin-bottom: 0.6rem;
}


    @media (max-width: 1250px) {
        .gz-kpi-row[b-fzkfhw3gtb] {
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        }
    }

    .gz-kpi[b-fzkfhw3gtb] {
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        padding: 0.5rem 0.6rem;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        min-width: 0;
        color: #ffffff;
    }

    .gz-kpi-blue[b-fzkfhw3gtb] {
        background-image: linear-gradient(180deg, #0020c5 0%, #001585 100%);
    }

    .gz-kpi-green[b-fzkfhw3gtb] {
        background-image: linear-gradient(180deg, #017251 0%, #00513a 100%);
    }

    .gz-kpi-orange[b-fzkfhw3gtb] {
        background-image: linear-gradient(180deg, #fc7506 0%, #f34308 100%);
    }

    .gz-kpi-sky[b-fzkfhw3gtb] {
        background-image: linear-gradient(180deg, #027dbd 0%, #00518c 100%);
    }

    .gz-kpi-purple[b-fzkfhw3gtb] {
        background-image: linear-gradient(180deg, #7319cd 0%, #5a059d 100%);
    }

    .gz-kpi-pink[b-fzkfhw3gtb] {
        background-image: linear-gradient(180deg, #ef217c 0%, #df0552 100%);
    }

    .gz-kpi-icon[b-fzkfhw3gtb] {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.12) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .gz-kpi-icon svg[b-fzkfhw3gtb] {
            width: 19px;
            height: 19px;
            fill: none;
            stroke: #ffffff;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .gz-kpi-text[b-fzkfhw3gtb] {
        min-width: 0;
    }

    .gz-kpi-label[b-fzkfhw3gtb] {
        font-size: 0.58rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: rgba(255, 255, 255, 0.92);
        line-height: 1.25;
    }

    .gz-kpi-value[b-fzkfhw3gtb] {
        font-size: 1.2rem;
        font-weight: 800;
        line-height: 1.1;
        white-space: nowrap;
    }

    .gz-kpi-unit[b-fzkfhw3gtb] {
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: rgba(255, 255, 255, 0.9);
        text-transform: uppercase;
    }
    /* ---------- Main grid ---------- */
    .gz-main[b-fzkfhw3gtb] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(215px, 18%);
        gap: 0.6rem;
        align-items: stretch;
        margin-bottom: 0.6rem;
    }

    .gz-main-left[b-fzkfhw3gtb] {
        display: grid;
        /*grid-template-rows: auto minmax(0, 1fr) auto;*/
        grid-template-rows: auto auto auto;
        gap: 0.6rem;
        min-width: 0;
    }

    .gz-main-right[b-fzkfhw3gtb] {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        min-width: 0;
    }
    /* The two narrative cards take up whatever height the left-hand column sets, so the
   column never ends in a large gap; the extremes card keeps its natural size. */
    .gz-panel-insights[b-fzkfhw3gtb],
    .gz-panel-takeaways[b-fzkfhw3gtb] {
        flex: 1 1 auto;
    }

    .gz-row-two[b-fzkfhw3gtb] {
        display: grid;
        grid-template-columns: 1.06fr 1fr;
        gap: 0.6rem;
        min-width: 0;
    }

    .gz-row-three[b-fzkfhw3gtb] {
        display: grid;
        grid-template-columns: 0.63fr 0.66fr 1.28fr;
        gap: 0.6rem;
        min-width: 0;
    }

    @media (max-width: 1250px) {
        .gz-main[b-fzkfhw3gtb] {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 1000px) {
        .gz-row-two[b-fzkfhw3gtb], .gz-row-three[b-fzkfhw3gtb] {
            grid-template-columns: 1fr;
        }
    }

    .gz-panel[b-fzkfhw3gtb] {
        background: var(--fc-surface);
        border: 1px solid var(--fc-line);
        border-radius: 10px;
        padding: 0.55rem 0.7rem 0.65rem;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .gz-panel-title[b-fzkfhw3gtb] {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--fc-ink);
        margin-bottom: 0.4rem;
    }

    .gz-panel-title-sub[b-fzkfhw3gtb] {
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        color: var(--fc-ink-b6c1d2);
    }

    .gz-title-icon[b-fzkfhw3gtb] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .gz-bulb[b-fzkfhw3gtb], .gz-target[b-fzkfhw3gtb] {
        width: 17px;
        height: 17px;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

    .gz-bulb[b-fzkfhw3gtb] {
        stroke: var(--fc-ink-f5c842);
    }

    .gz-target[b-fzkfhw3gtb] {
        stroke: var(--fc-ink-4a9fe0);
    }

    .gz-panel[b-fzkfhw3gtb]  .faac-chart {
        width: 100%;
        height: auto;
        display: block;
        margin-block: auto;
    }
    /* ---------- Summary table ---------- */
    .gz-panel-table[b-fzkfhw3gtb] {
        padding: 0;
        overflow: hidden;
        border-color: var(--fc-line-03);
    }

    .gz-panel-bar[b-fzkfhw3gtb] {
        background: #021c95;
        color: #ffffff;
        font-size: 0.73rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        padding: 0.4rem 0.7rem;
    }

    .gz-panel-bar-sub[b-fzkfhw3gtb] {
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        color: rgba(255, 255, 255, 0.82);
    }

    .gz-table-scroll[b-fzkfhw3gtb] {
        overflow-x: auto;
    }

    .gz-table[b-fzkfhw3gtb] {
        width: 100%;
        border-collapse: collapse;
        background: #f3f5f8;
        font-size: 0.62rem;
        color: #1b2444;
    }

        .gz-table th[b-fzkfhw3gtb] {
            background: #e9edf6;
            color: #16204a;
            font-size: 0.575rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            padding: 0.28rem 0.4rem;
            text-align: center;
            border: 1px solid #d3daea;
            line-height: 1.25;
            white-space: nowrap;
        }

    .gz-th-zone[b-fzkfhw3gtb] {
        text-align: left;
        min-width: 8.5rem;
    }

    .gz-th-group[b-fzkfhw3gtb] {
        background: #dfe5f2;
    }

    .gz-th-note[b-fzkfhw3gtb] {
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        color: #4a5476;
    }

    .gz-table td[b-fzkfhw3gtb] {
        padding: 0.24rem 0.4rem;
        border: 1px solid #dfe4f0;
        white-space: nowrap;
    }

    .gz-table tbody tr:nth-child(even) td[b-fzkfhw3gtb] {
        background: #eef1f8;
    }

    .gz-td-zone[b-fzkfhw3gtb] {
        text-align: left;
    }

    .gz-num[b-fzkfhw3gtb] {
        text-align: center;
    }

    .gz-money[b-fzkfhw3gtb] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .gz-zone-chip[b-fzkfhw3gtb] {
        display: block;
        border-radius: 5px;
        color: #ffffff;
        text-shadow: none;
        font-size: 0.62rem;
        font-weight: 700;
        padding: 0.16rem 0.45rem;
        white-space: nowrap;
    }

    .gz-cagr[b-fzkfhw3gtb] {
        font-weight: 700;
    }

    .gz-up[b-fzkfhw3gtb] {
        color: #17853f;
    }

    .gz-down[b-fzkfhw3gtb] {
        color: #c62828;
    }

    .gz-table tfoot .gz-td-zone[b-fzkfhw3gtb] {
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .gz-table tfoot td[b-fzkfhw3gtb] {
        background: var(--fc-tfoot-bg);
        color: var(--fc-ink);
        font-weight: 700;
        border-color: var(--fc-tfoot-line);
    }

    .gz-table tfoot .gz-up[b-fzkfhw3gtb] {
        color: var(--fc-ink-4bd47a);
    }

    .gz-table tfoot .gz-down[b-fzkfhw3gtb] {
        color: var(--fc-ink-ff8a80);
    }
    /* ---------- Zone map ---------- */
    .gz-map-body[b-fzkfhw3gtb] {
        display: grid;
        grid-template-columns: 6.4rem minmax(0, 1fr);
        gap: 0.6rem;
        flex: 1;
        min-height: 0;
    }

    .gz-map-legend[b-fzkfhw3gtb] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.35rem;
        background: var(--fc-overlay-soft);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        padding: 0.5rem 0.4rem;
        align-self: center;
    }

    .gz-map-legend-row[b-fzkfhw3gtb] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.6rem;
        color: var(--fc-ink-dfe6f0);
        white-space: nowrap;
    }
    /* One fixed colour per zone, so the swatch is an identity key, not a value scale. */
    .gz-legend-dot[b-fzkfhw3gtb] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
    }

    .gz-map-plot[b-fzkfhw3gtb] {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 0;
    }
    /* The box the drawing exactly fills, and the box the HTML labels are positioned inside.
   Both must be the same box or a label at 50%/50% would land on the panel rather than on
   the middle of the map. 402px is the width the 660x594 viewBox occupies at the 362px
   height this row allows, so the map is capped exactly as before - but now the cap is on
   this element, not on the svg, so there is no letterboxing for labels to drift into.
   container-type lets the label text size itself in cqw, i.e. as a share of the map's own
   width, so the figures shrink with the map on a narrow screen instead of overflowing. */
    .gz-map-canvas[b-fzkfhw3gtb] {
        position: relative;
        width: 100%;
        max-width: 402px;
        aspect-ratio: 660 / 594;
        margin-inline: auto;
        container-type: inline-size;
        overflow: visible;
    }

        .gz-map-canvas[b-fzkfhw3gtb]  .faac-map {
            display: block;
            width: 100%;
            height: 100%;
        }
    /* Zone figures, overlaid on the geography. Real HTML rather than svg <text>: ordinary CSS
   applies, the halo is a text-shadow so nothing depends on paint-order support, and
   pointer-events:none keeps the per-state tooltips in the svg underneath reachable. */
    .gz-zone-label[b-fzkfhw3gtb] {
        position: absolute;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        line-height: 1.16;
        white-space: nowrap;
        pointer-events: none;
    }

    .gz-zl-money[b-fzkfhw3gtb] {
        font-size: 11.6px;
        font-size: 2.88cqw;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    .gz-zl-name[b-fzkfhw3gtb] {
        font-size: 9.4px;
        font-size: 2.35cqw;
        font-weight: 700;
    }

    .gz-zl-meta[b-fzkfhw3gtb] {
        font-size: 7.9px;
        font-size: 1.97cqw;
        font-weight: 600;
    }
    /* The FCT is 47 x 57 map units — far too small for a label — so it keeps a pill, joined
   to the territory by the leader line and dot still drawn in the svg. */
    .gz-fct-pill[b-fzkfhw3gtb] {
        position: absolute;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        gap: 0.3em;
        background: #ffffff;
        color: #16204a;
        font-size: 10.9px;
        font-size: 2.72cqw;
        font-weight: 800;
        line-height: 1;
        padding: 0.34em 0.62em 0.34em 0.5em;
        border-radius: 0.45em;
        white-space: nowrap;
        pointer-events: none;
        box-shadow: 0 2px 6px rgba(2, 8, 28, 0.55), 0 0 0 1px rgba(10, 24, 60, 0.18);
    }

    .gz-fct-pin[b-fzkfhw3gtb] {
        width: 0.72em;
        height: 0.96em;
        flex: 0 0 auto;
        display: block;
    }
    /* ---------- Zone hover ---------- */
    /* States are grouped per zone in the svg, so one hover lifts the whole zone. */
    .gz-map-canvas[b-fzkfhw3gtb]  .faac-zone {
        cursor: pointer;
        transition: filter 190ms ease, opacity 190ms ease;
        transform-box: fill-box;
        outline: none;
    }

        .gz-map-canvas[b-fzkfhw3gtb]  .faac-zone:hover,
        .gz-map-canvas[b-fzkfhw3gtb]  .faac-zone:focus-visible {
            filter: brightness(1.17) saturate(1.06) drop-shadow(0 0 6px rgba(255, 255, 255, 0.38));
        }
    /* Everything that is not the hovered zone recedes, so the highlight reads even between
   two bright fills. :has() keeps this in CSS — no script and no interop. */
    .gz-map-canvas:has(.faac-zone:hover)[b-fzkfhw3gtb]  .faac-zone:not(:hover),
    .gz-map-canvas:has(.faac-zone:focus-visible)[b-fzkfhw3gtb]  .faac-zone:not(:focus-visible) {
        opacity: 0.72;
    }
    /* ---------- Zone tooltip ---------- */
    .gz-zone-tip[b-fzkfhw3gtb] {
        position: absolute;
        z-index: 4;
        transform: translate(-50%, -100%) translateY(-0.4rem) scale(0.97);
        transform-origin: 50% 100%;
        min-width: 8.6rem;
        max-width: 11rem;
        display: flex;
        flex-direction: column;
        gap: 0.12rem;
        padding: 0.42rem 0.55rem;
        background: #04102e;
        border: 1px solid rgba(140, 180, 240, 0.42);
        border-radius: 7px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
    }

    .gz-tip-zone[b-fzkfhw3gtb] {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.66rem;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 0.15rem;
    }

    .gz-tip-dot[b-fzkfhw3gtb] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex: 0 0 auto;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
    }

    .gz-tip-row[b-fzkfhw3gtb] {
        display: flex;
        justify-content: space-between;
        gap: 0.7rem;
        font-size: 0.6rem;
        color: #9fb4d4;
        white-space: nowrap;
    }

        .gz-tip-row b[b-fzkfhw3gtb] {
            color: #eaf0fb;
            font-weight: 700;
        }
    /* Keyed on NigeriaMap.ZoneOrder's index rather than on a zone name, so a rename in the
   database cannot silently detach a tooltip from its zone. */
    .gz-map-canvas:has(.faac-zone[data-zi="0"]:hover) .gz-zone-tip[data-zi="0"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="0"]:focus-visible) .gz-zone-tip[data-zi="0"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="1"]:hover) .gz-zone-tip[data-zi="1"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="1"]:focus-visible) .gz-zone-tip[data-zi="1"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="2"]:hover) .gz-zone-tip[data-zi="2"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="2"]:focus-visible) .gz-zone-tip[data-zi="2"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="3"]:hover) .gz-zone-tip[data-zi="3"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="3"]:focus-visible) .gz-zone-tip[data-zi="3"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="4"]:hover) .gz-zone-tip[data-zi="4"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="4"]:focus-visible) .gz-zone-tip[data-zi="4"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="5"]:hover) .gz-zone-tip[data-zi="5"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="5"]:focus-visible) .gz-zone-tip[data-zi="5"][b-fzkfhw3gtb] {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -100%) translateY(-0.55rem) scale(1);
    }
    /* A zone near the top of the map hangs its tooltip downwards instead, so the tip stays
   inside the card. */
    .gz-tip-below[b-fzkfhw3gtb] {
        transform: translate(-50%, 0) translateY(0.4rem) scale(0.97);
        transform-origin: 50% 0;
    }

    .gz-map-canvas:has(.faac-zone[data-zi="0"]:hover) .gz-tip-below[data-zi="0"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="0"]:focus-visible) .gz-tip-below[data-zi="0"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="1"]:hover) .gz-tip-below[data-zi="1"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="1"]:focus-visible) .gz-tip-below[data-zi="1"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="2"]:hover) .gz-tip-below[data-zi="2"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="2"]:focus-visible) .gz-tip-below[data-zi="2"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="3"]:hover) .gz-tip-below[data-zi="3"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="3"]:focus-visible) .gz-tip-below[data-zi="3"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="4"]:hover) .gz-tip-below[data-zi="4"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="4"]:focus-visible) .gz-tip-below[data-zi="4"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="5"]:hover) .gz-tip-below[data-zi="5"][b-fzkfhw3gtb],
    .gz-map-canvas:has(.faac-zone[data-zi="5"]:focus-visible) .gz-tip-below[data-zi="5"][b-fzkfhw3gtb] {
        transform: translate(-50%, 0) translateY(0.55rem) scale(1);
    }

    @media (prefers-reduced-motion: reduce) {
        .gz-map-canvas[b-fzkfhw3gtb]  .faac-zone,
        .gz-zone-tip[b-fzkfhw3gtb] {
            transition-duration: 1ms;
        }
    }
    /* ---------- Right column: insights, takeaways, extremes ---------- */
    .gz-insight-list[b-fzkfhw3gtb], .gz-takeaway-list[b-fzkfhw3gtb] {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: space-evenly;
    }

        .gz-insight-list li[b-fzkfhw3gtb], .gz-takeaway-list li[b-fzkfhw3gtb] {
            display: grid;
            grid-template-columns: 26px minmax(0, 1fr);
            gap: 0.45rem;
            align-items: center;
            padding: 0.26rem 0;
            border-bottom: 1px solid var(--fc-line-w06);
        }

            .gz-insight-list li:last-child[b-fzkfhw3gtb], .gz-takeaway-list li:last-child[b-fzkfhw3gtb] {
                border-bottom: none;
            }

    .gz-insight-icon[b-fzkfhw3gtb] {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .gz-insight-icon[b-fzkfhw3gtb]  svg {
            width: 14px;
            height: 14px;
            fill: none;
            stroke: #ffffff;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .gz-insight-text[b-fzkfhw3gtb], .gz-takeaway-text[b-fzkfhw3gtb] {
        font-size: 0.635rem;
        line-height: 1.32;
        color: var(--fc-ink-c8d1e0);
        min-width: 0;
    }

        .gz-insight-text[b-fzkfhw3gtb]  b, .gz-takeaway-text[b-fzkfhw3gtb]  b {
            color: var(--fc-ink);
            font-weight: 700;
        }

    .gz-check[b-fzkfhw3gtb] {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #3fa63f;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-left: 2px;
    }

        .gz-check svg[b-fzkfhw3gtb] {
            width: 13px;
            height: 13px;
            fill: none;
            stroke: #ffffff;
            stroke-width: 2.6;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .gz-extreme[b-fzkfhw3gtb] {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.4rem;
        border-radius: 8px;
        padding: 0.4rem 0.45rem;
        margin-bottom: 0.4rem;
    }

        .gz-extreme:last-child[b-fzkfhw3gtb] {
            margin-bottom: 0;
        }

    .gz-extreme-high[b-fzkfhw3gtb] {
        background: rgba(46, 160, 78, 0.14);
        border: 1px solid rgba(75, 191, 95, 0.3);
    }

    .gz-extreme-low[b-fzkfhw3gtb] {
        background: rgba(198, 40, 40, 0.14);
        border: 1px solid rgba(238, 91, 82, 0.3);
    }

    .gz-extreme-icon[b-fzkfhw3gtb] {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .gz-extreme-icon svg[b-fzkfhw3gtb] {
            width: 15px;
            height: 15px;
            fill: none;
            stroke: #ffffff;
            stroke-width: 2.4;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .gz-extreme-icon-up[b-fzkfhw3gtb] {
        background: #2ea04e;
    }

    .gz-extreme-icon-down[b-fzkfhw3gtb] {
        background: #c62828;
    }

    .gz-extreme-text[b-fzkfhw3gtb] {
        min-width: 0;
    }

    .gz-extreme-label[b-fzkfhw3gtb] {
        font-size: 0.55rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--fc-ink-9fabc0);
    }

    .gz-extreme-month[b-fzkfhw3gtb] {
        font-size: 0.63rem;
        color: var(--fc-ink-dfe6f0);
        white-space: nowrap;
    }

    .gz-extreme-value[b-fzkfhw3gtb] {
        font-size: 0.78rem;
        font-weight: 800;
        white-space: nowrap;
    }

        .gz-extreme-value span[b-fzkfhw3gtb] {
            font-size: 0.52rem;
            font-weight: 700;
            letter-spacing: 0.05em;
        }

        .gz-extreme-value.gz-up[b-fzkfhw3gtb] {
            color: var(--fc-ink-4bd47a);
        }

        .gz-extreme-value.gz-down[b-fzkfhw3gtb] {
            color: var(--fc-ink-ff8a80);
        }

    .gz-extreme-spark[b-fzkfhw3gtb] {
        width: 52px;
        height: 26px;
        flex-shrink: 0;
    }

        .gz-extreme-spark[b-fzkfhw3gtb]  .exec-spark-svg {
            display: block;
            width: 100%;
            height: 100%;
        }
    /* ---------- Footer strip ---------- */
    .gz-footer[b-fzkfhw3gtb] {
        background: var(--fc-surface-3);
        border: 1px solid var(--fc-line);
        border-radius: 10px;
        padding: 0.4rem 0.8rem;
        display: flex;
        align-items: center;
        gap: 1.1rem;
        flex-wrap: wrap;
    }

    .gz-footer-item[b-fzkfhw3gtb] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.62rem;
        color: var(--fc-ink-c2cbdb);
        white-space: nowrap;
    }

    .gz-footer-icon[b-fzkfhw3gtb] {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: #7f95b8;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

    .gz-footer-tagline[b-fzkfhw3gtb] {
        margin-left: auto;
        font-size: 0.68rem;
        font-weight: 700;
        font-style: italic;
        color: var(--fc-ink-35d17a);
        white-space: nowrap;
    }
    /* Printing: drop the controls and let the panels sit on white. */
    @media print {
        .gz-filter[b-fzkfhw3gtb] {
            display: none !important;
        }

        .gz-page[b-fzkfhw3gtb] {
            background: #ffffff;
            color: #16204a;
        }
    }
/* /Components/Pages/LgcAllocations.razor.rz.scp.css */
/* LGC Allocation Records — the council-tier twin of the State Allocation Records page.
   Same dark surfaces, KPI strip, panels, table and insight blocks as Home, State
   Analysis and LGC Analysis, and the same light filter bar as the Geopolitical Zones
   page, so the whole product reads as one thing.

   Chart canvas widths are set in the razor to match the column each chart sits in,
   because an SVG's type scales with its panel: rendered px = font units x panel width
   / canvas width. Matching them is what makes every chart come out at one type size. */

.so-page[b-8nugleu3s1] {
    background-color: var(--fc-page-bg);
    background-image:
        radial-gradient(120% 80% at 50% 0%, var(--fc-page-glow) 0%, var(--fc-page-glow-0) 70%),
        linear-gradient(180deg, var(--fc-page-wash-a) 0%, var(--fc-page-bg) 55%, var(--fc-page-wash-b) 100%);
    color: var(--fc-ink-e8eaf0);
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top row: brand block + light filter bar (Geopolitical Zones shape) ------ */
.sa-top[b-8nugleu3s1] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.sa-brand[b-8nugleu3s1] {
    /*background: #020b2b;
    border: 1px solid var(--fc-line);
    border-radius: 10px;*/
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Sized to its own content, as on the State Disbursement Records page: a fixed
       285px was cut for the small two-line label and clips the larger heading. */
    min-width: 0;
}

.sa-brand-logo[b-8nugleu3s1] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-brand-text[b-8nugleu3s1] { min-width: 0; }

/* Two lines, two colours — the header the Executive Summary, Geopolitical Zones, State
   Analysis and State Disbursement Records pages already use: the page name in white,
   and under it the period or scope currently in view, in amber. */
.sa-brand-text h1[b-8nugleu3s1] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--fc-ink);
}

.sa-brand-sub[b-8nugleu3s1] {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    color: var(--fc-ink-f5c842);
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
/* Filter bar: the font sizes and spacing of the Geopolitical Zones bar, which is
   the reference for this control across the dashboard. Only the type scale and the
   gaps differ from what was here before — the colours, borders and the chevron were
   already the same. */
.sa-filter[b-8nugleu3s1] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.sa-field[b-8nugleu3s1] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    margin-right:0.5rem;
}

.sa-field label[b-8nugleu3s1] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.sa-field-pair[b-8nugleu3s1] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.sa-select[b-8nugleu3s1] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.8rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.sa-select:focus[b-8nugleu3s1] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.sa-seg-row[b-8nugleu3s1] {
    display: flex;
    gap: 0.18rem;
}

.sa-seg[b-8nugleu3s1] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
    margin-left:0.5rem;

}

.sa-seg:hover[b-8nugleu3s1] { background: #e2e7f3; }

.sa-seg-on[b-8nugleu3s1] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.sa-search[b-8nugleu3s1] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.sa-search-icon[b-8nugleu3s1] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--fc-ink-6b7590);
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.sa-search-input[b-8nugleu3s1] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.sa-search-input[b-8nugleu3s1]::placeholder { color: var(--fc-ink-98a1b8); }

/* Buttons are as wide as their word and no wider. */
.sa-btn[b-8nugleu3s1] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-decoration: none;
    margin-left:0.5rem;
    margin-right:0.5rem;
}

.sa-btn-apply[b-8nugleu3s1] { background: #058940; }
.sa-btn-apply:hover[b-8nugleu3s1] { background: #047235; }
.sa-btn-apply:disabled[b-8nugleu3s1] { background: #6f8f7c; cursor: default; }
.sa-btn-reset[b-8nugleu3s1] { background: #8216d8; }
.sa-btn-reset:hover[b-8nugleu3s1] { background: #6f10ba; }
.sa-btn-export[b-8nugleu3s1] { background: #8216d8; }
.sa-btn-export:hover[b-8nugleu3s1] { background: #6f10ba; color: #ffffff; }
.sa-btn-print[b-8nugleu3s1] { background: #0324d9; }
.sa-btn-print:hover[b-8nugleu3s1] { background: #021fb8; }

.sa-btn-icon[b-8nugleu3s1] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .sa-filter[b-8nugleu3s1] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.sa-select-year[b-8nugleu3s1],
.sa-select-state[b-8nugleu3s1],
.sa-select-year[b-8nugleu3s1],
.sa-select-state[b-8nugleu3s1],
.sa-select-zone[b-8nugleu3s1] {
    width: max-content;
    min-width: 0;
}

/* ---------- Status blocks ---------- */
.so-loading[b-8nugleu3s1] { color: var(--fc-ink-muted); font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-8nugleu3s1], .so-warn[b-8nugleu3s1] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-8nugleu3s1] { background: var(--fc-surface); border: 1px solid var(--fc-line-022); }
.so-empty strong[b-8nugleu3s1] { color: var(--fc-ink); font-size: 0.9rem; }
.so-empty span[b-8nugleu3s1] { color: var(--fc-ink-9fabc0); font-size: 0.76rem; }

.sa-empty-inline[b-8nugleu3s1] { margin-bottom: 0; padding: 0.7rem 0.9rem; }
.sa-empty-inline strong[b-8nugleu3s1] { font-size: 0.76rem; }
.sa-empty-inline span[b-8nugleu3s1] { font-size: 0.66rem; }

.so-warn[b-8nugleu3s1] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-8nugleu3s1] { color: var(--fc-ink-ffd79a); font-size: 0.76rem; }
.so-warn span[b-8nugleu3s1] { color: var(--fc-ink-cfb894); font-size: 0.7rem; }

/* ---------- KPI strip ---------- */
.so-kpis[b-8nugleu3s1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.sa-kpis[b-8nugleu3s1] { margin-bottom: 0.6rem; }

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-8nugleu3s1] {
    border-radius: 8px;
    padding: 0.34rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-8nugleu3s1] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-8nugleu3s1] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-8nugleu3s1] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-8nugleu3s1] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-8nugleu3s1] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-8nugleu3s1] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-num[b-8nugleu3s1] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-8nugleu3s1] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Rows and panels ---------- */
.so-row[b-8nugleu3s1] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The records table is the point of the page, so it gets the full width. 
.sa-row-table { grid-template-columns: minmax(0, 1fr); }*/
.sa-row-table[b-8nugleu3s1] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0,0.75fr);
    
}


/* Trend canvas 620, donut canvas 470 — the fractions carry the same 1.32:1 ratio so
   both charts render at one type size. The insight list needs the least room. */
.sa-row-b[b-8nugleu3s1] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* Both canvases are 765, so the columns are equal. */
.sa-row-c[b-8nugleu3s1] { grid-template-columns: 1fr 1fr; }

.so-panel[b-8nugleu3s1] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-title[b-8nugleu3s1] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fc-ink);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-8nugleu3s1] {
    font-weight: 500;
    font-size: 0.6rem;
    color: var(--fc-ink-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-8nugleu3s1]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* Panel header: title on the left, row-count chips on the right. */
.sa-panel-head[b-8nugleu3s1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-panel-meta[b-8nugleu3s1] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.sa-chip[b-8nugleu3s1] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sa-chip-count[b-8nugleu3s1] { background: rgba(120, 165, 235, 0.16); color: var(--fc-ink-bcd3f2); }
.sa-chip-search[b-8nugleu3s1] { background: rgba(245, 200, 66, 0.16); color: var(--fc-ink-f5d98a); }
.sa-chip-view[b-8nugleu3s1] { background: rgba(47, 168, 90, 0.18); color: var(--fc-ink-8ee4ab); }

/* ---------- Tiles ---------- */
.so-tiles[b-8nugleu3s1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.sa-tiles[b-8nugleu3s1] { margin-top: auto; padding-top: 0.4rem; }

.so-tile[b-8nugleu3s1] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid var(--fc-line-w10);
    background: var(--fc-overlay-soft);
}

.so-tile-good[b-8nugleu3s1] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-info[b-8nugleu3s1] { border-color: var(--fc-line-04); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-8nugleu3s1] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
}

.so-tile-val[b-8nugleu3s1] {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--fc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-8nugleu3s1] { font-size: 0.56rem; color: var(--fc-ink-a8b6cd); }

/* ---------- The records table ---------- */
.so-table-scroll[b-8nugleu3s1] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--fc-line-022);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--fc-line-05) transparent;
}

/* Tall enough to read a year at a glance, short enough that the analytics below stay
   on the same screen. */
.sa-table-scroll[b-8nugleu3s1] { max-height: 312px; }

.so-table-scroll[b-8nugleu3s1]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-8nugleu3s1]::-webkit-scrollbar-track { background: var(--fc-overlay-soft); }
.so-table-scroll[b-8nugleu3s1]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-8nugleu3s1]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-8nugleu3s1] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    white-space: nowrap;
}

.so-table thead th[b-8nugleu3s1] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-8nugleu3s1] {
    padding: 0.24rem 0.45rem;
    border-bottom: 1px solid var(--fc-line-012);
    color: var(--fc-ink-dfe6f0);
}

.so-table tbody tr:nth-child(even) td[b-8nugleu3s1] { background: var(--fc-overlay-zebra); }
.so-table tbody tr:hover td[b-8nugleu3s1] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-8nugleu3s1] { text-align: right; }
.so-table thead th.so-num[b-8nugleu3s1] { text-align: right; }
.so-money[b-8nugleu3s1] { font-variant-numeric: tabular-nums; }
.so-td-state[b-8nugleu3s1] { font-weight: 700; color: var(--fc-ink); }

.so-table tfoot td[b-8nugleu3s1] {
    position: sticky;
    bottom: 0;
    background: var(--fc-tfoot-bg);
    color: var(--fc-ink);
    font-weight: 700;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid var(--fc-tfoot-line);
}

.so-table tfoot .so-td-state[b-8nugleu3s1] { text-transform: uppercase; letter-spacing: 0.04em; }

/* Colour carries meaning here: the period is a neutral pill, the two money columns take
   the same hues as their series in the charts, and the zone chip uses the zone's own
   colour from the map — with its ink chosen by measured contrast, not assumed. */
.sa-th-period[b-8nugleu3s1], .sa-td-period[b-8nugleu3s1] { width: 6.2rem; }
.sa-th-lgcs[b-8nugleu3s1] { width: 5.2rem; }

.sa-period-pill[b-8nugleu3s1] {
    display: inline-block;
    background: rgba(120, 165, 235, 0.14);
    border: 1px solid var(--fc-line-026);
    border-radius: 5px;
    padding: 0.02rem 0.32rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--fc-ink-cddff7);
}

.sa-fct-tag[b-8nugleu3s1] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #a9560c;
    color: #ffffff;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.sa-td-state-amt[b-8nugleu3s1] { color: var(--fc-ink-9fc8ff); font-weight: 600; }
.sa-td-lgc-amt[b-8nugleu3s1] { color: var(--fc-ink-93e6ac); font-weight: 600; }

.sa-count-chip[b-8nugleu3s1] {
    display: inline-block;
    min-width: 1.55rem;
    background: rgba(47, 168, 90, 0.16);
    border: 1px solid rgba(47, 168, 90, 0.34);
    border-radius: 5px;
    padding: 0.02rem 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--fc-ink-8ee4ab);
    text-align: center;
}

.sa-zone-chip[b-8nugleu3s1] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Executive insights ---------- */
.keyinsight-panel-title[b-8nugleu3s1] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fc-ink);
    margin-bottom: 0.5rem;
}

.keyinsights-title[b-8nugleu3s1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exec-bulb-icon[b-8nugleu3s1] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--fc-ink-f5c842);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.exec-insight-section[b-8nugleu3s1] { margin-top: 0.5rem; }
.exec-insight-section:first-of-type[b-8nugleu3s1] { margin-top: 0.1rem; }

.exec-insight-heading[b-8nugleu3s1] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fc-ink-f5c842);
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-8nugleu3s1] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-8nugleu3s1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-8nugleu3s1] {
    color: var(--fc-ink-93a1b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-8nugleu3s1] { color: var(--fc-ink-eaf0f8); font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-8nugleu3s1] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-8nugleu3s1] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-trend-list li:last-child[b-8nugleu3s1] { border-bottom: none; }

.exec-trend-arrow[b-8nugleu3s1] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-8nugleu3s1]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-8nugleu3s1] { font-size: 0.635rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-trend-headline[b-8nugleu3s1] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-8nugleu3s1] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-8nugleu3s1] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-insights-list li:last-child[b-8nugleu3s1] { border-bottom: none; }

.exec-insight-icon[b-8nugleu3s1] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-8nugleu3s1]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-8nugleu3s1] { font-size: 0.635rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-insight-accent[b-8nugleu3s1] { font-weight: 700; }

/* ---------- Footer ---------- */
.so-foot[b-8nugleu3s1] {
    font-size: 0.58rem;
    color: var(--fc-ink-faint);
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .sa-row-b[b-8nugleu3s1] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sa-row-b[b-8nugleu3s1], .sa-row-c[b-8nugleu3s1] { grid-template-columns: minmax(0, 1fr); }
    .sa-top[b-8nugleu3s1] { flex-direction: column; }
    .sa-brand[b-8nugleu3s1] { flex: 1 1 auto; }
    .so-kpis[b-8nugleu3s1] { flex-direction: column; }
    .so-kpi[b-8nugleu3s1] { flex: 1 1 auto; }
}

@media print {
    .sa-filter[b-8nugleu3s1] { display: none !important; }
    .sa-table-scroll[b-8nugleu3s1] { max-height: none; overflow: visible; }
}

/* ---------- Council-tier table columns ---------- */
.sa-th-share[b-8nugleu3s1], .sa-td-share[b-8nugleu3s1] { width: 5.4rem; }
.sa-td-share[b-8nugleu3s1] { color: var(--fc-ink-b9c6dc); }
.sa-td-statename[b-8nugleu3s1] { color: var(--fc-ink-a8b6cd); }
/* /Components/Pages/LgcOverview.razor.rz.scp.css */
/* State Analysis dashboard — dark navy, consistent with Home and Geopolitical Zones.
   Layout follows the reference designs: a KPI strip across the top, then a four-column
   row of ranked/spatial analytics, a four-column row of trend/heatmap/statistics, and a
   final row led by the full state ranking table. */

.so-page[b-ft0t4mnssk] {
    background-color: var(--fc-page-bg);
    background-image:
        radial-gradient(120% 80% at 50% 0%, var(--fc-page-glow) 0%, var(--fc-page-glow-0) 70%),
        linear-gradient(180deg, var(--fc-page-wash-a) 0%, var(--fc-page-bg) 55%, var(--fc-page-wash-b) 100%);
    color: var(--fc-ink-e8eaf0);
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Header: brand, KPIs and filter on one line ---------- */
/* The KPIs size to their own content rather than to equal columns, which is what frees
   the horizontal room for the filter to sit beside them. */
.so-top[b-ft0t4mnssk] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}

.so-brand[b-ft0t4mnssk] {
    /*background: #011140;
    border: 1px solid var(--fc-line);
    border-radius: 8px;*/
    padding: 0.35rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.05rem;
    flex: 0 1 auto;
    min-width: 0;
}

.so-title[b-ft0t4mnssk] {
    min-width: 0;
}

/* Same two-line header as the State Analysis page: page name in white, period in amber. */
.so-title h1[b-ft0t4mnssk] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--fc-ink);
}

.so-title-sub[b-ft0t4mnssk] {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    color: var(--fc-ink-f5c842);
    margin-top: 0.1rem;
}

.so-range[b-ft0t4mnssk] { font-size: 0.53rem; color: var(--fc-ink-faint); white-space: nowrap; }

/* Its own row under the header rather than a third item on the header line, so the
   filter keeps the width it needs and the five tiles read as one strip — the shape the
   Geopolitical Zones and Executive Summary pages use. */
.so-kpis[b-ft0t4mnssk] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem;
    min-width: 0;
    margin-bottom: 0.5rem;
}

@media (max-width: 1250px) {
    .so-kpis[b-ft0t4mnssk] { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

.so-kpi[b-ft0t4mnssk] {
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-ft0t4mnssk] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-ft0t4mnssk] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-ft0t4mnssk] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-ft0t4mnssk] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-ft0t4mnssk] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-ft0t4mnssk] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-cap-note[b-ft0t4mnssk] { font-weight: 500; text-transform: none; letter-spacing: 0; }

.so-kpi-num[b-ft0t4mnssk] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-ft0t4mnssk] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Filter, inline with the KPIs ---------- */
/* Filter bar: the font sizes and spacing of the Geopolitical Zones bar, which is
   the reference for this control across the dashboard. Only the type scale and the
   gaps differ from what was here before — the colours, borders and the chevron were
   already the same. */
.so-filter[b-ft0t4mnssk] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.so-field[b-ft0t4mnssk] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    margin-right:0.5rem;
}

.so-field label[b-ft0t4mnssk] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
    white-space: nowrap;
    margin: 0;
}

.so-field-pair[b-ft0t4mnssk] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.so-select[b-ft0t4mnssk] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.8rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.so-select:focus[b-ft0t4mnssk] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

.so-select-year[b-ft0t4mnssk],
.so-select-state[b-ft0t4mnssk],
.so-select-zone[b-ft0t4mnssk] {
    width: max-content;
    min-width: 0;
}

.so-btn[b-ft0t4mnssk] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-decoration: none;
    margin-left:0.5rem;
    margin-right:0.5rem;
}

.so-btn-apply[b-ft0t4mnssk] { background: #058940; }
.so-btn-apply:hover[b-ft0t4mnssk] { background: #047235; }
.so-btn-apply:disabled[b-ft0t4mnssk] { background: #6f8f7c; cursor: default; }

/* ---------- States: loading, empty, stale ---------- */
.so-loading[b-ft0t4mnssk] { color: var(--fc-ink-muted); font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-ft0t4mnssk], .so-warn[b-ft0t4mnssk] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-ft0t4mnssk] { background: var(--fc-surface); border: 1px solid var(--fc-line-022); }
.so-empty strong[b-ft0t4mnssk] { color: var(--fc-ink); font-size: 0.9rem; }
.so-empty span[b-ft0t4mnssk] { color: var(--fc-ink-9fabc0); font-size: 0.76rem; }

.so-warn[b-ft0t4mnssk] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-ft0t4mnssk] { color: var(--fc-ink-ffd79a); font-size: 0.76rem; }
.so-warn span[b-ft0t4mnssk] { color: var(--fc-ink-cfb894); font-size: 0.7rem; }

/* ---------- Rows and panels ---------- */
.so-row[b-ft0t4mnssk] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The two ranked lists give width to the Performance Summary, which carries a donut and
   four tiles. The canvases are then sized so all three cards come out the same content
   height — see the builder calls in StateOverview.razor — instead of the grid stretching
   two short cards to match a tall one. */
.so-row-a[b-ft0t4mnssk] { grid-template-columns: 0.75fr 0.75fr 1.5fr; }

/* The trend chart is drawn on a 620-unit canvas and carries a six-item legend, so it
   takes the widest column of its row; the insight list needs the least. */
.so-row-b[b-ft0t4mnssk] { grid-template-columns: 1.18fr 0.94fr 0.88fr; }
.so-row-c[b-ft0t4mnssk] { grid-template-columns: 1.55fr 1fr 1fr; }

.so-panel[b-ft0t4mnssk] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-stack[b-ft0t4mnssk] {
    display: grid;
    gap: 0.59rem;
    min-width: 0;
    grid-template-rows: max-content max-content;
}

.so-panel-title[b-ft0t4mnssk] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fc-ink);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-ft0t4mnssk] {
    font-weight: 500;
    font-size: 0.6rem;
    color: var(--fc-ink-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-ft0t4mnssk]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* ---------- Tiles (performance summary) ---------- */
.so-tiles[b-ft0t4mnssk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.so-tile[b-ft0t4mnssk] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid var(--fc-line-w10);
    background: var(--fc-overlay-soft);
}

.so-tile-good[b-ft0t4mnssk] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-bad[b-ft0t4mnssk] { border-color: rgba(255, 138, 128, 0.4); background: rgba(255, 138, 128, 0.1); }
.so-tile-info[b-ft0t4mnssk] { border-color: var(--fc-line-04); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-ft0t4mnssk] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
}

.so-tile-val[b-ft0t4mnssk] {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--fc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-ft0t4mnssk] { font-size: 0.56rem; color: var(--fc-ink-a8b6cd); }

.so-up[b-ft0t4mnssk] { color: var(--fc-ink-4bd47a); }
.so-down[b-ft0t4mnssk] { color: var(--fc-ink-ff8a80); }

/* ---------- Key insights: Summary / Trends / Key Findings ---------- */
/* Same structure as the home page's Executive Insights panel, one step down in size
   because this card sits in a narrower column. */
.so-panel-insights[b-ft0t4mnssk] { min-width: 0; }

.exec-insight-section[b-ft0t4mnssk] { margin-top: 0.7rem; }
.exec-insight-section:first-of-type[b-ft0t4mnssk] { margin-top: 0.1rem; }

.exec-insight-heading[b-ft0t4mnssk] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fc-ink-f5c842);
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-ft0t4mnssk] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-ft0t4mnssk] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-ft0t4mnssk] {
    color: var(--fc-ink-93a1b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-ft0t4mnssk] { color: var(--fc-ink-eaf0f8); font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-ft0t4mnssk] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-ft0t4mnssk] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-trend-list li:last-child[b-ft0t4mnssk] { border-bottom: none; }

.exec-trend-arrow[b-ft0t4mnssk] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-ft0t4mnssk]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-ft0t4mnssk] { font-size: 0.685rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-trend-headline[b-ft0t4mnssk] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-ft0t4mnssk] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-ft0t4mnssk] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-insights-list li:last-child[b-ft0t4mnssk] { border-bottom: none; }

.exec-insight-icon[b-ft0t4mnssk] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-ft0t4mnssk]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-ft0t4mnssk] { font-size: 0.685rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-insight-accent[b-ft0t4mnssk] { font-weight: 700; }

.exec-bulb-icon[b-ft0t4mnssk] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--fc-ink-f5c842);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ---------- Growth badges ---------- */
.so-badges[b-ft0t4mnssk] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
}

.so-badge[b-ft0t4mnssk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    border-radius: 7px;
    padding: 0.3rem 0.15rem;
    min-width: 0;
}

.so-badge-up[b-ft0t4mnssk] { border: 1px solid rgba(75, 212, 122, 0.45); background: rgba(75, 212, 122, 0.1); }
.so-badge-down[b-ft0t4mnssk] { border: 1px solid rgba(255, 138, 128, 0.45); background: rgba(255, 138, 128, 0.1); }

.so-badge-rank[b-ft0t4mnssk] { font-size: 0.54rem; font-weight: 800; }
.so-badge-up .so-badge-rank[b-ft0t4mnssk] { color: var(--fc-ink-4bd47a); }
.so-badge-down .so-badge-rank[b-ft0t4mnssk] { color: var(--fc-ink-ff8a80); }

.so-badge-name[b-ft0t4mnssk] {
    font-size: 0.56rem;
    font-weight: 700;
    color: var(--fc-ink);
    text-align: center;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.so-badge-num[b-ft0t4mnssk] { font-size: 0.54rem; font-weight: 700; color: var(--fc-ink-c2cbdb); }

/* ---------- State ranking table ---------- */
.so-panel-table[b-ft0t4mnssk] { min-width: 0; }

/* Fixed height, so the card matches the reference design while the body scrolls through
   every state. The header stays put as you scroll. */
.so-table-scroll[b-ft0t4mnssk] {
    max-height: 268px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--fc-line-022);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--fc-line-05) transparent;
}

.so-table-scroll[b-ft0t4mnssk]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-ft0t4mnssk]::-webkit-scrollbar-track { background: var(--fc-overlay-soft); }
.so-table-scroll[b-ft0t4mnssk]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-ft0t4mnssk]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-ft0t4mnssk] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.6rem;
    white-space: nowrap;
}

.so-table thead th[b-ft0t4mnssk] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.4rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-ft0t4mnssk] {
    padding: 0.26rem 0.4rem;
    border-bottom: 1px solid var(--fc-line-012);
    color: var(--fc-ink-dfe6f0);
}

.so-table tbody tr:nth-child(even) td[b-ft0t4mnssk] { background: var(--fc-overlay-zebra); }
.so-table tbody tr:hover td[b-ft0t4mnssk] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-ft0t4mnssk] { text-align: right; }
.so-money[b-ft0t4mnssk] { font-variant-numeric: tabular-nums; }
.so-th-rank[b-ft0t4mnssk], .so-td-rank[b-ft0t4mnssk] { text-align: right; width: 2.6rem; color: var(--fc-ink-muted); }
.so-td-state[b-ft0t4mnssk] { font-weight: 700; color: var(--fc-ink); }
.so-td-zone[b-ft0t4mnssk] { color: var(--fc-ink-a8b6cd); }

.so-table tfoot td[b-ft0t4mnssk] {
    position: sticky;
    bottom: 0;
    background: var(--fc-tfoot-bg);
    color: var(--fc-ink);
    font-weight: 700;
    padding: 0.3rem 0.4rem;
    border-top: 1px solid var(--fc-tfoot-line);
}

.so-table tfoot .so-td-state[b-ft0t4mnssk] { text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Footer ---------- */
.so-foot[b-ft0t4mnssk] {
    font-size: 0.58rem;
    color: var(--fc-ink-faint);
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1500px) {
    .so-filter[b-ft0t4mnssk] { margin-left: 0; }
}

@media (max-width: 1280px) {
    .so-row-a[b-ft0t4mnssk], .so-row-b[b-ft0t4mnssk] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .so-row-c[b-ft0t4mnssk] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
    .so-row-a[b-ft0t4mnssk], .so-row-b[b-ft0t4mnssk], .so-row-c[b-ft0t4mnssk] { grid-template-columns: 1fr; }
    .so-kpis[b-ft0t4mnssk] { grid-template-columns: minmax(0, 1fr); }
}

@media print {
    .so-filter[b-ft0t4mnssk] { display: none; }
    .so-table-scroll[b-ft0t4mnssk] { max-height: none; overflow: visible; }
}
.state-exec-main-grid[b-ft0t4mnssk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(255px, 25.5%);
    gap: 0.85rem;
    margin-bottom: 0.85rem;
    align-items: stretch;
}
.state-exec-main-left[b-ft0t4mnssk] {
    display: grid;
    grid-template-rows: auto auto;
    gap: 0.85rem;
    min-width: 0;
}
.state-exec-panel-row[b-ft0t4mnssk] {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.state-exec-panel-row-trend[b-ft0t4mnssk] {
    grid-template-columns: 1.3fr 1fr;
}
.state-so-row-c[b-ft0t4mnssk] {
    grid-template-columns: 1.55fr 1fr;
}
.state-exec-main-right[b-ft0t4mnssk] {
    background: var(--fc-surface-2);
    border: 1px solid var(--fc-line-018);
    border-radius: 10px;
    padding: 0.75rem 0.9rem 0.85rem;
    display: grid;
    gap: 1.65rem;
    min-width: 0;
    grid-template-rows: max-content max-content;
}
.keyinsight-panel-title[b-ft0t4mnssk] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fc-ink);
    margin-bottom: 0.5rem;
}
.keyinsights-title[b-ft0t4mnssk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.exec-bulb-icon[b-ft0t4mnssk] {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: var(--fc-ink-f5c842);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
/* /Components/Pages/MonthlyAnalysis.razor.rz.scp.css */
/* Monthly Analysis — the same dark surfaces, filter bar, KPI strip, panels, table and
   insight blocks as the rest of the dashboard.

   Chart canvas widths are set in the razor to match the column each chart sits in,
   because an SVG's type scales with its panel: rendered px = font units x panel width
   / canvas width. Matching them is what makes every chart come out at one type size:
   625 in the 1.32fr column, 470 in the ~1fr columns, 765 across half the page, and two
   215-unit dials side by side in one column. */

.so-page[b-svnms7rpbg] {
    background-color: var(--fc-page-bg);
    background-image:
        radial-gradient(120% 80% at 50% 0%, var(--fc-page-glow) 0%, var(--fc-page-glow-0) 70%),
        linear-gradient(180deg, var(--fc-page-wash-a) 0%, var(--fc-page-bg) 55%, var(--fc-page-wash-b) 100%);
    color: var(--fc-ink-e8eaf0);
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top row: brand block + light filter bar (Geopolitical Zones shape) ------ */
.sa-top[b-svnms7rpbg] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.sa-brand[b-svnms7rpbg] {
    background: var(--fc-surface-deep);
    border: 1px solid var(--fc-line);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Sized to its own content, as on the State Disbursement Records page: a fixed
       285px was cut for the small two-line label and clips the larger heading. */
    min-width: 0;
}

.sa-brand-logo[b-svnms7rpbg] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-brand-text[b-svnms7rpbg] { min-width: 0; }

/* Two lines, two colours — the header the Executive Summary, Geopolitical Zones, State
   Analysis and State Disbursement Records pages already use: the page name in white,
   and under it the period or scope currently in view, in amber. */
.sa-brand-text h1[b-svnms7rpbg] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--fc-ink);
}

.sa-brand-sub[b-svnms7rpbg] {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    color: var(--fc-ink-f5c842);
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
/* Filter bar: the font sizes and spacing of the Geopolitical Zones bar, which is
   the reference for this control across the dashboard. Only the type scale and the
   gaps differ from what was here before — the colours, borders and the chevron were
   already the same. */
.sa-filter[b-svnms7rpbg] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.sa-field[b-svnms7rpbg] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    margin-right:0.5rem;
}

.sa-field label[b-svnms7rpbg] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.sa-field-pair[b-svnms7rpbg] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.sa-select[b-svnms7rpbg] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.8rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.sa-select:focus[b-svnms7rpbg] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.sa-seg-row[b-svnms7rpbg] {
    display: flex;
    gap: 0.18rem;
}

.sa-seg[b-svnms7rpbg] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
    margin-left:0.5rem;

}

.sa-seg:hover[b-svnms7rpbg] { background: #e2e7f3; }

.sa-seg-on[b-svnms7rpbg] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.sa-search[b-svnms7rpbg] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.sa-search-icon[b-svnms7rpbg] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--fc-ink-6b7590);
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.sa-search-input[b-svnms7rpbg] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.sa-search-input[b-svnms7rpbg]::placeholder { color: var(--fc-ink-98a1b8); }

/* Buttons are as wide as their word and no wider. */
.sa-btn[b-svnms7rpbg] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-decoration: none;
    margin-left:0.5rem;
    margin-right:0.5rem;
}

.sa-btn-apply[b-svnms7rpbg] { background: #058940; }
.sa-btn-apply:hover[b-svnms7rpbg] { background: #047235; }
.sa-btn-apply:disabled[b-svnms7rpbg] { background: #6f8f7c; cursor: default; }
.sa-btn-reset[b-svnms7rpbg] { background: #8216d8; }
.sa-btn-reset:hover[b-svnms7rpbg] { background: #6f10ba; }
.sa-btn-export[b-svnms7rpbg] { background: #8216d8; }
.sa-btn-export:hover[b-svnms7rpbg] { background: #6f10ba; color: #ffffff; }
.sa-btn-print[b-svnms7rpbg] { background: #0324d9; }
.sa-btn-print:hover[b-svnms7rpbg] { background: #021fb8; }

.sa-btn-icon[b-svnms7rpbg] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .sa-filter[b-svnms7rpbg] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.sa-select-year[b-svnms7rpbg],
.sa-select-state[b-svnms7rpbg],
.sa-select-year[b-svnms7rpbg],
.sa-select-state[b-svnms7rpbg],
.sa-select-zone[b-svnms7rpbg] {
    width: max-content;
    min-width: 0;
}

/* ---------- Status blocks ---------- */
.so-loading[b-svnms7rpbg] { color: var(--fc-ink-muted); font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-svnms7rpbg], .so-warn[b-svnms7rpbg] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-svnms7rpbg] { background: var(--fc-surface); border: 1px solid var(--fc-line-022); }
.so-empty strong[b-svnms7rpbg] { color: var(--fc-ink); font-size: 0.9rem; }
.so-empty span[b-svnms7rpbg] { color: var(--fc-ink-9fabc0); font-size: 0.76rem; }

.sa-empty-inline[b-svnms7rpbg] { margin-bottom: 0; padding: 0.7rem 0.9rem; }
.sa-empty-inline strong[b-svnms7rpbg] { font-size: 0.76rem; }
.sa-empty-inline span[b-svnms7rpbg] { font-size: 0.66rem; }

.so-warn[b-svnms7rpbg] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-svnms7rpbg] { color: var(--fc-ink-ffd79a); font-size: 0.76rem; }
.so-warn span[b-svnms7rpbg] { color: var(--fc-ink-cfb894); font-size: 0.7rem; }

/* ---------- KPI strip ---------- */
.so-kpis[b-svnms7rpbg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.sa-kpis[b-svnms7rpbg] { margin-bottom: 0.6rem; }

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-svnms7rpbg] {
    border-radius: 8px;
    padding: 0.34rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-svnms7rpbg] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-svnms7rpbg] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-svnms7rpbg] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-svnms7rpbg] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-svnms7rpbg] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-svnms7rpbg] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-num[b-svnms7rpbg] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-svnms7rpbg] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Rows and panels ---------- */
.so-row[b-svnms7rpbg] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The records table is the point of the page, so it gets the full width. 
.sa-row-table { grid-template-columns: minmax(0, 1fr); }*/
.sa-row-table[b-svnms7rpbg] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0,0.75fr);
    
}


/* Trend canvas 620, donut canvas 470 — the fractions carry the same 1.32:1 ratio so
   both charts render at one type size. The insight list needs the least room. */
.sa-row-b[b-svnms7rpbg] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* Both canvases are 765, so the columns are equal. */
.sa-row-c[b-svnms7rpbg] { grid-template-columns: 1fr 1fr; }

.so-panel[b-svnms7rpbg] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-title[b-svnms7rpbg] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fc-ink);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-svnms7rpbg] {
    font-weight: 500;
    font-size: 0.6rem;
    color: var(--fc-ink-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-svnms7rpbg]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* Panel header: title on the left, row-count chips on the right. */
.sa-panel-head[b-svnms7rpbg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-panel-meta[b-svnms7rpbg] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.sa-chip[b-svnms7rpbg] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sa-chip-count[b-svnms7rpbg] { background: rgba(120, 165, 235, 0.16); color: var(--fc-ink-bcd3f2); }
.sa-chip-search[b-svnms7rpbg] { background: rgba(245, 200, 66, 0.16); color: var(--fc-ink-f5d98a); }
.sa-chip-view[b-svnms7rpbg] { background: rgba(47, 168, 90, 0.18); color: var(--fc-ink-8ee4ab); }

/* ---------- Tiles ---------- */
.so-tiles[b-svnms7rpbg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.sa-tiles[b-svnms7rpbg] { margin-top: auto; padding-top: 0.4rem; }

.so-tile[b-svnms7rpbg] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid var(--fc-line-w10);
    background: var(--fc-overlay-soft);
}

.so-tile-good[b-svnms7rpbg] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-info[b-svnms7rpbg] { border-color: var(--fc-line-04); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-svnms7rpbg] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
}

.so-tile-val[b-svnms7rpbg] {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--fc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-svnms7rpbg] { font-size: 0.56rem; color: var(--fc-ink-a8b6cd); }

/* ---------- The records table ---------- */
.so-table-scroll[b-svnms7rpbg] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--fc-line-022);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--fc-line-05) transparent;
}

/* Tall enough to read a year at a glance, short enough that the analytics below stay
   on the same screen. */
.sa-table-scroll[b-svnms7rpbg] { max-height: 312px; }

.so-table-scroll[b-svnms7rpbg]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-svnms7rpbg]::-webkit-scrollbar-track { background: var(--fc-overlay-soft); }
.so-table-scroll[b-svnms7rpbg]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-svnms7rpbg]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-svnms7rpbg] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    white-space: nowrap;
}

.so-table thead th[b-svnms7rpbg] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-svnms7rpbg] {
    padding: 0.24rem 0.45rem;
    border-bottom: 1px solid var(--fc-line-012);
    color: var(--fc-ink-dfe6f0);
}

.so-table tbody tr:nth-child(even) td[b-svnms7rpbg] { background: var(--fc-overlay-zebra); }
.so-table tbody tr:hover td[b-svnms7rpbg] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-svnms7rpbg] { text-align: right; }
.so-table thead th.so-num[b-svnms7rpbg] { text-align: right; }
.so-money[b-svnms7rpbg] { font-variant-numeric: tabular-nums; }
.so-td-state[b-svnms7rpbg] { font-weight: 700; color: var(--fc-ink); }

.so-table tfoot td[b-svnms7rpbg] {
    position: sticky;
    bottom: 0;
    background: var(--fc-tfoot-bg);
    color: var(--fc-ink);
    font-weight: 700;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid var(--fc-tfoot-line);
}

.so-table tfoot .so-td-state[b-svnms7rpbg] { text-transform: uppercase; letter-spacing: 0.04em; }

/* Colour carries meaning here: the period is a neutral pill, the two money columns take
   the same hues as their series in the charts, and the zone chip uses the zone's own
   colour from the map — with its ink chosen by measured contrast, not assumed. */
.sa-th-period[b-svnms7rpbg], .sa-td-period[b-svnms7rpbg] { width: 6.2rem; }
.sa-th-lgcs[b-svnms7rpbg] { width: 5.2rem; }

.sa-period-pill[b-svnms7rpbg] {
    display: inline-block;
    background: rgba(120, 165, 235, 0.14);
    border: 1px solid var(--fc-line-026);
    border-radius: 5px;
    padding: 0.02rem 0.32rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--fc-ink-cddff7);
}

.sa-fct-tag[b-svnms7rpbg] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #a9560c;
    color: #ffffff;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.sa-td-state-amt[b-svnms7rpbg] { color: var(--fc-ink-9fc8ff); font-weight: 600; }
.sa-td-lgc-amt[b-svnms7rpbg] { color: var(--fc-ink-93e6ac); font-weight: 600; }

.sa-count-chip[b-svnms7rpbg] {
    display: inline-block;
    min-width: 1.55rem;
    background: rgba(47, 168, 90, 0.16);
    border: 1px solid rgba(47, 168, 90, 0.34);
    border-radius: 5px;
    padding: 0.02rem 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--fc-ink-8ee4ab);
    text-align: center;
}

.sa-zone-chip[b-svnms7rpbg] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Executive insights ---------- */
.keyinsight-panel-title[b-svnms7rpbg] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fc-ink);
    margin-bottom: 0.5rem;
}

.keyinsights-title[b-svnms7rpbg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exec-bulb-icon[b-svnms7rpbg] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--fc-ink-f5c842);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.exec-insight-section[b-svnms7rpbg] { margin-top: 0.5rem; }
.exec-insight-section:first-of-type[b-svnms7rpbg] { margin-top: 0.1rem; }

.exec-insight-heading[b-svnms7rpbg] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fc-ink-f5c842);
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-svnms7rpbg] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-svnms7rpbg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-svnms7rpbg] {
    color: var(--fc-ink-93a1b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-svnms7rpbg] { color: var(--fc-ink-eaf0f8); font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-svnms7rpbg] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-svnms7rpbg] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-trend-list li:last-child[b-svnms7rpbg] { border-bottom: none; }

.exec-trend-arrow[b-svnms7rpbg] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-svnms7rpbg]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-svnms7rpbg] { font-size: 0.635rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-trend-headline[b-svnms7rpbg] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-svnms7rpbg] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-svnms7rpbg] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-insights-list li:last-child[b-svnms7rpbg] { border-bottom: none; }

.exec-insight-icon[b-svnms7rpbg] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-svnms7rpbg]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-svnms7rpbg] { font-size: 0.635rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-insight-accent[b-svnms7rpbg] { font-weight: 700; }

/* ---------- Footer ---------- */
.so-foot[b-svnms7rpbg] {
    font-size: 0.58rem;
    color: var(--fc-ink-faint);
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .sa-row-b[b-svnms7rpbg] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sa-row-b[b-svnms7rpbg], .sa-row-c[b-svnms7rpbg] { grid-template-columns: minmax(0, 1fr); }
    .sa-top[b-svnms7rpbg] { flex-direction: column; }
    .sa-brand[b-svnms7rpbg] { flex: 1 1 auto; }
    .so-kpis[b-svnms7rpbg] { flex-direction: column; }
    .so-kpi[b-svnms7rpbg] { flex: 1 1 auto; }
}

@media print {
    .sa-filter[b-svnms7rpbg] { display: none !important; }
    .sa-table-scroll[b-svnms7rpbg] { max-height: none; overflow: visible; }
}

/* ---------- Row grids ---------- */
/* A: the monthly series (625) | the focus month (470) | two dials. */
.ma-row-a[b-svnms7rpbg] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* B: the focus-month columns (625) | the seasonal shape (470) | the insight list. */
.ma-row-b[b-svnms7rpbg] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* C: two 765-unit canvases, so the columns are equal. */
.ma-row-c[b-svnms7rpbg] { grid-template-columns: 1fr 1fr; }

/* Up to 78 monthly rows, so the body scrolls inside the card. */
.ma-table-scroll[b-svnms7rpbg] { max-height: 300px; }

/* Two dials share one card, side by side, each taking half the width. */
.ma-dials[b-svnms7rpbg] { min-width: 0; }

.ma-dial-row[b-svnms7rpbg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    align-items: center;
    margin-block: auto;
    min-width: 0;
}

@media (max-width: 1280px) {
    .ma-row-a[b-svnms7rpbg], .ma-row-b[b-svnms7rpbg] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .ma-row-a[b-svnms7rpbg], .ma-row-b[b-svnms7rpbg], .ma-row-c[b-svnms7rpbg] { grid-template-columns: minmax(0, 1fr); }
    .ma-dial-row[b-svnms7rpbg] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/StateAllocations.razor.rz.scp.css */
/* State Allocation Records — dark navy dashboard, same surfaces and type scale as Home,
   State Analysis and LGC Analysis. The filter bar deliberately follows the Geopolitical
   Zones page instead: a light panel sitting beside the brand block, so the two pages
   read as the same product.

   Chart canvas widths are set in the razor to the same ratio as the grid fractions
   below (row B 620:470, row C 765:765), because an SVG's type scales with its panel:
   rendered px = font units x panel width / canvas width. Keeping that ratio constant is
   what makes every chart on the page come out at one font size. */

.so-page[b-3vsgvtk1j0] {
    background-color: var(--fc-page-bg);
    background-image:
        radial-gradient(120% 80% at 50% 0%, var(--fc-page-glow) 0%, var(--fc-page-glow-0) 70%),
        linear-gradient(180deg, var(--fc-page-wash-a) 0%, var(--fc-page-bg) 55%, var(--fc-page-wash-b) 100%);
    color: var(--fc-ink-e8eaf0);
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top row: brand block + light filter bar (Geopolitical Zones shape) ------ */
.sa-top[b-3vsgvtk1j0] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.sa-brand[b-3vsgvtk1j0] {
    /*background: #020b2b;
    border: 1px solid var(--fc-line);
    border-radius: 10px;*/
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /*flex: 0 0 300px;*/
    min-width: 0;
}

.sa-brand-logo[b-3vsgvtk1j0] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-brand-text[b-3vsgvtk1j0] { min-width: 0; }


.sa-brand-text h1[b-3vsgvtk1j0] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--fc-ink);
}

.sa-brand-title[b-3vsgvtk1j0] {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--fc-ink);
    line-height: 1.15;
}



.sa-brand-sub1[b-3vsgvtk1j0] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--fc-ink-35d17a);
    line-height: 1.2;
}

.sa-brand-sub[b-3vsgvtk1j0] {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    color: var(--fc-ink-f5c842);
    margin-top: 0.1rem;
}

.sa-brand-range[b-3vsgvtk1j0] {
    font-size: 0.63rem;
    color: var(--fc-ink-b6c1d2);
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
/* Filter bar: the font sizes and spacing of the Geopolitical Zones bar, which is
   the reference for this control across the dashboard. Only the type scale and the
   gaps differ from what was here before — the colours, borders and the chevron were
   already the same. */
.sa-filter[b-3vsgvtk1j0] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.sa-field[b-3vsgvtk1j0] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    margin-right:0.5rem;
}

.sa-field label[b-3vsgvtk1j0] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.sa-field-pair[b-3vsgvtk1j0] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.sa-select[b-3vsgvtk1j0] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.8rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.sa-select:focus[b-3vsgvtk1j0] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.sa-seg-row[b-3vsgvtk1j0] {
    display: flex;
    gap: 0.18rem;
}

.sa-seg[b-3vsgvtk1j0] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
    margin-left:0.5rem;

}

.sa-seg:hover[b-3vsgvtk1j0] { background: #e2e7f3; }

.sa-seg-on[b-3vsgvtk1j0] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.sa-search[b-3vsgvtk1j0] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.sa-search-icon[b-3vsgvtk1j0] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--fc-ink-6b7590);
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.sa-search-input[b-3vsgvtk1j0] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.sa-search-input[b-3vsgvtk1j0]::placeholder { color: var(--fc-ink-98a1b8); }

/* Buttons are as wide as their word and no wider. */
.sa-btn[b-3vsgvtk1j0] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-decoration: none;
    margin-left:0.5rem;
    margin-right:0.5rem;
}

.sa-btn-apply[b-3vsgvtk1j0] { background: #058940; }
.sa-btn-apply:hover[b-3vsgvtk1j0] { background: #047235; }
.sa-btn-apply:disabled[b-3vsgvtk1j0] { background: #6f8f7c; cursor: default; }
.sa-btn-reset[b-3vsgvtk1j0] { background: #8216d8; }
.sa-btn-reset:hover[b-3vsgvtk1j0] { background: #6f10ba; }
.sa-btn-export[b-3vsgvtk1j0] { background: #8216d8; }
.sa-btn-export:hover[b-3vsgvtk1j0] { background: #6f10ba; color: #ffffff; }
.sa-btn-print[b-3vsgvtk1j0] { background: #0324d9; }
.sa-btn-print:hover[b-3vsgvtk1j0] { background: #021fb8; }

.sa-btn-icon[b-3vsgvtk1j0] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .sa-filter[b-3vsgvtk1j0] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.sa-select-year[b-3vsgvtk1j0],
.sa-select-state[b-3vsgvtk1j0],
.sa-select-year[b-3vsgvtk1j0],
.sa-select-state[b-3vsgvtk1j0],
.sa-select-zone[b-3vsgvtk1j0] {
    width: max-content;
    min-width: 0;
}

/* ---------- Status blocks ---------- */
.so-loading[b-3vsgvtk1j0] { color: var(--fc-ink-muted); font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-3vsgvtk1j0], .so-warn[b-3vsgvtk1j0] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-3vsgvtk1j0] { background: var(--fc-surface); border: 1px solid var(--fc-line-022); }
.so-empty strong[b-3vsgvtk1j0] { color: var(--fc-ink); font-size: 0.9rem; }
.so-empty span[b-3vsgvtk1j0] { color: var(--fc-ink-9fabc0); font-size: 0.76rem; }

.sa-empty-inline[b-3vsgvtk1j0] { margin-bottom: 0; padding: 0.7rem 0.9rem; }
.sa-empty-inline strong[b-3vsgvtk1j0] { font-size: 0.76rem; }
.sa-empty-inline span[b-3vsgvtk1j0] { font-size: 0.66rem; }

.so-warn[b-3vsgvtk1j0] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-3vsgvtk1j0] { color: var(--fc-ink-ffd79a); font-size: 0.76rem; }
.so-warn span[b-3vsgvtk1j0] { color: var(--fc-ink-cfb894); font-size: 0.7rem; }

/* ---------- KPI strip ---------- */
.so-kpis[b-3vsgvtk1j0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.sa-kpis[b-3vsgvtk1j0] { margin-bottom: 0.6rem; }

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-3vsgvtk1j0] {
    border-radius: 8px;
    padding: 0.34rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-3vsgvtk1j0] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-3vsgvtk1j0] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-3vsgvtk1j0] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-3vsgvtk1j0] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-3vsgvtk1j0] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-3vsgvtk1j0] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-num[b-3vsgvtk1j0] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-3vsgvtk1j0] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Rows and panels ---------- */
.so-row[b-3vsgvtk1j0] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The records table is the point of the page, so it gets the full width. 
.sa-row-table { grid-template-columns: minmax(0, 1fr); }*/
.sa-row-table[b-3vsgvtk1j0] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0,0.75fr);
    
}


/* Trend canvas 620, donut canvas 470 — the fractions carry the same 1.32:1 ratio so
   both charts render at one type size. The insight list needs the least room. */
.sa-row-b[b-3vsgvtk1j0] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* Both canvases are 765, so the columns are equal. */
.sa-row-c[b-3vsgvtk1j0] { grid-template-columns: 1fr 1fr; }

.so-panel[b-3vsgvtk1j0] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-title[b-3vsgvtk1j0] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fc-ink);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-3vsgvtk1j0] {
    font-weight: 500;
    font-size: 0.6rem;
    color: var(--fc-ink-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-3vsgvtk1j0]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* Panel header: title on the left, row-count chips on the right. */
.sa-panel-head[b-3vsgvtk1j0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-panel-meta[b-3vsgvtk1j0] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.sa-chip[b-3vsgvtk1j0] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sa-chip-count[b-3vsgvtk1j0] { background: rgba(120, 165, 235, 0.16); color: var(--fc-ink-bcd3f2); }
.sa-chip-search[b-3vsgvtk1j0] { background: rgba(245, 200, 66, 0.16); color: var(--fc-ink-f5d98a); }
.sa-chip-view[b-3vsgvtk1j0] { background: rgba(47, 168, 90, 0.18); color: var(--fc-ink-8ee4ab); }

/* ---------- Tiles ---------- */
.so-tiles[b-3vsgvtk1j0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.sa-tiles[b-3vsgvtk1j0] { margin-top: auto; padding-top: 0.4rem; }

.so-tile[b-3vsgvtk1j0] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid var(--fc-line-w10);
    background: var(--fc-overlay-soft);
}

.so-tile-good[b-3vsgvtk1j0] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-info[b-3vsgvtk1j0] { border-color: var(--fc-line-04); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-3vsgvtk1j0] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
}

.so-tile-val[b-3vsgvtk1j0] {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--fc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-3vsgvtk1j0] { font-size: 0.56rem; color: var(--fc-ink-a8b6cd); }

/* ---------- The records table ---------- */
.so-table-scroll[b-3vsgvtk1j0] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--fc-line-022);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--fc-line-05) transparent;
}

/* Tall enough to read a year at a glance, short enough that the analytics below stay
   on the same screen. */
.sa-table-scroll[b-3vsgvtk1j0] { max-height: 312px; }

.so-table-scroll[b-3vsgvtk1j0]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-3vsgvtk1j0]::-webkit-scrollbar-track { background: var(--fc-overlay-soft); }
.so-table-scroll[b-3vsgvtk1j0]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-3vsgvtk1j0]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-3vsgvtk1j0] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    white-space: nowrap;
}

.so-table thead th[b-3vsgvtk1j0] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-3vsgvtk1j0] {
    padding: 0.24rem 0.45rem;
    border-bottom: 1px solid var(--fc-line-012);
    color: var(--fc-ink-dfe6f0);
}

.so-table tbody tr:nth-child(even) td[b-3vsgvtk1j0] { background: var(--fc-overlay-zebra); }
.so-table tbody tr:hover td[b-3vsgvtk1j0] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-3vsgvtk1j0] { text-align: right; }
.so-table thead th.so-num[b-3vsgvtk1j0] { text-align: right; }
.so-money[b-3vsgvtk1j0] { font-variant-numeric: tabular-nums; }
.so-td-state[b-3vsgvtk1j0] { font-weight: 700; color: var(--fc-ink); }

.so-table tfoot td[b-3vsgvtk1j0] {
    position: sticky;
    bottom: 0;
    background: var(--fc-tfoot-bg);
    color: var(--fc-ink);
    font-weight: 700;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid var(--fc-tfoot-line);
}

.so-table tfoot .so-td-state[b-3vsgvtk1j0] { text-transform: uppercase; letter-spacing: 0.04em; }

/* Colour carries meaning here: the period is a neutral pill, the two money columns take
   the same hues as their series in the charts, and the zone chip uses the zone's own
   colour from the map — with its ink chosen by measured contrast, not assumed. */
.sa-th-period[b-3vsgvtk1j0], .sa-td-period[b-3vsgvtk1j0] { width: 6.2rem; }
.sa-th-lgcs[b-3vsgvtk1j0] { width: 5.2rem; }

.sa-period-pill[b-3vsgvtk1j0] {
    display: inline-block;
    background: rgba(120, 165, 235, 0.14);
    border: 1px solid var(--fc-line-026);
    border-radius: 5px;
    padding: 0.02rem 0.32rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--fc-ink-cddff7);
}

.sa-fct-tag[b-3vsgvtk1j0] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #a9560c;
    color: #ffffff;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.sa-td-state-amt[b-3vsgvtk1j0] { color: var(--fc-ink-9fc8ff); font-weight: 600; }
.sa-td-lgc-amt[b-3vsgvtk1j0] { color: var(--fc-ink-93e6ac); font-weight: 600; }

.sa-count-chip[b-3vsgvtk1j0] {
    display: inline-block;
    min-width: 1.55rem;
    background: rgba(47, 168, 90, 0.16);
    border: 1px solid rgba(47, 168, 90, 0.34);
    border-radius: 5px;
    padding: 0.02rem 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--fc-ink-8ee4ab);
    text-align: center;
}

.sa-zone-chip[b-3vsgvtk1j0] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Executive insights ---------- */
.keyinsight-panel-title[b-3vsgvtk1j0] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fc-ink);
    margin-bottom: 0.5rem;
}

.keyinsights-title[b-3vsgvtk1j0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exec-bulb-icon[b-3vsgvtk1j0] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--fc-ink-f5c842);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.exec-insight-section[b-3vsgvtk1j0] { margin-top: 0.5rem; }
.exec-insight-section:first-of-type[b-3vsgvtk1j0] { margin-top: 0.1rem; }

.exec-insight-heading[b-3vsgvtk1j0] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fc-ink-f5c842);
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-3vsgvtk1j0] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-3vsgvtk1j0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-3vsgvtk1j0] {
    color: var(--fc-ink-93a1b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-3vsgvtk1j0] { color: var(--fc-ink-eaf0f8); font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-3vsgvtk1j0] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-3vsgvtk1j0] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-trend-list li:last-child[b-3vsgvtk1j0] { border-bottom: none; }

.exec-trend-arrow[b-3vsgvtk1j0] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-3vsgvtk1j0]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-3vsgvtk1j0] { font-size: 0.635rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-trend-headline[b-3vsgvtk1j0] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-3vsgvtk1j0] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-3vsgvtk1j0] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-insights-list li:last-child[b-3vsgvtk1j0] { border-bottom: none; }

.exec-insight-icon[b-3vsgvtk1j0] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-3vsgvtk1j0]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-3vsgvtk1j0] { font-size: 0.635rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-insight-accent[b-3vsgvtk1j0] { font-weight: 700; }

/* ---------- Footer ---------- */
.so-foot[b-3vsgvtk1j0] {
    font-size: 0.58rem;
    color: var(--fc-ink-faint);
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .sa-row-b[b-3vsgvtk1j0] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sa-row-b[b-3vsgvtk1j0], .sa-row-c[b-3vsgvtk1j0] { grid-template-columns: minmax(0, 1fr); }
    .sa-top[b-3vsgvtk1j0] { flex-direction: column; }
    .sa-brand[b-3vsgvtk1j0] { flex: 1 1 auto; }
    .so-kpis[b-3vsgvtk1j0] { flex-direction: column; }
    .so-kpi[b-3vsgvtk1j0] { flex: 1 1 auto; }
}

@media print {
    .sa-filter[b-3vsgvtk1j0] { display: none !important; }
    .sa-table-scroll[b-3vsgvtk1j0] { max-height: none; overflow: visible; }
}
/* /Components/Pages/StateOverview.razor.rz.scp.css */
/* State Analysis dashboard — dark navy, consistent with Home and Geopolitical Zones.
   Layout follows the reference designs: a KPI strip across the top, then a four-column
   row of ranked/spatial analytics, a four-column row of trend/heatmap/statistics, and a
   final row led by the full state ranking table. */

.so-page[b-u3jw74mape] {
    background-color: var(--fc-page-bg);
    background-image:
        radial-gradient(120% 80% at 50% 0%, var(--fc-page-glow) 0%, var(--fc-page-glow-0) 70%),
        linear-gradient(180deg, var(--fc-page-wash-a) 0%, var(--fc-page-bg) 55%, var(--fc-page-wash-b) 100%);
    color: var(--fc-ink-e8eaf0);
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Header: brand, KPIs and filter on one line ---------- */
/* The KPIs size to their own content rather than to equal columns, which is what frees
   the horizontal room for the filter to sit beside them. */
.so-top[b-u3jw74mape] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}

.so-brand[b-u3jw74mape] {
   /* background: #011140;
    border: 1px solid var(--fc-line);
    border-radius: 8px;*/
    padding: 0.35rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.05rem;
    flex: 0 1 auto;
    min-width: 0;
}

.so-title[b-u3jw74mape] {
    min-width: 0;
    /*font-size: 0.68rem;
    font-weight: 800;
    color: var(--fc-ink);
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;*/
}

    .so-title h1[b-u3jw74mape] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 800;
        letter-spacing: 0.01em;
        line-height: 1.1;
        color: var(--fc-ink);
    }

.so-title-sub[b-u3jw74mape] {
    display: block;
    /*font-size: 0.53rem;
    font-weight: 600;
    color: var(--fc-ink-muted);
    letter-spacing: 0.05em;*/
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    color: var(--fc-ink-f5c842);
    margin-top: 0.1rem;
}

.so-range[b-u3jw74mape] { font-size: 0.53rem; color: var(--fc-ink-faint); white-space: nowrap; }

/* Its own row under the header rather than a third item on the header line, so the
   filter keeps the width it needs and the five tiles read as one strip — the shape the
   Geopolitical Zones and Executive Summary pages use. */
.so-kpis[b-u3jw74mape] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem;
    min-width: 0;
    margin-bottom: 0.5rem;
}

@media (max-width: 1250px) {
    .so-kpis[b-u3jw74mape] { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

.so-kpi[b-u3jw74mape] {
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-u3jw74mape] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-u3jw74mape] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-u3jw74mape] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-u3jw74mape] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-u3jw74mape] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-u3jw74mape] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-cap-note[b-u3jw74mape] { font-weight: 500; text-transform: none; letter-spacing: 0; }

.so-kpi-num[b-u3jw74mape] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-u3jw74mape] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Filter, inline with the KPIs ---------- */
/* Filter bar: the font sizes and spacing of the Geopolitical Zones bar, which is
   the reference for this control across the dashboard. Only the type scale and the
   gaps differ from what was here before — the colours, borders and the chevron were
   already the same. */
.so-filter[b-u3jw74mape] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.so-field[b-u3jw74mape] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    margin-right:0.5rem;
}

.so-field label[b-u3jw74mape] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
    white-space: nowrap;
    margin: 0;
}

.so-field-pair[b-u3jw74mape] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.so-select[b-u3jw74mape] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.8rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.so-select:focus[b-u3jw74mape] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

.so-select-year[b-u3jw74mape],
.so-select-state[b-u3jw74mape],
.so-select-zone[b-u3jw74mape] {
    width: max-content;
    min-width: 0;
}

.so-btn[b-u3jw74mape] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-decoration: none;
    margin-left:0.5rem;
    margin-right:0.5rem;
}

.so-btn-apply[b-u3jw74mape] { background: #058940; }
.so-btn-apply:hover[b-u3jw74mape] { background: #047235; }
.so-btn-apply:disabled[b-u3jw74mape] { background: #6f8f7c; cursor: default; }

/* ---------- States: loading, empty, stale ---------- */
.so-loading[b-u3jw74mape] { color: var(--fc-ink-muted); font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-u3jw74mape], .so-warn[b-u3jw74mape] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-u3jw74mape] { background: var(--fc-surface); border: 1px solid var(--fc-line-022); }
.so-empty strong[b-u3jw74mape] { color: var(--fc-ink); font-size: 0.9rem; }
.so-empty span[b-u3jw74mape] { color: var(--fc-ink-9fabc0); font-size: 0.76rem; }

.so-warn[b-u3jw74mape] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-u3jw74mape] { color: var(--fc-ink-ffd79a); font-size: 0.76rem; }
.so-warn span[b-u3jw74mape] { color: var(--fc-ink-cfb894); font-size: 0.7rem; }

/* ---------- Rows and panels ---------- */
.so-row[b-u3jw74mape] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The two ranked lists give width to the Performance Summary, which carries a donut and
   four tiles. The canvases are then sized so all three cards come out the same content
   height — see the builder calls in StateOverview.razor — instead of the grid stretching
   two short cards to match a tall one. 
.so-row-a { grid-template-columns: 0.85fr 0.85fr 1.3fr; }*/
.so-row-a[b-u3jw74mape] {
    grid-template-columns: minmax(0, 1fr)  minmax(0, 1fr)  minmax(0, 2fr) ;
    
}

/* The trend chart is drawn on a 620-unit canvas and carries a six-item legend, so it
   takes the widest column of its row; the insight list needs the least. */
.so-row-b[b-u3jw74mape] { grid-template-columns: 1.18fr 0.94fr 0.88fr; }
.so-row-c[b-u3jw74mape] { grid-template-columns: 1.55fr 1fr 1fr; }

.so-panel[b-u3jw74mape] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: grid;
    /*flex-direction: column;*/
}

.so-panel-stack[b-u3jw74mape] {
    display: grid;
    gap: 1.89rem;
    min-width: 0;
    grid-template-rows: auto auto;
}

.so-panel-title[b-u3jw74mape] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fc-ink);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-u3jw74mape] {
    font-weight: 500;
    font-size: 0.6rem;
    color: var(--fc-ink-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-u3jw74mape]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* ---------- Tiles (performance summary) ---------- */
.so-tiles[b-u3jw74mape] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    /*margin-top: 0.4rem;*/
}

.so-tile[b-u3jw74mape] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid var(--fc-line-w10);
    background: var(--fc-overlay-soft);
}

.so-tile-good[b-u3jw74mape] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-bad[b-u3jw74mape] { border-color: rgba(255, 138, 128, 0.4); background: rgba(255, 138, 128, 0.1); }
.so-tile-info[b-u3jw74mape] { border-color: var(--fc-line-04); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-u3jw74mape] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
}

.so-tile-val[b-u3jw74mape] {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--fc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-u3jw74mape] { font-size: 0.56rem; color: var(--fc-ink-a8b6cd); }

.so-up[b-u3jw74mape] { color: var(--fc-ink-4bd47a); }
.so-down[b-u3jw74mape] { color: var(--fc-ink-ff8a80); }

/* ---------- Key insights: Summary / Trends / Key Findings ---------- */
/* Same structure as the home page's Executive Insights panel, one step down in size
   because this card sits in a narrower column. */
.so-panel-insights[b-u3jw74mape] { min-width: 0; }

.exec-insight-section[b-u3jw74mape] { margin-top: 0.3rem; }
.exec-insight-section:first-of-type[b-u3jw74mape] { margin-top: 0.1rem; }

.exec-insight-heading[b-u3jw74mape] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fc-ink-f5c842);
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
    margin-top: 0.8rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-u3jw74mape] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-u3jw74mape] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-u3jw74mape] {
    color: var(--fc-ink-93a1b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-u3jw74mape] { color: var(--fc-ink-eaf0f8); font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-u3jw74mape] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-u3jw74mape] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-trend-list li:last-child[b-u3jw74mape] { border-bottom: none; }

.exec-trend-arrow[b-u3jw74mape] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-u3jw74mape]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-u3jw74mape] { font-size: 0.585rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-trend-headline[b-u3jw74mape] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-u3jw74mape] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-u3jw74mape] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-insights-list li:last-child[b-u3jw74mape] { border-bottom: none; }

.exec-insight-icon[b-u3jw74mape] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-u3jw74mape]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-u3jw74mape] { font-size: 0.585rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-insight-accent[b-u3jw74mape] { font-weight: 700; }

.exec-bulb-icon[b-u3jw74mape] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--fc-ink-f5c842);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ---------- Growth badges ---------- */
.so-badges[b-u3jw74mape] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
}

.so-badge[b-u3jw74mape] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    border-radius: 7px;
    padding: 0.3rem 0.15rem;
    min-width: 0;
}

.so-badge-up[b-u3jw74mape] { border: 1px solid rgba(75, 212, 122, 0.45); background: rgba(75, 212, 122, 0.1); }
.so-badge-down[b-u3jw74mape] { border: 1px solid rgba(255, 138, 128, 0.45); background: rgba(255, 138, 128, 0.1); }

.so-badge-rank[b-u3jw74mape] { font-size: 0.54rem; font-weight: 800; }
.so-badge-up .so-badge-rank[b-u3jw74mape] { color: var(--fc-ink-4bd47a); }
.so-badge-down .so-badge-rank[b-u3jw74mape] { color: var(--fc-ink-ff8a80); }

.so-badge-name[b-u3jw74mape] {
    font-size: 0.56rem;
    font-weight: 700;
    color: var(--fc-ink);
    text-align: center;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.so-badge-num[b-u3jw74mape] { font-size: 0.54rem; font-weight: 700; color: var(--fc-ink-c2cbdb); }

/* ---------- State ranking table ---------- */
.so-panel-table[b-u3jw74mape] { min-width: 0; }

/* Fixed height, so the card matches the reference design while the body scrolls through
   every state. The header stays put as you scroll. */
.so-table-scroll[b-u3jw74mape] {
    max-height: 268px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--fc-line-022);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--fc-line-05) transparent;
}

.so-table-scroll[b-u3jw74mape]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-u3jw74mape]::-webkit-scrollbar-track { background: var(--fc-overlay-soft); }
.so-table-scroll[b-u3jw74mape]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-u3jw74mape]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-u3jw74mape] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.6rem;
    white-space: nowrap;
}

.so-table thead th[b-u3jw74mape] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.4rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-u3jw74mape] {
    padding: 0.26rem 0.4rem;
    border-bottom: 1px solid var(--fc-line-012);
    color: var(--fc-ink-dfe6f0);
}

.so-table tbody tr:nth-child(even) td[b-u3jw74mape] { background: var(--fc-overlay-zebra); }
.so-table tbody tr:hover td[b-u3jw74mape] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-u3jw74mape] { text-align: right; }
.so-money[b-u3jw74mape] { font-variant-numeric: tabular-nums; }
.so-th-rank[b-u3jw74mape], .so-td-rank[b-u3jw74mape] { text-align: right; width: 2.6rem; color: var(--fc-ink-muted); }
.so-td-state[b-u3jw74mape] { font-weight: 700; color: var(--fc-ink); }
.so-td-zone[b-u3jw74mape] { color: var(--fc-ink-a8b6cd); }

.so-table tfoot td[b-u3jw74mape] {
    position: sticky;
    bottom: 0;
    background: var(--fc-tfoot-bg);
    color: var(--fc-ink);
    font-weight: 700;
    padding: 0.3rem 0.4rem;
    border-top: 1px solid var(--fc-tfoot-line);
}

.so-table tfoot .so-td-state[b-u3jw74mape] { text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Allocation map ---------- */
.so-row-map[b-u3jw74mape] { grid-template-columns: minmax(0, 1fr); }

.so-panel-map[b-u3jw74mape] {
    min-width: 0;
    grid-template-columns: 1fr;
}

.so-map-body[b-u3jw74mape] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

/* Capped rather than stretched: across the full row the map would stand over 800px tall,
   and the labels are already comfortable at this width. */
.so-map-body[b-u3jw74mape]  svg.faac-statemap-labelled {
    width: 100%;
    max-width: 1180px;
    height: auto;
    display: block;
}

.so-map-legend[b-u3jw74mape] { width: 100%; max-width: 300px; }

/* ---------- Footer ---------- */
.so-foot[b-u3jw74mape] {
    font-size: 0.58rem;
    color: var(--fc-ink-faint);
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1500px) {
    .so-filter[b-u3jw74mape] { margin-left: 0; }
}

@media (max-width: 1280px) {
    .so-row-a[b-u3jw74mape], .so-row-b[b-u3jw74mape] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .so-row-c[b-u3jw74mape] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
    .so-row-a[b-u3jw74mape], .so-row-b[b-u3jw74mape], .so-row-c[b-u3jw74mape] { grid-template-columns: 1fr; }
    .so-kpis[b-u3jw74mape] { grid-template-columns: minmax(0, 1fr); }
}

@media print {
    .so-filter[b-u3jw74mape] { display: none; }
    .so-table-scroll[b-u3jw74mape] { max-height: none; overflow: visible; }
}
.state-exec-main-grid[b-u3jw74mape] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(255px, 25.5%);
    gap: 0.55rem;
    margin-bottom: 0.55rem;
    align-items: stretch;
}
.state-exec-main-left[b-u3jw74mape] {
    display: grid;
    grid-template-rows: max-content max-content;
    gap: 0.55rem;
    min-width: 0;
}
.state-exec-main-right[b-u3jw74mape] {
    display: grid;
    grid-template-rows: max-content max-content 1fr;
    gap: 0.55rem;
    min-width: 0;
}
.state-exec-panel-row[b-u3jw74mape] {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.state-exec-panel-row-trend[b-u3jw74mape] {
    grid-template-columns: 1.3fr 1fr;
}
.state-so-row-c[b-u3jw74mape] {
    grid-template-columns: 1.55fr 1fr;
}
.state-exec-panel[b-u3jw74mape] {
   /* background: #01163e;
    border: 1px solid var(--fc-line-018);
    border-radius: 10px;*/
    padding: 0.75rem 0.9rem 0.85rem;
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    grid-template-rows: max-content max-content max-content;
}
.keyinsight-panel-title[b-u3jw74mape] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fc-ink);
    margin-bottom: 0.5rem;
}
.keyinsights-title[b-u3jw74mape] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.exec-bulb-icon[b-u3jw74mape] {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: var(--fc-ink-f5c842);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}


/* ---------- Phone layout ------------------------------------------------------------
   This block sits at the end of the file on purpose. `.state-exec-main-grid` and its two
   columns are declared below the older @media rules above, so a mobile override placed
   up there would be beaten by them; here it wins on source order.

   The bug it fixes: the main grid's right column is minmax(255px, 25.5%), which keeps
   its 255px floor whatever the viewport. On a 393px phone that left roughly 80px for the
   left column, so the map and the two growth tiles rendered too narrow to see at all.

   One column below 820px puts the panels in reading order, which is already their order
   in the markup: the map, fastest growth, slowest growth, the trend, top 5, bottom 5,
   then Key Insights. The three panels of the row above it — Top 10, Bottom 10 and the
   ranking table — keep their place above the map.                                     */
@media (max-width: 820px) {
    .state-exec-main-grid[b-u3jw74mape] {
        grid-template-columns: minmax(0, 1fr);
    }

    .state-exec-main-left[b-u3jw74mape],
    .state-exec-main-right[b-u3jw74mape] {
        grid-template-rows: auto;
    }

    /* Fastest above slowest rather than side by side in half a phone's width. The
       divider between them belongs on the bottom edge once they are stacked. */
    .so-tiles[b-u3jw74mape] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .so-tiles > div[style][b-u3jw74mape] {
        border-right: 0 !important;
        border-bottom: 1px solid grey;
        padding-bottom: 0.7rem;
    }

    .so-tiles > div[style]:last-child[b-u3jw74mape] {
        border-bottom: 0;
        padding-bottom: 0;
    }

    /* The map is drawn on a canvas over 1000px wide and carries a label per state, so
       app.css lets it render at full size below 820px; this is the panel that scrolls. */
    .so-map-body[b-u3jw74mape] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        align-items: flex-start;
    }

    .so-map-legend[b-u3jw74mape] {
        max-width: 100%;
    }
}
/* /Components/Pages/TrendAnalysis.razor.rz.scp.css */
/* Trend Analysis — the same dark surfaces, filter bar, KPI strip, panels, table and
   insight blocks as the rest of the dashboard.

   Chart canvas widths are set in the razor to match the column each chart sits in,
   because an SVG's type scales with its panel: rendered px = font units x panel width
   / canvas width. Matching them is what makes every chart come out at one type size:
   625 in the 1.32fr column, 470 in the ~1fr columns, 765 across half the page, and two
   215-unit dials side by side in one column. */

.so-page[b-6ugbaui281] {
    background-color: var(--fc-page-bg);
    background-image:
        radial-gradient(120% 80% at 50% 0%, var(--fc-page-glow) 0%, var(--fc-page-glow-0) 70%),
        linear-gradient(180deg, var(--fc-page-wash-a) 0%, var(--fc-page-bg) 55%, var(--fc-page-wash-b) 100%);
    color: var(--fc-ink-e8eaf0);
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top row: brand block + light filter bar (Geopolitical Zones shape) ------ */
.sa-top[b-6ugbaui281] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.sa-brand[b-6ugbaui281] {
    /*background: #020b2b;
    border: 1px solid var(--fc-line);
    border-radius: 10px;*/
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Sized to its own content, as on the State Disbursement Records page: a fixed
       285px was cut for the small two-line label and clips the larger heading. */
    min-width: 0;
}

.sa-brand-logo[b-6ugbaui281] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-brand-text[b-6ugbaui281] { min-width: 0; }

/* Two lines, two colours — the header the Executive Summary, Geopolitical Zones, State
   Analysis and State Disbursement Records pages already use: the page name in white,
   and under it the period or scope currently in view, in amber. */
.sa-brand-text h1[b-6ugbaui281] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--fc-ink);
}

.sa-brand-sub[b-6ugbaui281] {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    color: var(--fc-ink-f5c842);
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
/* Filter bar: the font sizes and spacing of the Geopolitical Zones bar, which is
   the reference for this control across the dashboard. Only the type scale and the
   gaps differ from what was here before — the colours, borders and the chevron were
   already the same. */
.sa-filter[b-6ugbaui281] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.sa-field[b-6ugbaui281] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    margin-right:0.5rem;
}

.sa-field label[b-6ugbaui281] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.sa-field-pair[b-6ugbaui281] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.sa-select[b-6ugbaui281] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.8rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.sa-select:focus[b-6ugbaui281] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.sa-seg-row[b-6ugbaui281] {
    display: flex;
    gap: 0.18rem;
}

.sa-seg[b-6ugbaui281] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
    margin-left:0.5rem;

}

.sa-seg:hover[b-6ugbaui281] { background: #e2e7f3; }

.sa-seg-on[b-6ugbaui281] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.sa-search[b-6ugbaui281] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.sa-search-icon[b-6ugbaui281] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--fc-ink-6b7590);
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.sa-search-input[b-6ugbaui281] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.sa-search-input[b-6ugbaui281]::placeholder { color: var(--fc-ink-98a1b8); }

/* Buttons are as wide as their word and no wider. */
.sa-btn[b-6ugbaui281] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-decoration: none;
    margin-left:0.5rem;
    margin-right:0.5rem;
}

.sa-btn-apply[b-6ugbaui281] { background: #058940; }
.sa-btn-apply:hover[b-6ugbaui281] { background: #047235; }
.sa-btn-apply:disabled[b-6ugbaui281] { background: #6f8f7c; cursor: default; }
.sa-btn-reset[b-6ugbaui281] { background: #8216d8; }
.sa-btn-reset:hover[b-6ugbaui281] { background: #6f10ba; }
.sa-btn-export[b-6ugbaui281] { background: #8216d8; }
.sa-btn-export:hover[b-6ugbaui281] { background: #6f10ba; color: #ffffff; }
.sa-btn-print[b-6ugbaui281] { background: #0324d9; }
.sa-btn-print:hover[b-6ugbaui281] { background: #021fb8; }

.sa-btn-icon[b-6ugbaui281] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .sa-filter[b-6ugbaui281] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.sa-select-year[b-6ugbaui281],
.sa-select-state[b-6ugbaui281],
.sa-select-year[b-6ugbaui281],
.sa-select-state[b-6ugbaui281],
.sa-select-zone[b-6ugbaui281] {
    width: max-content;
    min-width: 0;
}

/* ---------- Status blocks ---------- */
.so-loading[b-6ugbaui281] { color: var(--fc-ink-muted); font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-6ugbaui281], .so-warn[b-6ugbaui281] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-6ugbaui281] { background: var(--fc-surface); border: 1px solid var(--fc-line-022); }
.so-empty strong[b-6ugbaui281] { color: var(--fc-ink); font-size: 0.9rem; }
.so-empty span[b-6ugbaui281] { color: var(--fc-ink-9fabc0); font-size: 0.76rem; }

.sa-empty-inline[b-6ugbaui281] { margin-bottom: 0; padding: 0.7rem 0.9rem; }
.sa-empty-inline strong[b-6ugbaui281] { font-size: 0.76rem; }
.sa-empty-inline span[b-6ugbaui281] { font-size: 0.66rem; }

.so-warn[b-6ugbaui281] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-6ugbaui281] { color: var(--fc-ink-ffd79a); font-size: 0.76rem; }
.so-warn span[b-6ugbaui281] { color: var(--fc-ink-cfb894); font-size: 0.7rem; }

/* ---------- KPI strip ---------- */
.so-kpis[b-6ugbaui281] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.sa-kpis[b-6ugbaui281] { margin-bottom: 0.6rem; }

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-6ugbaui281] {
    border-radius: 8px;
    padding: 0.34rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-6ugbaui281] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-6ugbaui281] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-6ugbaui281] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-6ugbaui281] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-6ugbaui281] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-6ugbaui281] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-num[b-6ugbaui281] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-6ugbaui281] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Rows and panels ---------- */
.so-row[b-6ugbaui281] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The records table is the point of the page, so it gets the full width. 
.sa-row-table { grid-template-columns: minmax(0, 1fr); }*/
.sa-row-table[b-6ugbaui281] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0,0.75fr);
    
}


/* Trend canvas 620, donut canvas 470 — the fractions carry the same 1.32:1 ratio so
   both charts render at one type size. The insight list needs the least room. */
.sa-row-b[b-6ugbaui281] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* Both canvases are 765, so the columns are equal. */
.sa-row-c[b-6ugbaui281] { grid-template-columns: 1fr 1fr; }

.so-panel[b-6ugbaui281] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.so-panel-title[b-6ugbaui281] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fc-ink);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-6ugbaui281] {
    font-weight: 500;
    font-size: 0.6rem;
    color: var(--fc-ink-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-6ugbaui281]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* Panel header: title on the left, row-count chips on the right. */
.sa-panel-head[b-6ugbaui281] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-panel-meta[b-6ugbaui281] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.sa-chip[b-6ugbaui281] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sa-chip-count[b-6ugbaui281] { background: rgba(120, 165, 235, 0.16); color: var(--fc-ink-bcd3f2); }
.sa-chip-search[b-6ugbaui281] { background: rgba(245, 200, 66, 0.16); color: var(--fc-ink-f5d98a); }
.sa-chip-view[b-6ugbaui281] { background: rgba(47, 168, 90, 0.18); color: var(--fc-ink-8ee4ab); }

/* ---------- Tiles ---------- */
.so-tiles[b-6ugbaui281] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.sa-tiles[b-6ugbaui281] { margin-top: auto; padding-top: 0.4rem; }

.so-tile[b-6ugbaui281] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid var(--fc-line-w10);
    background: var(--fc-overlay-soft);
}

.so-tile-good[b-6ugbaui281] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-info[b-6ugbaui281] { border-color: var(--fc-line-04); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-6ugbaui281] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
}

.so-tile-val[b-6ugbaui281] {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--fc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-6ugbaui281] { font-size: 0.56rem; color: var(--fc-ink-a8b6cd); }

/* ---------- The records table ---------- */
.so-table-scroll[b-6ugbaui281] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--fc-line-022);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--fc-line-05) transparent;
}

/* Tall enough to read a year at a glance, short enough that the analytics below stay
   on the same screen. */
.sa-table-scroll[b-6ugbaui281] { max-height: 312px; }

.so-table-scroll[b-6ugbaui281]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-6ugbaui281]::-webkit-scrollbar-track { background: var(--fc-overlay-soft); }
.so-table-scroll[b-6ugbaui281]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-6ugbaui281]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-6ugbaui281] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    white-space: nowrap;
}

.so-table thead th[b-6ugbaui281] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-6ugbaui281] {
    padding: 0.24rem 0.45rem;
    border-bottom: 1px solid var(--fc-line-012);
    color: var(--fc-ink-dfe6f0);
}

.so-table tbody tr:nth-child(even) td[b-6ugbaui281] { background: var(--fc-overlay-zebra); }
.so-table tbody tr:hover td[b-6ugbaui281] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-6ugbaui281] { text-align: right; }
.so-table thead th.so-num[b-6ugbaui281] { text-align: right; }
.so-money[b-6ugbaui281] { font-variant-numeric: tabular-nums; }
.so-td-state[b-6ugbaui281] { font-weight: 700; color: var(--fc-ink); }

.so-table tfoot td[b-6ugbaui281] {
    position: sticky;
    bottom: 0;
    background: var(--fc-tfoot-bg);
    color: var(--fc-ink);
    font-weight: 700;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid var(--fc-tfoot-line);
}

.so-table tfoot .so-td-state[b-6ugbaui281] { text-transform: uppercase; letter-spacing: 0.04em; }

/* Colour carries meaning here: the period is a neutral pill, the two money columns take
   the same hues as their series in the charts, and the zone chip uses the zone's own
   colour from the map — with its ink chosen by measured contrast, not assumed. */
.sa-th-period[b-6ugbaui281], .sa-td-period[b-6ugbaui281] { width: 6.2rem; }
.sa-th-lgcs[b-6ugbaui281] { width: 5.2rem; }

.sa-period-pill[b-6ugbaui281] {
    display: inline-block;
    background: rgba(120, 165, 235, 0.14);
    border: 1px solid var(--fc-line-026);
    border-radius: 5px;
    padding: 0.02rem 0.32rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--fc-ink-cddff7);
}

.sa-fct-tag[b-6ugbaui281] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #a9560c;
    color: #ffffff;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.sa-td-state-amt[b-6ugbaui281] { color: var(--fc-ink-9fc8ff); font-weight: 600; }
.sa-td-lgc-amt[b-6ugbaui281] { color: var(--fc-ink-93e6ac); font-weight: 600; }

.sa-count-chip[b-6ugbaui281] {
    display: inline-block;
    min-width: 1.55rem;
    background: rgba(47, 168, 90, 0.16);
    border: 1px solid rgba(47, 168, 90, 0.34);
    border-radius: 5px;
    padding: 0.02rem 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--fc-ink-8ee4ab);
    text-align: center;
}

.sa-zone-chip[b-6ugbaui281] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Executive insights ---------- */
.keyinsight-panel-title[b-6ugbaui281] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fc-ink);
    margin-bottom: 0.5rem;
}

.keyinsights-title[b-6ugbaui281] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exec-bulb-icon[b-6ugbaui281] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--fc-ink-f5c842);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.exec-insight-section[b-6ugbaui281] { margin-top: 0.5rem; }
.exec-insight-section:first-of-type[b-6ugbaui281] { margin-top: 0.1rem; }

.exec-insight-heading[b-6ugbaui281] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fc-ink-f5c842);
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

/* Summary — label/value pairs, one line each. */
.exec-sum-list[b-6ugbaui281] { display: flex; flex-direction: column; gap: 0.1rem; }

.exec-sum-row[b-6ugbaui281] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    font-size: 0.585rem;
    line-height: 1.32;
}

.exec-sum-label[b-6ugbaui281] {
    color: var(--fc-ink-93a1b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.exec-sum-value[b-6ugbaui281] { color: var(--fc-ink-eaf0f8); font-weight: 600; text-align: right; min-width: 0; }

/* Trends — the arrow carries direction, so colour is never the only cue. */
.exec-trend-list[b-6ugbaui281] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-trend-list li[b-6ugbaui281] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: start;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-trend-list li:last-child[b-6ugbaui281] { border-bottom: none; }

.exec-trend-arrow[b-6ugbaui281] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1rem;
}

.exec-trend-arrow[b-6ugbaui281]  svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-trend-text[b-6ugbaui281] { font-size: 0.635rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-trend-headline[b-6ugbaui281] { font-weight: 700; }

/* Key findings — icon discs. */
.exec-insights-list[b-6ugbaui281] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.exec-insights-list li[b-6ugbaui281] {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0.36rem;
    align-items: center;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--fc-hairline);
}

.exec-insights-list li:last-child[b-6ugbaui281] { border-bottom: none; }

.exec-insight-icon[b-6ugbaui281] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exec-insight-icon[b-6ugbaui281]  svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exec-insight-text[b-6ugbaui281] { font-size: 0.635rem; line-height: 1.27; color: var(--fc-ink-soft); min-width: 0; }
.exec-insight-accent[b-6ugbaui281] { font-weight: 700; }

/* ---------- Footer ---------- */
.so-foot[b-6ugbaui281] {
    font-size: 0.58rem;
    color: var(--fc-ink-faint);
    text-align: center;
    padding: 0.4rem 0 0.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .sa-row-b[b-6ugbaui281] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .sa-row-b[b-6ugbaui281], .sa-row-c[b-6ugbaui281] { grid-template-columns: minmax(0, 1fr); }
    .sa-top[b-6ugbaui281] { flex-direction: column; }
    .sa-brand[b-6ugbaui281] { flex: 1 1 auto; }
    .so-kpis[b-6ugbaui281] { flex-direction: column; }
    .so-kpi[b-6ugbaui281] { flex: 1 1 auto; }
}

@media print {
    .sa-filter[b-6ugbaui281] { display: none !important; }
    .sa-table-scroll[b-6ugbaui281] { max-height: none; overflow: visible; }
}

/* ---------- Row grids ---------- */
/* A: the trajectory (625) | the rolling average (470) | two dials. */
.ta-row-a[b-6ugbaui281] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* B: fastest (470) | slowest (470) | the insight list. */
.ta-row-b[b-6ugbaui281] { grid-template-columns: 1.1fr 1.1fr 1fr; }

/* C: two 765-unit canvases, so the columns are equal. */
/* The map has a row to itself; the bands follow on their own. */
.ta-row-map[b-6ugbaui281] { grid-template-columns: minmax(0, 1fr); }
.ta-row-c[b-6ugbaui281] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    
}



/* Two dials share one card, side by side, each taking half the width. */
.ta-dials[b-6ugbaui281] { min-width: 0; }

.ta-dial-row[b-6ugbaui281] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    align-items: center;
    margin-block: auto;
    min-width: 0;
}

/* The map keeps Nigeria's own proportions and sits centred, with the ramp legend under
   it; the SVG carries no scope attribute of its own, hence ::deep. */
.ta-map-panel[b-6ugbaui281] { min-width: 0; }

.ta-map-body[b-6ugbaui281] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin-block: auto;
    min-width: 0;
}

/* 340px was right for an unlabelled shape in a half column. A labelled map needs room:
   at that cap the state names rendered under four pixels. Capped rather than stretched to
   the full row, where the map would stand over 800px tall. */
.ta-map-body[b-6ugbaui281]  svg.faac-statemap-labelled {
    width: 100%;
    max-width: 1180px;
    height: auto;
    display: block;
}

.ta-map-body[b-6ugbaui281]  svg.faac-chart {
    width: 100%;
    /*max-width: 340px;*/
    height: auto;
    display: block;
}

.ta-map-legend[b-6ugbaui281] { width: 100%; max-width: 300px; }

/* The bands card kept its old rendered width, so moving it to a full row did not quietly
   rescale its type. */
.ta-band-panel[b-6ugbaui281]  svg.faac-chart {
    width: 100%;
    max-width: 765px;
    margin: 0 auto;
}

@media (max-width: 1280px) {
    .ta-row-a[b-6ugbaui281], .ta-row-b[b-6ugbaui281] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .ta-row-a[b-6ugbaui281], .ta-row-b[b-6ugbaui281], .ta-row-c[b-6ugbaui281] { grid-template-columns: minmax(0, 1fr); }
    .ta-dial-row[b-6ugbaui281] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/YearlyAnalysis.razor.rz.scp.css */
/* Yearly Analysis — the same dark surfaces, filter bar, KPI strip, panels, table and
   insight blocks as the rest of the dashboard.

   Chart canvas widths are set in the razor to match the column each chart sits in,
   because an SVG's type scales with its panel: rendered px = font units x panel width
   / canvas width. Matching them is what makes every chart come out at one type size:
   625 in the 1.32fr column, 470 in the ~1fr columns, 765 across half the page, and two
   215-unit dials side by side in one column. */

.so-page[b-19n4y6rxy3] {
    background-color: var(--fc-page-bg);
    background-image:
        radial-gradient(120% 80% at 50% 0%, var(--fc-page-glow) 0%, var(--fc-page-glow-0) 70%),
        linear-gradient(180deg, var(--fc-page-wash-a) 0%, var(--fc-page-bg) 55%, var(--fc-page-wash-b) 100%);
    color: var(--fc-ink-e8eaf0);
    min-height: 100vh;
    padding: 0.55rem 0.7rem 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top row: brand block + light filter bar (Geopolitical Zones shape) ------ */
.sa-top[b-19n4y6rxy3] {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.sa-brand[b-19n4y6rxy3] {
    /*background: #020b2b;
    border: 1px solid var(--fc-line);
    border-radius: 10px;*/
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Sized to its own content, as on the State Disbursement Records page: a fixed
       285px was cut for the small two-line label and clips the larger heading. */
    min-width: 0;
}

.sa-brand-logo[b-19n4y6rxy3] {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-brand-text[b-19n4y6rxy3] { min-width: 0; }

/* Two lines, two colours — the header the Executive Summary, Geopolitical Zones, State
   Analysis and State Disbursement Records pages already use: the page name in white,
   and under it the period or scope currently in view, in amber. */
.sa-brand-text h1[b-19n4y6rxy3] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--fc-ink);
}

.sa-brand-sub[b-19n4y6rxy3] {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    color: var(--fc-ink-f5c842);
    margin-top: 0.1rem;
}

/* ---------- Filter: one compact single-line bar, identical on every page ----------
   The same bar as the State Analysis and LGC Analysis pages: a small dark panel sitting
   beside the brand block, not a wide light one wrapping onto three rows.

   Every box is `width: max-content; min-width: 0`, so it is exactly as wide as its own
   longest option and no wider — a month box is narrower than a state box, and nothing is
   padded out to a shared minimum. The bar itself does not wrap at desktop widths, so the
   whole filter reads as a single line; below 1400px it is allowed to wrap rather than
   overflow. */
/* Filter bar: the font sizes and spacing of the Geopolitical Zones bar, which is
   the reference for this control across the dashboard. Only the type scale and the
   gaps differ from what was here before — the colours, borders and the chevron were
   already the same. */
.sa-filter[b-19n4y6rxy3] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
}

.sa-field[b-19n4y6rxy3] {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    margin-right:0.5rem;
}

.sa-field label[b-19n4y6rxy3] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
    white-space: nowrap;
    margin: 0;
}

/* A month and its year read as one control, so they sit together with no label between. */
.sa-field-pair[b-19n4y6rxy3] {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
}

.sa-select[b-19n4y6rxy3] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5476' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 8px 5px;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    color: #16204a;
    font: inherit;
    font-size: 0.8rem;
    padding: 0.2rem 1rem 0.2rem 0.32rem;
    line-height: 1.25;
    width: max-content;
    min-width: 0;
}

.sa-select:focus[b-19n4y6rxy3] {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

/* Segmented choices, at the same height as the boxes beside them. */
.sa-seg-row[b-19n4y6rxy3] {
    display: flex;
    gap: 0.18rem;
}

.sa-seg[b-19n4y6rxy3] {
    border: 1px solid #c6ccdd;
    background: #eceff7;
    color: #3a4468;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 5px;
    padding: 0.2rem 0.42rem;
    cursor: pointer;
    line-height: 1.25;
    white-space: nowrap;
    margin-left:0.5rem;

}

.sa-seg:hover[b-19n4y6rxy3] { background: #e2e7f3; }

.sa-seg-on[b-19n4y6rxy3] {
    background: #0421c6;
    border-color: #0421c6;
    color: #ffffff;
}

/* Search sits in the bar but needs no Apply — it narrows rows already in scope. */
.sa-search[b-19n4y6rxy3] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border: 1px solid #c6ccdd;
    border-radius: 5px;
    padding: 0.14rem 0.32rem;
    min-width: 0;
}

.sa-search-icon[b-19n4y6rxy3] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--fc-ink-6b7590);
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.sa-search-input[b-19n4y6rxy3] {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.6rem;
    color: #16204a;
    width: 7rem;
    min-width: 0;
    padding: 0.04rem 0;
}

.sa-search-input[b-19n4y6rxy3]::placeholder { color: var(--fc-ink-98a1b8); }

/* Buttons are as wide as their word and no wider. */
.sa-btn[b-19n4y6rxy3] {
    appearance: none;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.26rem 0.6rem;
    color: #ffffff;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-decoration: none;
    margin-left:0.5rem;
    margin-right:0.5rem;
}

.sa-btn-apply[b-19n4y6rxy3] { background: #058940; }
.sa-btn-apply:hover[b-19n4y6rxy3] { background: #047235; }
.sa-btn-apply:disabled[b-19n4y6rxy3] { background: #6f8f7c; cursor: default; }
.sa-btn-reset[b-19n4y6rxy3] { background: #8216d8; }
.sa-btn-reset:hover[b-19n4y6rxy3] { background: #6f10ba; }
.sa-btn-export[b-19n4y6rxy3] { background: #8216d8; }
.sa-btn-export:hover[b-19n4y6rxy3] { background: #6f10ba; color: #ffffff; }
.sa-btn-print[b-19n4y6rxy3] { background: #0324d9; }
.sa-btn-print:hover[b-19n4y6rxy3] { background: #021fb8; }

.sa-btn-icon[b-19n4y6rxy3] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1400px) {
    .sa-filter[b-19n4y6rxy3] { flex-wrap: wrap; margin-left: 0; }
}

/* The month, year, state, council and zone boxes all size to their own content, so these
   hooks hold no width. They stay as per-page tweak points. */
.sa-select-year[b-19n4y6rxy3],
.sa-select-state[b-19n4y6rxy3],
.sa-select-year[b-19n4y6rxy3],
.sa-select-state[b-19n4y6rxy3],
.sa-select-zone[b-19n4y6rxy3] {
    width: max-content;
    min-width: 0;
}

/* ---------- Status blocks ---------- */
.so-loading[b-19n4y6rxy3] { color: var(--fc-ink-muted); font-size: 0.8rem; padding: 1rem 0; }

.so-empty[b-19n4y6rxy3], .so-warn[b-19n4y6rxy3] {
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.so-empty[b-19n4y6rxy3] { background: var(--fc-surface); border: 1px solid var(--fc-line-022); }
.so-empty strong[b-19n4y6rxy3] { color: var(--fc-ink); font-size: 0.9rem; }
.so-empty span[b-19n4y6rxy3] { color: var(--fc-ink-9fabc0); font-size: 0.76rem; }

.sa-empty-inline[b-19n4y6rxy3] { margin-bottom: 0; padding: 0.7rem 0.9rem; }
.sa-empty-inline strong[b-19n4y6rxy3] { font-size: 0.76rem; }
.sa-empty-inline span[b-19n4y6rxy3] { font-size: 0.66rem; }

.so-warn[b-19n4y6rxy3] {
    background: rgba(240, 160, 32, 0.12);
    border: 1px solid rgba(240, 172, 60, 0.45);
    border-left-width: 3px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.45rem;
    padding: 0.55rem 0.8rem;
}

.so-warn strong[b-19n4y6rxy3] { color: var(--fc-ink-ffd79a); font-size: 0.76rem; }
.so-warn span[b-19n4y6rxy3] { color: var(--fc-ink-cfb894); font-size: 0.7rem; }

/* ---------- KPI strip ---------- */
.so-kpis[b-19n4y6rxy3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.sa-kpis[b-19n4y6rxy3] { margin-bottom: 0.6rem; }

/* auto width — each tile is only as wide as its own content needs */
.so-kpi[b-19n4y6rxy3] {
    border-radius: 8px;
    padding: 0.34rem 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.04rem;
    flex: 1 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.so-kpi-1[b-19n4y6rxy3] { background: linear-gradient(160deg, #17399c, #0e2470); }
.so-kpi-2[b-19n4y6rxy3] { background: linear-gradient(160deg, #10713f, #0a4a2a); }
.so-kpi-3[b-19n4y6rxy3] { background: linear-gradient(160deg, #5a259c, #3d1a6b); }
.so-kpi-4[b-19n4y6rxy3] { background: linear-gradient(160deg, #a9560c, #71390a); }
.so-kpi-5[b-19n4y6rxy3] { background: linear-gradient(160deg, #0d6a7a, #084a56); }

.so-kpi-cap[b-19n4y6rxy3] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.so-kpi-num[b-19n4y6rxy3] {
    font-size: 0.86rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
}

.so-kpi-unit[b-19n4y6rxy3] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- Rows and panels ---------- */
.so-row[b-19n4y6rxy3] {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    min-width: 0;
}

/* The records table is the point of the page, so it gets the full width. 
.sa-row-table { grid-template-columns: minmax(0, 1fr); }*/
.sa-row-table[b-19n4y6rxy3] {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr) minmax(0,0.75fr);
    
}


/* Trend canvas 620, donut canvas 470 — the fractions carry the same 1.32:1 ratio so
   both charts render at one type size. The insight list needs the least room. */
.sa-row-b[b-19n4y6rxy3] { grid-template-columns: 1.32fr 1fr 0.95fr; }

/* Both canvases are 765, so the columns are equal. */
.sa-row-c[b-19n4y6rxy3] { grid-template-columns: 1fr 1fr; }

.so-panel[b-19n4y6rxy3] {
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 10px;
    padding: 0.5rem 0.65rem 0.6rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.so-panelb[b-19n4y6rxy3] {
    /*background: #011140;*/
    padding: 0.5rem 0.05rem 0.01rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin:0px;
}

.so-panel-title[b-19n4y6rxy3] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fc-ink);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.so-panel-title-sub[b-19n4y6rxy3] {
    font-weight: 500;
    font-size: 0.6rem;
    color: var(--fc-ink-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

.so-panel[b-19n4y6rxy3]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
    margin-block: auto;
}

/* Panel header: title on the left, row-count chips on the right. */
.sa-panel-head[b-19n4y6rxy3] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.sa-panel-meta[b-19n4y6rxy3] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.sa-chip[b-19n4y6rxy3] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.sa-chip-count[b-19n4y6rxy3] { background: rgba(120, 165, 235, 0.16); color: var(--fc-ink-bcd3f2); }
.sa-chip-search[b-19n4y6rxy3] { background: rgba(245, 200, 66, 0.16); color: var(--fc-ink-f5d98a); }
.sa-chip-view[b-19n4y6rxy3] { background: rgba(47, 168, 90, 0.18); color: var(--fc-ink-8ee4ab); }

/* ---------- Tiles ---------- */
.so-tiles[b-19n4y6rxy3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.sa-tiles[b-19n4y6rxy3] { margin-top: auto; padding-top: 0.4rem; }

.so-tile[b-19n4y6rxy3] {
    border-radius: 8px;
    padding: 0.38rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    border: 1px solid var(--fc-line-w10);
    background: var(--fc-overlay-soft);
}

.so-tile-good[b-19n4y6rxy3] { border-color: rgba(75, 212, 122, 0.4); background: rgba(75, 212, 122, 0.1); }
.so-tile-info[b-19n4y6rxy3] { border-color: var(--fc-line-04); background: rgba(120, 165, 235, 0.1); }

.so-tile-cap[b-19n4y6rxy3] {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fc-ink-muted);
}

.so-tile-val[b-19n4y6rxy3] {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--fc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-tile-sub[b-19n4y6rxy3] { font-size: 0.56rem; color: var(--fc-ink-a8b6cd); }

/* ---------- The records table ---------- */
.so-table-scroll[b-19n4y6rxy3] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--fc-line-022);
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--fc-line-05) transparent;
}

/* Tall enough to read a year at a glance, short enough that the analytics below stay
   on the same screen. */
.sa-table-scroll[b-19n4y6rxy3] { max-height: 312px; }

.so-table-scroll[b-19n4y6rxy3]::-webkit-scrollbar { width: 9px; height: 9px; }
.so-table-scroll[b-19n4y6rxy3]::-webkit-scrollbar-track { background: var(--fc-overlay-soft); }
.so-table-scroll[b-19n4y6rxy3]::-webkit-scrollbar-thumb {
    background: rgba(120, 165, 235, 0.45);
    border-radius: 5px;
}
.so-table-scroll[b-19n4y6rxy3]::-webkit-scrollbar-thumb:hover { background: rgba(120, 165, 235, 0.7); }

.so-table[b-19n4y6rxy3] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.62rem;
    white-space: nowrap;
}

.so-table thead th[b-19n4y6rxy3] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #021c95;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.56rem;
    text-align: left;
    padding: 0.32rem 0.45rem;
    border-bottom: 1px solid #0b2358;
}

.so-table tbody td[b-19n4y6rxy3] {
    padding: 0.24rem 0.45rem;
    border-bottom: 1px solid var(--fc-line-012);
    color: var(--fc-ink-dfe6f0);
}

.so-table tbody tr:nth-child(even) td[b-19n4y6rxy3] { background: var(--fc-overlay-zebra); }
.so-table tbody tr:hover td[b-19n4y6rxy3] { background: rgba(74, 159, 224, 0.14); }

.so-num[b-19n4y6rxy3] { text-align: right; }
.so-table thead th.so-num[b-19n4y6rxy3] { text-align: right; }
.so-money[b-19n4y6rxy3] { font-variant-numeric: tabular-nums; }
.so-td-state[b-19n4y6rxy3] { font-weight: 700; color: var(--fc-ink); }

.so-table tfoot td[b-19n4y6rxy3] {
    position: sticky;
    bottom: 0;
    background: var(--fc-tfoot-bg);
    color: var(--fc-ink);
    font-weight: 700;
    padding: 0.3rem 0.45rem;
    border-top: 1px solid var(--fc-tfoot-line);
}

.so-table tfoot .so-td-state[b-19n4y6rxy3] { text-transform: uppercase; letter-spacing: 0.04em; }

/* Colour carries meaning here: the period is a neutral pill, the two money columns take
   the same hues as their series in the charts, and the zone chip uses the zone's own
   colour from the map — with its ink chosen by measured contrast, not assumed. */
.sa-th-period[b-19n4y6rxy3], .sa-td-period[b-19n4y6rxy3] { width: 6.2rem; }
.sa-th-lgcs[b-19n4y6rxy3] { width: 5.2rem; }

.sa-period-pill[b-19n4y6rxy3] {
    display: inline-block;
    background: rgba(120, 165, 235, 0.14);
    border: 1px solid var(--fc-line-026);
    border-radius: 5px;
    padding: 0.02rem 0.32rem;
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--fc-ink-cddff7);
}

.sa-fct-tag[b-19n4y6rxy3] {
    display: inline-block;
    margin-left: 0.28rem;
    background: #a9560c;
    color: #ffffff;
    border-radius: 4px;
    padding: 0 0.24rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.sa-td-state-amt[b-19n4y6rxy3] { color: var(--fc-ink-9fc8ff); font-weight: 600; }
.sa-td-lgc-amt[b-19n4y6rxy3] { color: var(--fc-ink-93e6ac); font-weight: 600; }

.sa-count-chip[b-19n4y6rxy3] {
    display: inline-block;
    min-width: 1.55rem;
    background: rgba(47, 168, 90, 0.16);
    border: 1px solid rgba(47, 168, 90, 0.34);
    border-radius: 5px;
    padding: 0.02rem 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--fc-ink-8ee4ab);
    text-align: center;
}

.sa-zone-chip[b-19n4y6rxy3] {
    display: inline-block;
    border-radius: 999px;
    padding: 0.04rem 0.45rem;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- Executive insights ---------- */
.keyinsight-panel-title[b-19n4y6rxy3] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fc-ink);
    margin-bottom: 0.5rem;
}

.keyinsights-title[b-19n4y6rxy3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.exec-bulb-icon[b-19n4y6rxy3] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--fc-ink-f5c842);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.exec-insight-section[b-19n4y6rxy3] { margin-top: 0.5rem; }
.exec-insight-section:first-of-type[b-19n4y6rxy3] { margin-top: 0.1rem; }

.exec-insight-heading[b-19n4y6rxy3] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fc-ink-f5c842);
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-bottom: 0.2rem;
}

.headingline[b-19n4y6rxy3] {
    border-bottom: 1px solid rgba(245, 200, 66, 0.28);
    margin-top: 10px;
}
.yearmonth[b-19n4y6rxy3] {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   }
    .panel-row[b-19n4y6rxy3] {
        display: grid;
        gap: 0.5rem;
        min-width: 0;
    }

    /* Summary — label/value pairs, one line each. */
    .exec-sum-list[b-19n4y6rxy3] {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .exec-sum-row[b-19n4y6rxy3] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.45rem;
        font-size: 0.585rem;
        line-height: 1.32;
    }

    .exec-sum-label[b-19n4y6rxy3] {
        color: var(--fc-ink-93a1b8);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .exec-sum-value[b-19n4y6rxy3] {
        color: var(--fc-ink-eaf0f8);
        font-weight: 600;
        text-align: right;
        min-width: 0;
    }
    /* Trends — the arrow carries direction, so colour is never the only cue. */
    .exec-trend-list[b-19n4y6rxy3] {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

        .exec-trend-list li[b-19n4y6rxy3] {
            display: grid;
            grid-template-columns: 12px minmax(0, 1fr);
            gap: 0.32rem;
            align-items: start;
            padding: 0.12rem 0;
            border-bottom: 1px solid var(--fc-hairline);
        }

            .exec-trend-list li:last-child[b-19n4y6rxy3] {
                border-bottom: none;
            }

    .exec-trend-arrow[b-19n4y6rxy3] {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0.1rem;
    }

        .exec-trend-arrow[b-19n4y6rxy3]  svg {
            width: 12px;
            height: 12px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2.4;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .exec-trend-text[b-19n4y6rxy3] {
        font-size: 0.635rem;
        line-height: 1.27;
        color: var(--fc-ink-soft);
        min-width: 0;
    }

    .exec-trend-headline[b-19n4y6rxy3] {
        font-weight: 700;
    }
    /* Key findings — icon discs. */
    .exec-insights-list[b-19n4y6rxy3] {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

        .exec-insights-list li[b-19n4y6rxy3] {
            display: grid;
            grid-template-columns: 19px minmax(0, 1fr);
            gap: 0.36rem;
            align-items: center;
            padding: 0.12rem 0;
            border-bottom: 1px solid var(--fc-hairline);
        }

            .exec-insights-list li:last-child[b-19n4y6rxy3] {
                border-bottom: none;
            }

    .exec-insight-icon[b-19n4y6rxy3] {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .exec-insight-icon[b-19n4y6rxy3]  svg {
            width: 11px;
            height: 11px;
            fill: none;
            stroke: #ffffff;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .exec-insight-text[b-19n4y6rxy3] {
        font-size: 0.635rem;
        line-height: 1.27;
        color: var(--fc-ink-soft);
        min-width: 0;
    }

    .exec-insight-accent[b-19n4y6rxy3] {
        font-weight: 700;
    }
    /* ---------- Footer ---------- */
    .so-foot[b-19n4y6rxy3] {
        font-size: 0.58rem;
        color: var(--fc-ink-faint);
        text-align: center;
        padding: 0.4rem 0 0.1rem;
    }
    /* ---------- Responsive ---------- */
    @media (max-width: 1280px) {
        .sa-row-b[b-19n4y6rxy3] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 820px) {
        .sa-row-b[b-19n4y6rxy3], .sa-row-c[b-19n4y6rxy3] {
            grid-template-columns: minmax(0, 1fr);
        }

        .sa-top[b-19n4y6rxy3] {
            flex-direction: column;
        }

        .sa-brand[b-19n4y6rxy3] {
            flex: 1 1 auto;
        }

        .so-kpis[b-19n4y6rxy3] {
            flex-direction: column;
        }

        .so-kpi[b-19n4y6rxy3] {
            flex: 1 1 auto;
        }
    }

    @media print {
        .sa-filter[b-19n4y6rxy3] {
            display: none !important;
        }

        .sa-table-scroll[b-19n4y6rxy3] {
            max-height: none;
            overflow: visible;
        }
    }
    /* ---------- Row grids ---------- */
    /* A: yearly columns (625) | tier split (470) | two dials. */
.ya-row-a[b-19n4y6rxy3] {
    grid-template-columns: 1.32fr 1.32fr 1fr;
}
    /* B: the year table takes the width a seven-column table needs; the pie column is sized
   so its 470-unit canvas lands at the same scale as the charts in row A. */
.ya-row-b[b-19n4y6rxy3] {
   /* grid-template-columns: 1.32fr 1.32fr 1fr;*/
    grid-template-columns: 2.66fr  1fr;
}
.ya-row-b-left[b-19n4y6rxy3] {
    display: grid;
    grid-template-rows: auto auto;
    gap: 0.5rem;
    min-width: 0;
}
    /* C: row B's column template repeated, so the dials land directly under the year table
   and the monthly series starts under the allocation bands. The series then spans the
   second and third columns — a 78-month line needs more than a 1.07fr column gives it. */
    .ya-row-c[b-19n4y6rxy3] {
        grid-template-columns: 1.4fr 1.07fr 1fr;
    }

    .ya-month-panel[b-19n4y6rxy3] {
        grid-column: 2 / span 2;
        min-width: 0;
    }
    /* The year table is short — seven years, not 2,886 rows — so it needs no tall scroller. */
    .ya-table-scroll[b-19n4y6rxy3] {
        max-height: 300px;
    }
    /* Two dials share one card, side by side, each taking half the width. */
    .ya-dials[b-19n4y6rxy3] {
        min-width: 0;
    }

    .ya-dial-row[b-19n4y6rxy3] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
        align-items: center;
        margin-block: auto;
        min-width: 0;
        /* The dials sit in a wide column here, and wider still once row C goes to one column
       below 1280px. Without a ceiling a 215-unit gauge renders at nearly three times its
       size and its labels at 29px. */
        max-width: 560px;
        margin-inline: auto;
    }
    /* A year with fewer than twelve months on record, flagged so its total is never read as
   a fall against the full years beside it. */
    .ya-part-tag[b-19n4y6rxy3] {
        display: inline-block;
        margin-left: 0.28rem;
        background: #7a5a12;
        color: var(--fc-ink-ffe9b0);
        border-radius: 4px;
        padding: 0 0.24rem;
        font-size: 0.5rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        vertical-align: middle;
    }

    @media (max-width: 1280px) {
        .ya-row-a[b-19n4y6rxy3], .ya-row-b[b-19n4y6rxy3] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        /* Row C goes to one column rather than two here. Half of a 1280px page is 580px, and
       a 900-unit monthly series squeezed into that renders its axis labels at 7px; full
       width keeps them readable. */
        .ya-row-c[b-19n4y6rxy3] {
            grid-template-columns: minmax(0, 1fr);
        }

        .ya-month-panel[b-19n4y6rxy3] {
            grid-column: auto;
        }
    }

    @media (max-width: 820px) {
        .ya-row-a[b-19n4y6rxy3], .ya-row-b[b-19n4y6rxy3], .ya-row-c[b-19n4y6rxy3] {
            grid-template-columns: minmax(0, 1fr);
        }

        .ya-month-panel[b-19n4y6rxy3] {
            grid-column: auto;
        }

        .ya-dial-row[b-19n4y6rxy3] {
            grid-template-columns: minmax(0, 1fr);
        }
    }
/* /Components/Shared/AskFaacBlock.razor.rz.scp.css */
/* A table or chart under an Ask FAAC answer. Same hairlines, surfaces and type scale as the
   panels on the other dashboard pages; the colours come from the shared theme tokens so it
   follows the light/dark switch. */

.afb[b-hmsbtzvr5z] {
    margin-top: 0.65rem;
    background: var(--fc-surface);
    border: 1px solid var(--fc-line);
    border-radius: 10px;
    padding: 0.55rem 0.7rem 0.6rem;
    min-width: 0;
}

.afb-title[b-hmsbtzvr5z] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fc-ink);
    margin-bottom: 0.4rem;
    line-height: 1.25;
}

.afb-sub[b-hmsbtzvr5z] {
    font-weight: 500;
    font-size: 0.64rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--fc-ink-muted);
}

.afb-scroll[b-hmsbtzvr5z] {
    overflow: auto;
    max-height: 22rem;
    border-radius: 6px;
}

.afb table[b-hmsbtzvr5z] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--fc-ink);
}

.afb th[b-hmsbtzvr5z] {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.4rem 0.55rem;
    background: var(--fc-tfoot-bg);
    color: var(--fc-ink);
    border-bottom: 1px solid var(--fc-tfoot-line);
}

.afb td[b-hmsbtzvr5z] {
    padding: 0.38rem 0.55rem;
    border-bottom: 1px solid var(--fc-hairline);
    white-space: nowrap;
}

.afb tbody tr:nth-child(even) td[b-hmsbtzvr5z] { background: var(--fc-overlay-zebra); }
.afb tbody tr:hover td[b-hmsbtzvr5z] { background: var(--fc-overlay-hover); }

.afb .afb-num[b-hmsbtzvr5z] { text-align: right; }

.afb-note[b-hmsbtzvr5z] {
    margin-top: 0.4rem;
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--fc-ink-muted);
}

.afb-chart[b-hmsbtzvr5z]  .faac-chart {
    width: 100%;
    height: auto;
    display: block;
}

.afb-scroll[b-hmsbtzvr5z]::-webkit-scrollbar { width: 9px; height: 9px; }
.afb-scroll[b-hmsbtzvr5z]::-webkit-scrollbar-track { background: var(--fc-overlay-soft); }
.afb-scroll[b-hmsbtzvr5z]::-webkit-scrollbar-thumb { background: var(--fc-line-045); border-radius: 6px; }