/* _content/CivicSonar.Web/Components/Layout/LandingLayout.razor.rz.scp.css */
/* Scoped CSS for LandingLayout */

.landing-page[b-6l73ayyeik] {
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    overflow-x: hidden;
}

/* Header */
.landing-header[b-6l73ayyeik] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    height: 70px;
    display: flex;
    align-items: center;
}

.landing-header.scrolled[b-6l73ayyeik] {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.header-container[b-6l73ayyeik] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo[b-6l73ayyeik] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-primary);
}

.brand-name[b-6l73ayyeik] {
    letter-spacing: -0.02em;
}

/* Mobile navigation.

   A native <details> disclosure, replacing the MudDrawer the header used to toggle from a Blazor
   OnClick. Marketing pages render as static SSR now, so there is no circuit to run that handler —
   and a disclosure the browser owns needs no JavaScript, no hydration and no state.

   .visually-hidden is the summary's accessible name. The icon inside it is an aria-hidden SVG, so
   without text the control announces as unnamed. */
.mobile-nav[b-6l73ayyeik] {
    position: relative;
    margin-right: 0.5rem;
}

.mobile-nav > summary[b-6l73ayyeik] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-primary);
    /* Both are needed: the pseudo-element is the WebKit marker, list-style the standards one. */
    list-style: none;
}

.mobile-nav > summary[b-6l73ayyeik]::-webkit-details-marker {
    display: none;
}

.mobile-nav > summary:hover[b-6l73ayyeik] {
    background-color: rgba(17, 24, 39, 0.06);
}

.mobile-nav > summary:focus-visible[b-6l73ayyeik] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.mobile-nav-panel[b-6l73ayyeik] {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    padding: 0.5rem;
    background-color: var(--bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.mobile-nav-panel a[b-6l73ayyeik] {
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    color: var(--text-primary);
    font-weight: 500;
    text-decoration: none;
}

.mobile-nav-panel a:hover[b-6l73ayyeik] {
    background-color: rgba(30, 64, 175, 0.06);
    color: var(--color-primary);
}

.mobile-nav-divider[b-6l73ayyeik] {
    height: 1px;
    margin: 0.35rem 0.25rem;
    background-color: rgba(0, 0, 0, 0.08);
}

.visually-hidden[b-6l73ayyeik] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.desktop-nav[b-6l73ayyeik] {
    display: none;
}

@media (min-width: 768px) {
    /* The mobile menu duplicates the desktop nav, so only one of the two is ever present. */
    .mobile-nav[b-6l73ayyeik] {
        display: none;
    }

    .desktop-nav[b-6l73ayyeik] {
        display: flex;
        gap: 2rem;
    }

    .desktop-nav a[b-6l73ayyeik] {
        text-decoration: none;
        color: var(--text-secondary);
        font-weight: 500;
        font-size: 0.95rem;
        transition: color 0.2s;
    }

    .desktop-nav a:hover[b-6l73ayyeik] {
        color: var(--color-primary);
    }
}

.header-actions[b-6l73ayyeik] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-text[b-6l73ayyeik] {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.btn-primary-glow[b-6l73ayyeik] {
    background-color: var(--color-primary);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px 0 rgba(30, 64, 175, 0.3);
}

.btn-primary-glow:hover[b-6l73ayyeik] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px 0 rgba(30, 64, 175, 0.4);
    background-color: var(--color-primary-dark);
}

/* Footer */
.landing-footer[b-6l73ayyeik] {
    background-color: #f9fafb;
    padding: 4rem 0 2rem;
    border-top: 1px solid #f3f4f6;
    margin-top: auto;
}

.footer-grid[b-6l73ayyeik] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 768px) {
    .footer-grid[b-6l73ayyeik] {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

/* Column labels.
   Was an h4 at #9ca3af, which is 2.46:1 against the #f9fafb footer — a WCAG AA failure on the
   one piece of text in the column that names what the links are. The fix inverts the hierarchy
   rather than nudging the grey: the label takes --text-primary (#111827, 17.4:1) and the links
   below stay on --text-secondary (#4B5563, 7.3:1), so the label is now the darker of the two and
   is distinguishable from a link by weight and colour, not only by letter-spacing.
   Both values are already in the app.css token block; no new colour was invented. */
.footer-col .footer-col-title[b-6l73ayyeik] {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0 0 1.5rem;
    letter-spacing: 0.05em;
}

.footer-col a[b-6l73ayyeik] {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.2s;
}

.footer-col a:hover[b-6l73ayyeik] {
    color: var(--color-primary);
}

.brand-col p[b-6l73ayyeik] {
    margin-top: 1rem;
    color: var(--text-secondary);
    max-width: 250px;
    line-height: 1.5;
}

/* The copyright line. #9ca3af was 2.46:1 here too, and at 0.875rem it is small text, so it needs
   the full 4.5:1. --text-secondary is 7.3:1 against the footer background. */
.footer-bottom[b-6l73ayyeik] {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}
/* _content/CivicSonar.Web/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-3tersbmuyk] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-3tersbmuyk] {
    flex: 1;
}

.sidebar[b-3tersbmuyk] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

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

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

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

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

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

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

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

    .sidebar[b-3tersbmuyk] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

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

    .top-row[b-3tersbmuyk], article[b-3tersbmuyk] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-3tersbmuyk] {
    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-3tersbmuyk] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/CivicSonar.Web/Components/Layout/NavMenu.razor.rz.scp.css */
/* ============================================================================
   Nav item — MudNavLink, restyled.

   Every selector goes through ::deep because MudNavMenu and MudNavLink are child
   components; the .cs-nav wrapper in NavMenu.razor is what carries this file's scope
   attribute and gives ::deep something to descend from.

   The .active rules repeat MudBlazor's :not(.mud-nav-link-disabled) so they outrank
   .mud-navmenu.mud-navmenu-default .mud-nav-link.active on specificity rather than on
   source order — the scoped-CSS bundle is linked before MudBlazor.min.css, so a tie
   would lose.
   ============================================================================ */

.cs-nav[b-pjfgmq0zbb] {
    padding: 16px 12px;
}

.cs-nav[b-pjfgmq0zbb]  .mud-navmenu {
    padding: 0;
}

/* 40px tall, 5px radius, no icon. */
.cs-nav[b-pjfgmq0zbb]  .mud-navmenu .mud-nav-link {
    height: var(--cs-nav-item);
    box-sizing: border-box;
    margin: 0 0 2px;
    padding: 8px 10px;
    border-radius: var(--cs-radius-control);
    font-family: var(--cs-font-sans);
    font-size: 13.5px;
    font-weight: 400;
    color: var(--mud-palette-drawer-text);
    transition: background-color var(--cs-motion) var(--cs-ease), color var(--cs-motion) var(--cs-ease);
}

.cs-nav[b-pjfgmq0zbb]  .mud-navmenu .mud-nav-link .mud-nav-link-text {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    font-weight: inherit;
}

/* A 4px dot in place of the Material glyph. It borrows the link's own ink, so it tracks
   every state without a second colour rule. */
.cs-nav[b-pjfgmq0zbb]  .cs-nav-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
    flex: none;
}

.cs-nav[b-pjfgmq0zbb]  .cs-nav-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Right-aligned mono count, so the column reads as a tally. */
.cs-nav[b-pjfgmq0zbb]  .cs-nav-count {
    font-family: var(--cs-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
    color: var(--cs-ink-micro);
    flex: none;
}

.cs-nav[b-pjfgmq0zbb]  .mud-navmenu .mud-nav-link:hover {
    background-color: var(--cs-pip-off);
    color: var(--cs-ink);
}

    .cs-nav[b-pjfgmq0zbb]  .mud-navmenu .mud-nav-link:hover .cs-nav-count {
        color: var(--cs-ink-label);
    }

/* Selected fills with chrome/bar, not the primary tint — accent stays exclusive to actions. */
.cs-nav[b-pjfgmq0zbb]  .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
    font-weight: 600;
}

    .cs-nav[b-pjfgmq0zbb]  .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):hover {
        background-color: var(--mud-palette-secondary);
        color: var(--mud-palette-secondary-text);
    }

    .cs-nav[b-pjfgmq0zbb]  .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .cs-nav-dot {
        opacity: 1;
    }

    .cs-nav[b-pjfgmq0zbb]  .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .cs-nav-count {
        color: var(--mud-palette-secondary-text);
    }

/* 2px accent outline at 2px offset — never a colour-only state change. */
.cs-nav[b-pjfgmq0zbb]  .mud-navmenu .mud-nav-link:focus-visible {
    outline: 2px solid var(--cs-accent);
    outline-offset: 2px;
}

/* The admin group header gets the same geometry as a link, minus the dot. */
.cs-nav[b-pjfgmq0zbb]  .mud-nav-group > .mud-nav-link {
    font-family: var(--cs-font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cs-ink-micro);
}

.cs-nav[b-pjfgmq0zbb]  .mud-nav-group .mud-collapse-container .mud-nav-link {
    padding-left: 18px;
}

.cs-nav-logout[b-pjfgmq0zbb] {
    padding: 8px 2px 4px;
}

.cs-nav[b-pjfgmq0zbb]  .cs-nav-logout-button {
    justify-content: flex-start;
    text-transform: none;
    font-family: var(--cs-font-sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--cs-ink-muted);
}
/* _content/CivicSonar.Web/Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-yet59lnk9n],
.components-reconnect-repeated-attempt-visible[b-yet59lnk9n],
.components-reconnect-failed-visible[b-yet59lnk9n],
.components-pause-visible[b-yet59lnk9n],
.components-resume-failed-visible[b-yet59lnk9n],
.components-rejoining-animation[b-yet59lnk9n] {
    display: none;
}

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


#components-reconnect-modal[b-yet59lnk9n] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-yet59lnk9n 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-yet59lnk9n] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-yet59lnk9n] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-yet59lnk9n] {
        background-color: #6b9ed2;
    }

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

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

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

@keyframes components-rejoining-animation-b-yet59lnk9n {
    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;
    }
}
/* _content/CivicSonar.Web/Components/Pages/Search.razor.rz.scp.css */
/* ============================================================================
   Search — row grid and filter rail.

   Nothing in here is a MudTable. The four columns are fixed at 118 / fluid / 96 / 104 and the
   row heights are exact, because the whole argument for this screen is how many records fit
   above the fold: at a 1024px viewport the chrome costs about 147px and the rest is the
   expanded row plus thirteen collapsed ones.
   ============================================================================ */

.cs-search[b-wmfg339szf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cs-rail-width);
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius-panel);
    background: var(--cs-surface);
}

/* No overflow:hidden on .cs-search — it would turn the frame into a scroll container and kill
   the rail's position:sticky. The two children round their own outer corners instead.

   .cs-list has to go through ::deep: it is a class on a MudPaper, and Blazor stamps the scope
   attribute only on elements this component renders, never on a child component's output. A bare
   .cs-list rule compiles to .cs-list[b-...] and matches nothing. */
.cs-search[b-wmfg339szf]  .cs-list {
    min-width: 0;
    background: var(--cs-surface);
    border-right: 1px solid var(--cs-line);
    border-radius: var(--cs-radius-panel) 0 0 var(--cs-radius-panel);
    overflow: hidden;
}

/* ---- Page header -------------------------------------------------------- */

.cs-page-head[b-wmfg339szf] {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    padding: 14px 26px;
    border-bottom: 1px solid var(--cs-line);
}

.cs-page-title[b-wmfg339szf] {
    margin: 0 0 4px;
    font-family: var(--cs-font-sans);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--cs-ink);
}

.cs-page-meta[b-wmfg339szf] {
    font-family: var(--cs-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    line-height: 1.3;
    color: var(--cs-ink-muted);
}

/* ---- The row grid ------------------------------------------------------- */

.cs-row[b-wmfg339szf] {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) 96px 104px;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    padding: 14px 26px;
    border-bottom: 1px solid var(--cs-line-row);
}

.cs-row-head[b-wmfg339szf] {
    padding: 9px 26px;
    background: var(--cs-surface-rail);
    border-bottom: 1px solid var(--cs-line);
    font-family: var(--cs-font-mono);
    font-size: 9.5px;
    line-height: 1.3;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--cs-ink-micro);
}

.cs-right[b-wmfg339szf] {
    text-align: right;
}

.cs-row-item[b-wmfg339szf] {
    height: var(--cs-row-collapsed);
    background: var(--cs-surface);
    cursor: pointer;
    transition: background-color var(--cs-motion) var(--cs-ease);
}

    /* Hover is a flat page tint. Nothing moves: no shadow, no lift, no reflow. */
    .cs-row-item:hover[b-wmfg339szf] {
        background: var(--cs-surface-page);
    }

    .cs-row-item:focus-visible[b-wmfg339szf] {
        outline: 2px solid var(--cs-accent);
        outline-offset: -2px;
    }

.cs-row-open[b-wmfg339szf] {
    /* min-height, not height: opening a row shows the WHOLE description, so the row has to be
       free to grow. --cs-row-expanded is the floor that keeps a short record from collapsing
       into something smaller than the collapsed row it replaced. overflow must be visible or the
       fixed-height clip comes back by the side door via .cs-row. */
    /* height:auto is load-bearing: .cs-row-item sets a fixed height, and min-height alone
       only raises that fixed value — the row would still refuse to grow and the
       description would spill over the row below. */
    height: auto;
    min-height: var(--cs-row-expanded);
    align-items: start;
    padding: 16px 26px 17px;
    overflow: visible;
    background: var(--cs-surface);
    /* A half-step off the surface, so the open row reads as open without a second border.
       Dropped silently by anything without color-mix, which leaves the plain surface above. */
    background: color-mix(in srgb, var(--cs-surface) 92%, var(--cs-surface-page));
}

    .cs-row-open:hover[b-wmfg339szf] {
        background: color-mix(in srgb, var(--cs-surface) 92%, var(--cs-surface-page));
    }

/* ---- Column 1 · score --------------------------------------------------- */

.cs-cell-score[b-wmfg339szf] {
    min-width: 0;
    padding-right: 22px;
}

.cs-score-line[b-wmfg339szf] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.cs-score-value[b-wmfg339szf] {
    font-size: 17px;
}

.cs-row-open .cs-score-value[b-wmfg339szf] {
    font-size: 20px;
}

/* ---- Column 2 · the opportunity ----------------------------------------- */

.cs-cell-main[b-wmfg339szf] {
    min-width: 0;
    padding-right: 30px;
}

.cs-title-line[b-wmfg339szf] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.cs-title-line-clip[b-wmfg339szf] {
    white-space: nowrap;
    overflow: hidden;
}

.cs-row-title[b-wmfg339szf] {
    font-family: var(--cs-font-sans);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cs-ink);
}

.cs-row-open .cs-row-title[b-wmfg339szf] {
    font-size: 14.5px;
}

.cs-budget[b-wmfg339szf] {
    font-family: var(--cs-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    color: var(--cs-ink-label);
    white-space: nowrap;
}

/* One metadata line, clipped. Text columns clip rather than wrap so the row count per screen
   stays predictable. */
.cs-row-sub[b-wmfg339szf] {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cs-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* No clamp. The collapsed row is the summary — one clipped line — and opening a row is how you
   read the rest, so truncating here would leave the full text unreachable anywhere in the UI. */
.cs-row-desc[b-wmfg339szf] {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--cs-ink-muted);
    overflow-wrap: anywhere;
}

.cs-row-tags[b-wmfg339szf] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* ---- Column 3 · confidence ---------------------------------------------- */

.cs-cell-conf[b-wmfg339szf] {
    min-width: 0;
}

/* ---- Column 4 · date and actions ---------------------------------------- */

.cs-cell-date[b-wmfg339szf] {
    min-width: 0;
    text-align: right;
}

.cs-date[b-wmfg339szf] {
    font-family: var(--cs-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    line-height: 1.3;
    color: var(--cs-ink);
}

.cs-row-open .cs-date[b-wmfg339szf] {
    font-size: 11.5px;
}

.cs-row-state[b-wmfg339szf] {
    margin-top: 2px;
    font-family: var(--cs-font-mono);
    font-size: 9.5px;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-ink-micro);
}

.cs-row-open .cs-row-state[b-wmfg339szf] {
    margin-top: 4px;
    font-size: 10px;
}

.cs-row-actions[b-wmfg339szf] {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 9px;
}

.cs-action[b-wmfg339szf] {
    font-family: var(--cs-font-mono);
    font-size: 9.5px;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 3.5px 6px;
    border: 1px solid var(--cs-line);
    border-radius: var(--cs-radius-chip);
    background: transparent;
    color: var(--cs-ink-muted);
    text-decoration: none;
    cursor: pointer;
}

.cs-action-accent[b-wmfg339szf] {
    border-color: var(--cs-accent-line);
    background: var(--cs-accent-wash);
    color: var(--cs-accent);
}

.cs-action-on[b-wmfg339szf] {
    border-color: var(--cs-accent);
    background: var(--cs-accent);
    color: var(--mud-palette-primary-text);
}

.cs-action:focus-visible[b-wmfg339szf],
.cs-save-inline:focus-visible[b-wmfg339szf] {
    outline: 2px solid var(--cs-accent);
    outline-offset: 2px;
}

/* The collapsed row shows "AZ · Save" as one mono line. Save is still a control, so it is a
   button that happens to look like the rest of the line. */
.cs-save-inline[b-wmfg339szf] {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cs-accent);
    cursor: pointer;
}

.cs-save-inline-on[b-wmfg339szf] {
    font-weight: 700;
}

/* ---- Stream footer ------------------------------------------------------ */

.cs-stream[b-wmfg339szf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 26px;
    font-family: var(--cs-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-ink-micro);
}

.cs-stream-dot[b-wmfg339szf] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cs-accent);
    flex: none;
}

.cs-stream-dot-done[b-wmfg339szf] {
    background: var(--cs-ink-micro);
}

/* ============================================================================
   Filter rail
   ============================================================================ */

.cs-rail[b-wmfg339szf] {
    background: var(--cs-surface-rail);
    border-left: 1px solid var(--cs-line);
    border-radius: 0 var(--cs-radius-panel) var(--cs-radius-panel) 0;
}

/* The rail stretches so its ground fills the column; the inner block is what sticks. */
.cs-rail-inner[b-wmfg339szf] {
    position: sticky;
    top: calc(var(--cs-appbar-height) + 16px);
    padding: 18px 16px 24px;
    max-height: calc(100vh - var(--cs-appbar-height) - 32px);
    overflow-y: auto;
}

.cs-rail-head[b-wmfg339szf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 12px;
}

.cs-rail-title[b-wmfg339szf] {
    font-family: var(--cs-font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cs-ink-micro);
}

.cs-rail-count[b-wmfg339szf] {
    font-family: var(--cs-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-ink-micro);
}

.cs-rail-count-on[b-wmfg339szf] {
    color: var(--cs-accent);
}

.cs-field[b-wmfg339szf] {
    margin-bottom: 10px;
}

/* The label lives here, above the control, in mono caps — not floating inside it. */
.cs-field-label[b-wmfg339szf] {
    margin-bottom: 5px;
    font-family: var(--cs-font-mono);
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cs-ink-micro);
}

.cs-field-pair[b-wmfg339szf] {
    display: flex;
    gap: 8px;
}

/* ---- Suppressing MudBlazor's floating label ------------------------------
   The Label parameter stays on every control so the accessible name survives; only its
   rendering is suppressed. A floating label costs 12px of height per control and there are
   eleven controls in this rail.

   The legend rule has to outrank
   .mud-input.mud-input-outlined:focus-within>.mud-input-outlined-border legend, which is
   (0,4,1) — hence the extra classes rather than !important. Without it the outline keeps the
   notch the label used to sit in and the top border shows a gap.
   ------------------------------------------------------------------------- */

.cs-rail[b-wmfg339szf]  .mud-input-label {
    display: none;
}

.cs-rail[b-wmfg339szf]  .mud-input.mud-input-outlined > .mud-input-outlined-border legend {
    width: 0;
    padding: 0;
}

.cs-rail[b-wmfg339szf]  .mud-input-control {
    margin: 0;
}

.cs-rail[b-wmfg339szf]  .mud-input-control-margin-dense {
    margin: 0;
}

.cs-rail[b-wmfg339szf]  .mud-input {
    background: var(--cs-surface);
    border-radius: var(--cs-radius-control);
}

.cs-rail-chips[b-wmfg339szf] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.cs-rail-more[b-wmfg339szf],
.cs-rail-save[b-wmfg339szf] {
    display: block;
    width: 100%;
    border: 0;
    background: none;
    font-family: var(--cs-font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cs-accent);
    cursor: pointer;
}

.cs-rail-more[b-wmfg339szf] {
    padding: 10px 0;
    font-size: 10.5px;
}

.cs-rail-foot[b-wmfg339szf] {
    padding-top: 6px;
}

.cs-rail-actions[b-wmfg339szf] {
    display: flex;
    gap: 8px;
}

.cs-rail-save[b-wmfg339szf] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cs-line);
    font-size: 11px;
}

    .cs-rail-save:disabled[b-wmfg339szf] {
        color: var(--mud-palette-text-disabled);
        cursor: default;
    }

.cs-rail-more:focus-visible[b-wmfg339szf],
.cs-rail-save:focus-visible[b-wmfg339szf] {
    outline: 2px solid var(--cs-accent);
    outline-offset: 2px;
}

/* ============================================================================
   Below the design's 1024 breakpoint the rail becomes the drawer that already exists.
   The row's own responsive rules — dropping the confidence column, moving the pips under
   the title — are step 4.
   ============================================================================ */

@media (max-width: 959.98px) {
    .cs-search[b-wmfg339szf] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-rail[b-wmfg339szf] {
        display: none;
    }

    .cs-search[b-wmfg339szf]  .cs-list {
        border-right: 0;
        border-radius: var(--cs-radius-panel);
    }
}

/* A figure the user typed is still a figure: numeric fields carry the mono face so a score
   floor lines up with the scores it filters. Text fields stay in the sans face — the design sets
   filter values ("6 selected", "Last 30 days") in the sans face. */
.cs-rail[b-wmfg339szf]  .mud-input-root[type="number"],
.cs-rail[b-wmfg339szf]  .mud-input-root[inputmode="numeric"],
.cs-rail[b-wmfg339szf]  .mud-input-root[inputmode="decimal"] {
    font-family: var(--cs-font-mono);
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Below 640 the four-column grid stops working: 118 + 96 + 104 of fixed columns
   plus gutters leaves the Opportunity column almost nothing, so the title collapses
   into a ribbon and the expanded row overlaps itself.

   The design's answer (section 08) is a two-column row — score at the left margin,
   because it is still the reason to look, and everything else stacked beside it.
   Confidence and date move onto a metadata line under the title. Same DOM, placed
   with grid-area, so no markup changes and no second row template to maintain.

        ┌────────┬──────────────────────────────┐
        │ score  │ title + tags + description   │
        │ meter  ├───────────────┬──────────────┤
        │        │ pips · conf   │  date · save │
        └────────┴───────────────┴──────────────┘

   Rows become content-height here. A fixed 68px cannot hold a wrapped title, and a
   phone scrolls anyway — the density argument that justifies a fixed row height on
   the desktop list does not apply.
   ============================================================================ */

@media (max-width: 639.98px) {
    .cs-row[b-wmfg339szf] {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 8px;
        padding: 14px;
        align-items: start;
    }

    /* Column headers name columns that no longer exist. */
    .cs-row-head[b-wmfg339szf] {
        display: none;
    }

    .cs-row-item[b-wmfg339szf],
    .cs-row-open[b-wmfg339szf] {
        height: auto;
        min-height: 88px;
        padding: 14px;
        overflow: visible;
    }

    .cs-cell-score[b-wmfg339szf] {
        grid-area: 1 / 1 / 3 / 2;
        padding-right: 0;
    }

    .cs-cell-main[b-wmfg339szf] {
        grid-area: 1 / 2 / 2 / 4;
        padding-right: 0;
    }

    .cs-cell-conf[b-wmfg339szf] {
        grid-area: 2 / 2 / 3 / 3;
    }

    .cs-cell-date[b-wmfg339szf] {
        grid-area: 2 / 3 / 3 / 4;
    }

    /* Fixed slots, so a scanning eye never has to re-acquire a field.

       The vertical tag varies from "FLEET" to "GENERAL GOVERNMENT & ADMINISTRATION", so if the
       tag and budget simply flow after the title the budget lands on line 1 or line 2 depending
       on the tag's length — it moves every row. Instead the title claims whole lines of its own,
       and the tag and budget share one dedicated line below it with the budget pinned right.

            Legislative Assembly of New Brunswick, NB
            [HEALTH & HUMAN SERVICES]          $50,000,000
            Oral Questions · The government has allocated…

       The budget then sits on the same right margin as the date and Save below it, so the whole
       right edge reads as one column. */
    .cs-title-line[b-wmfg339szf],
    .cs-title-line-clip[b-wmfg339szf] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 8px;
        row-gap: 6px;
        white-space: normal;
        overflow: visible;
    }

    /* flex-basis 100% forces the title onto its own line, whatever follows it. */
    .cs-row-title[b-wmfg339szf] {
        flex: 0 0 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 14.5px;
        line-height: 1.25;
    }

    /* The tag yields first — it is an identifier, and the full value is in the expanded row.
       The shared .cs-tag rule sets flex:none, which would stop it shrinking. */
    .cs-title-line .cs-tag-accent[b-wmfg339szf] {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* margin-left:auto is what pins the budget to the right on every single row. */
    .cs-title-line .cs-budget[b-wmfg339szf] {
        flex: none;
        margin-left: auto;
        text-align: right;
    }

    /* Two lines of context rather than one clipped one — there is vertical room here. */
    .cs-row-sub[b-wmfg339szf] {
        white-space: normal;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-top: 6px;
    }

    .cs-score-value[b-wmfg339szf] {
        font-size: 19px;
    }

    .cs-row-open .cs-score-value[b-wmfg339szf] {
        font-size: 19px;
    }

    /* Date and its save control sit on the metadata line, right-aligned. */
    .cs-cell-date[b-wmfg339szf] {
        text-align: right;
    }

    .cs-row-open .cs-row-actions[b-wmfg339szf] {
        margin-top: 8px;
    }

    /* 44px minimum on every target.

       The expanded row's Src/Save are real buttons and can simply be 44px tall. The collapsed
       row's Save is a word inside a metadata line, so it grows its hit area with a pseudo
       element instead — giving it min-height directly added 44px to the height of every
       collapsed row on the list. */
    .cs-action[b-wmfg339szf] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0 10px;
    }

    .cs-save-inline[b-wmfg339szf] {
        position: relative;
    }

        .cs-save-inline[b-wmfg339szf]::after {
            content: '';
            position: absolute;
            inset: -16px -12px;
        }

    .cs-page-head[b-wmfg339szf],
    .cs-stream[b-wmfg339szf] {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* 56px cannot hold "51 PRIORITY" side by side, so the band drops under the number —
       which is what the design draws on mobile. Without this the band clips mid-word and
       runs into the title. */
    .cs-score-line[b-wmfg339szf] {
        display: block;
    }

    /* Blazor appends the scope attribute to the RIGHTMOST selector, and .cs-band is rendered
       by ScoreBandLabel, so a bare .cs-band rule here compiles to .cs-band[b-search] and
       matches nothing. ::deep moves the attribute onto .cs-score-line, which this component
       does render. Blockifying the score itself is what actually drops the band to its own
       line inside 56px. */
    .cs-cell-score .cs-score-value[b-wmfg339szf] {
        display: block;
        font-size: 19px;
    }

    .cs-score-line[b-wmfg339szf]  .cs-band {
        display: block;
        margin-top: 3px;
        font-size: 8px;
    }

    /* Tags and keywords wrap instead of being clipped — there is horizontal room for one
       or two per line and no fixed row height to protect any more. */
    .cs-row-tags[b-wmfg339szf] {
        flex-wrap: wrap;
        overflow: visible;
        row-gap: 6px;
    }
}
/* _content/CivicSonar.Web/Components/Shared/ConfidencePips.razor.rz.scp.css */
/* Expanded form: pips on top, level beneath. */
.cs-conf[b-l463kxj4os] {
    display: block;
    min-width: 0;
}

.cs-conf-pips[b-l463kxj4os] {
    display: flex;
    gap: 3px;
    align-items: center;
}

.cs-conf-pip[b-l463kxj4os] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--cs-pip-off);
}

.cs-conf-pip-on[b-l463kxj4os] {
    background: var(--cs-signal, var(--cs-score-low));
}

.cs-conf-level[b-l463kxj4os] {
    display: block;
    margin-top: 7px;
    font-family: var(--cs-font-mono);
    font-size: 9.5px;
    line-height: 1;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cs-ink-muted);
}

/* Collapsed form: everything on one line inside a 56px row. */
.cs-conf-dense[b-l463kxj4os] {
    display: flex;
    align-items: center;
    gap: 7px;
}

    .cs-conf-dense .cs-conf-pips[b-l463kxj4os] {
        gap: 2px;
    }

    .cs-conf-dense .cs-conf-pip[b-l463kxj4os] {
        width: 7px;
        height: 7px;
    }

    .cs-conf-dense .cs-conf-level[b-l463kxj4os] {
        display: inline;
        margin-top: 0;
        font-size: 9px;
        letter-spacing: 0.08em;
    }
/* _content/CivicSonar.Web/Components/Shared/ScoreBandLabel.razor.rz.scp.css */
.cs-band[b-d9868ct68j] {
    font-family: var(--cs-font-mono);
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cs-signal, var(--cs-score-low));
}

.cs-band-dense[b-d9868ct68j] {
    font-size: 8.5px;
}
/* _content/CivicSonar.Web/Components/Shared/ScoreMeter.razor.rz.scp.css */
.cs-meter[b-nr0tjqkmd8] {
    height: 4px;
    margin-top: 8px;
    border-radius: 2px;
    background: var(--cs-pip-off);
    overflow: hidden;
}

.cs-meter-dense[b-nr0tjqkmd8] {
    height: 3px;
    margin-top: 6px;
}

.cs-meter-fill[b-nr0tjqkmd8] {
    height: 100%;
    border-radius: 2px;
    background: var(--cs-signal, var(--cs-score-low));
    transition: width var(--cs-motion) var(--cs-ease);
}