@import '_content/DHCS.MESMD.Lib.UI/DHCS.MESMD.Lib.UI.iit5hh2kew.bundle.scp.css';

/* /Components/Layout/FooterLink.razor.rz.scp.css */
/* Visible keyboard focus for footer links (DPIP-2547) */
[b-o2jj2pif2m] a:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   MainLayout Scoped Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Responsive Padding
   Matches the px-4 lg:px-8 pattern
   -------------------------------------------------------------------------- */
.dhcs-responsive-padding[b-2638ktxwxv] {
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 1024px) {
    .dhcs-responsive-padding[b-2638ktxwxv] {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* --------------------------------------------------------------------------
   Header — brand cluster (logo, divider, title) reflows with flex-wrap at
   400% zoom / narrow viewports (WCAG 1.4.10, DPIP-2756 / Figma 909:12270).
   -------------------------------------------------------------------------- */
.header-bar[b-2638ktxwxv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand menu";
    align-items: center;
    column-gap: 0.75rem;
    min-width: 0;
    max-width: 100%;
}

.header-brand[b-2638ktxwxv] {
    grid-area: brand;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    text-decoration: none;
    min-width: 0;
    max-width: 100%;
}

.header-brand[b-2638ktxwxv]  .header-logo,
.header-brand[b-2638ktxwxv]  img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 1.5rem; /* Figma 909:12273 — logo 24px */
    object-fit: contain;
}

/* Figma 2167:13997 / 909:12274 — 32px tall divider beside 24px logo */
.header-brand-divider[b-2638ktxwxv] {
    display: block;
    flex: 0 0 auto;
    align-self: center;
    width: 2px;
    min-width: 2px;
    height: 2rem;
    background-color: #E47224;
}

.header-brand[b-2638ktxwxv]  .dhcs-brand-text {
    min-width: 0;
    flex: 1 1 auto;
}

[b-2638ktxwxv] .header-menu {
    grid-area: menu;
}

[b-2638ktxwxv] .mud-appbar {
    height: auto;
    min-height: 64px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.dhcs-footer[b-2638ktxwxv] {
    border-top: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    margin-top: 4rem;
    min-width: 0;
    max-width: 100%;
}

.dhcs-footer .mud-stack[b-2638ktxwxv] {
    min-width: 0;
    max-width: 100%;
}

/* Explicit keyboard focus treatment for footer links (DPIP-2547). */
[b-2638ktxwxv] .dhcs-footer a.footer-link:focus,
[b-2638ktxwxv] .dhcs-footer a.footer-link:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* /Components/Pages/Compare.razor.rz.scp.css */
/* Metrics table — DPIP-1737: long metric names must wrap within cells */
[b-y3ucff69iu] .compare-metrics-table {
    width: 100%;
    table-layout: fixed;
}

/*
 * NOTE: rules that need to reach deep into MudSimpleTable (.mud-table-container) and the
 * portal Select combobox listbox (.dhcs-combobox-listbox) live in wwwroot/app.css.
 * Blazor scoped CSS rewrites selectors and, combined with MudBlazor's own scope attributes,
 * these specific overrides only reliably apply from the global stylesheet.
 */

[b-y3ucff69iu] .compare-metrics-table td,
[b-y3ucff69iu] .compare-metrics-table th {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: top;
}

[b-y3ucff69iu] tr.compare-metrics-header > th {
    overflow: visible;
    position: relative;
    z-index: 2;
    background: var(--dhcs-color-primary);
    padding: 12px 16px;
    text-align: left;
    /* Align all three header cells on the same baseline so "Data Set" sits inline with the dropdowns */
    vertical-align: middle;
}

[b-y3ucff69iu] .compare-metrics-header th:first-child {
    width: 40%;
}

[b-y3ucff69iu] .compare-metrics-header th:not(:first-child) {
    width: 30%;
    text-align: right;
}

.compare-county-selector[b-y3ucff69iu] {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: min(280px, 100%);
    margin-left: auto;
    width: 100%;
}

/*
 * Portal Select (WAI-ARIA combobox) label inside the dark header.
 * Figma compact layout (see screenshot) puts only the trigger on the header bar — the column
 * name "County A" / "County B" already labels the column visually via the <th> text, so hide
 * the Select's visible label in this context. We keep the label in the DOM for screen readers
 * (visually-hidden pattern) rather than removing it, because it is the accessible name source
 * for the combobox trigger via aria-labelledby.
 */
[b-y3ucff69iu] .compare-metrics-header .dhcs-select-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[b-y3ucff69iu] .compare-select .dhcs-combobox-trigger {
    background: #FFFFFF;
    color: var(--dhcs-color-text-primary);
    text-align: right;
    justify-content: flex-end;
}

[b-y3ucff69iu] .compare-select .dhcs-combobox-value {
    text-align: right;
}

[b-y3ucff69iu] .compare-select .dhcs-combobox-icon {
    margin-inline-start: 4px;
    flex-shrink: 0;
}

/*
 * Row header cells (<th scope="row">) in tbody. Reset the bold/white/background styling that
 * applies to the dark column headers; these must look like normal data cells.
 */
[b-y3ucff69iu] .compare-metrics-table tbody th.compare-metric-name-cell {
    background: transparent;
    text-align: left;
    padding: 12px 16px;
}

.compare-metric-value[b-y3ucff69iu] {
    text-align: right;
    font-weight: var(--dhcs-font-compare-metric-value-weight);
}

/* Solid row borders between metric rows (no striping — matches Figma layout) */
[b-y3ucff69iu] .compare-metrics-table tbody tr > td,
[b-y3ucff69iu] .compare-metrics-table tbody tr > th {
    background: transparent;
    border-top: 1px solid #DFE1E2;
}

/*
 * Empty-state row before counties are selected.
 * Typography lives on the inner EmptyState component; this rule is layout-only.
 */
[b-y3ucff69iu] .compare-empty-state-cell {
    text-align: center;
    padding: 24px 16px;
}

/* --------------------------------------------------------------------------
   WCAG 2.1 1.4.10 Reflow (DPIP-1737, Phase 11)
   Compare-page narrow-width treatment: container-query boundary on the
   metrics-table host. The selector-toggle and column-width overrides
   inside @container are added separately within DPIP-1737.
   -------------------------------------------------------------------------- */

.compare-table-host[b-y3ucff69iu] {
    container-type: inline-size;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Default: mobile artifacts hidden. Visible only inside the @container query below. */
.compare-selectors-mobile[b-y3ucff69iu] {
    display: none;
}

[b-y3ucff69iu] .compare-card-cell-label {
    display: none;
}

@container (max-width: 599px) {
    .compare-selectors-mobile[b-y3ucff69iu] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding-bottom: 12px;
    }

    .compare-selectors-desktop[b-y3ucff69iu] {
        display: none;
    }

    /* --------------------------------------------------------------------------
       Card transformation (DPIP-1737, ADR 0003)
       At narrow widths, the metrics table loses its visual table shape and
       becomes a stack of metric cards. Table semantics (caption, scope,
       headers attributes) stay in the DOM so screen readers continue to
       navigate it as a table; only the visual presentation changes.
       -------------------------------------------------------------------------- */

    [b-y3ucff69iu] .compare-metrics-table,
    [b-y3ucff69iu] .compare-metrics-table thead,
    [b-y3ucff69iu] .compare-metrics-table tbody,
    [b-y3ucff69iu] .compare-metrics-table tr {
        display: block;
        width: 100%;
    }

    /* Visually hide the column-header row (counties are labeled by the selectors
       above the table; the thead stays in the accessibility tree). */
    [b-y3ucff69iu] .compare-metrics-table tr.compare-metrics-header {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Each tbody row is a card. */
    [b-y3ucff69iu] .compare-metrics-table tbody tr {
        background: #FFFFFF;
        border: 1px solid #DFE1E2;
        border-radius: 4px;
        padding: 12px 16px;
        margin-top: 0;
        margin-bottom: 12px;
    }

    /* Reset the row-border styling that applies at wide widths. */
    [b-y3ucff69iu] .compare-metrics-table tbody tr > td,
    [b-y3ucff69iu] .compare-metrics-table tbody tr > th {
        border-top: 0;
        padding: 0;
    }

    /* The metric name spans the full card width as its title. */
    [b-y3ucff69iu] .compare-metrics-table tbody th.compare-metric-name-cell {
        display: block;
        margin-bottom: 8px;
        text-align: left;
    }

    /* Each value cell becomes a labeled flex row: [county name]   [value]. */
    [b-y3ucff69iu] .compare-metrics-table tbody td.compare-metric-value {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 8px;
        text-align: left;
        padding: 4px 0;
    }

    [b-y3ucff69iu] .compare-card-cell-label {
        font-weight: var(--dhcs-font-compare-metric-value-weight);
        color: var(--dhcs-color-text-primary);
        display: inline;
    }

    [b-y3ucff69iu] .compare-card-cell-value {
        font-weight: var(--dhcs-font-compare-metric-value-weight);
        text-align: right;
    }
}

/* --------------------------------------------------------------------------
   Skeleton loading state for the tab strip (chart card skeletons render
   via the shared ChartCardSkeleton component below the tab strip).
   -------------------------------------------------------------------------- */

.compare-tabs-skeleton[b-y3ucff69iu] {
    display: flex;
    gap: 16px;
    border-bottom: 1px solid #DFE1E2;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.skeleton-tab[b-y3ucff69iu] {
    width: 200px;
    height: 24px;
    background: #F0F0F0;
    border-radius: 4px;
    animation: skeleton-pulse-b-y3ucff69iu 1.4s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-y3ucff69iu {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}
/* /Components/Pages/CountyDashboard.razor.rz.scp.css */
/* ==========================================================================
   County Dashboard
   ========================================================================== */

/* min-width: 0 so the flex row can reflow at 400% zoom / narrow viewports (DPIP-1737) */
.county-selector-container[b-phevq8ne3d] {
    min-width: 0;
    max-width: min(380px, 100%);
    flex: 1 1 auto;
    width: 100%;
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
/* WCAG 1.4.10 — long paragraphs and legal links must reflow (DPIP-1737) */
section[aria-label="Privacy Policy"][b-u3ycajzx04] {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.privacy-unordered-list[b-u3ycajzx04] {
    padding-left: 24px;
    margin: 8px 0;
}

.privacy-unordered-list li[b-u3ycajzx04] {
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}
/* /Components/Shared/AttributionFooter.razor.rz.scp.css */
/* src/CountyProfile.UI.Web/Components/Shared/AttributionFooter.razor.css */
.attribution-footer[b-u78vkgi78c] {
    margin-top: 16px;
    padding-left: var(--y-axis-offset, 0);
    display: flex;
    flex-direction: column;
}

/* Blank line between the suppression footnote and the Data Source line. */
.attribution-footer__suppression[b-u78vkgi78c] {
    margin-bottom: 20px;
}

.attribution-footer__extra-footnote[b-u78vkgi78c] {
    margin-bottom: 20px;
}
/* /Components/Shared/BarBreakdownChart.razor.rz.scp.css */
[b-273mdy4tnm] .mud-paper {
    background: var(--mud-palette-background-gray);
}

.bar-breakdown-chart-scroll[b-273mdy4tnm] {
    width: 100%;
    /* Flex/grid min-size is content-based by default; inner chart has min-width: 900px.
       Without this, the scroll box refuses to shrink and blows page width at ~320px (DPIP-1737). */
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
}

.bar-breakdown-chart[b-273mdy4tnm] {
    min-width: 900px;
    height: 400px;
    overflow: hidden;
}

[b-273mdy4tnm] .bar-breakdown-chart .apexcharts-bar-area:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
/* /Components/Shared/ChartCardChrome.razor.rz.scp.css */
.chart-card-chrome[b-a76u0eg7b9] {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.chart-card-chrome[b-a76u0eg7b9]  .mud-card-header,
.chart-card-chrome[b-a76u0eg7b9]  .mud-card-content {
    min-width: 0;
}

.chart-card-chrome__pre-chart-banner[b-a76u0eg7b9] {
    margin-bottom: 12px;
}

.chart-card-chrome__footer[b-a76u0eg7b9] {
    margin-top: 12px;
}
/* /Components/Shared/CollapsibleSubCard.razor.rz.scp.css */
.collapsible-sub-card[b-o46li81rgj] {
    background-color: #ffffff;
    border: 1px solid #e5e2e1;
    border-radius: 4px;
    /* Use clip only on x so wrapped metadata / status tags are not vertically clipped (DPIP-1737). */
    overflow-x: clip;
    overflow-y: visible;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.collapsible-sub-card__header[b-o46li81rgj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    user-select: none;
}

.collapsible-sub-card__title-section[b-o46li81rgj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.collapsible-sub-card__title-row[b-o46li81rgj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/*
 * Native <button> trigger. Reset browser chrome so the visible card header still
 * looks like a heading row, not a pill button; the title text and chevron are the
 * button's accessible children. WCAG 2.5.8 target size is preserved because the
 * button spans the full title row height (icon + H3).
 */
.collapsible-sub-card__toggle[b-o46li81rgj] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.collapsible-sub-card__toggle:hover[b-o46li81rgj] {
    background-color: rgba(0, 0, 0, 0.02);
}

.collapsible-sub-card__toggle:focus-visible[b-o46li81rgj] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.collapsible-sub-card__metadata[b-o46li81rgj] {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
}

[b-o46li81rgj] .collapsible-sub-card__subtitle--regular {
    color: #364153 !important;
    font-weight: var(--dhcs-font-collapsible-sub-card-subtitle-regular-weight) !important;
}

[b-o46li81rgj] .collapsible-sub-card__subtitle--homeless-medi-cal {
    font-family: var(--dhcs-font-homeless-medi-cal-subtitle-family), sans-serif !important;
}

/* Integrated Plan (and similar): Mud utility rows must shrink so dates/status reflow */
.collapsible-sub-card__metadata[b-o46li81rgj]  .d-flex {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
}

.collapsible-sub-card__metadata[b-o46li81rgj]  .mud-typography {
    min-width: 0;
    overflow-wrap: anywhere;
}

.collapsible-sub-card__title-action[b-o46li81rgj] {
    flex-shrink: 0;
}

.collapsible-sub-card__divider[b-o46li81rgj] {
    height: 1px;
    background-color: #e5e2e1;
    margin: 0;
}

.collapsible-sub-card__content[b-o46li81rgj] {
    padding: 24px;
    min-width: 0;
}

.collapsible-sub-card__footer[b-o46li81rgj] {
    padding: 24px;
}

/* Figma 914:14197 — header + attribution with 24px gap, no empty body padding */
.collapsible-sub-card--footer-adjacent[b-o46li81rgj] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.collapsible-sub-card--footer-adjacent .collapsible-sub-card__header[b-o46li81rgj] {
    padding-bottom: 0;
}

.collapsible-sub-card--footer-adjacent .collapsible-sub-card__divider[b-o46li81rgj] {
    margin: 0;
}

.collapsible-sub-card--footer-adjacent .collapsible-sub-card__footer[b-o46li81rgj] {
    padding: 0 24px 24px;
}

.collapsible-sub-card--footer-adjacent .collapsible-sub-card__footer[b-o46li81rgj]  .attribution-footer {
    margin-top: 0;
    gap: 0;
}

.collapsible-sub-card--footer-adjacent .collapsible-sub-card__footer[b-o46li81rgj]  .dhcs-chart-caption {
    line-height: var(--dhcs-font-chart-caption-line-height);
}
/* /Components/Shared/CompareBarBreakdownChart.razor.rz.scp.css */
.bar-breakdown-chart-scroll[b-cf96wuosq8] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
}

.bar-breakdown-chart[b-cf96wuosq8] {
    min-width: 900px;
    height: 400px;
    overflow: hidden;
}

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

.skip-past-chart:focus[b-cf96wuosq8] {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    background: var(--dhcs-color-primary);
    color: #FFFFFF;
    padding: 4px 8px;
    border-radius: 4px;
}
/* /Components/Shared/CompareLegend.razor.rz.scp.css */
.compare-legend[b-iwyh1xmzfp] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.compare-legend__item[b-iwyh1xmzfp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.compare-legend__swatch[b-iwyh1xmzfp] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
}

.compare-legend__label[b-iwyh1xmzfp] {
    font-family: var(--dhcs-font-family-default);
    font-size: var(--dhcs-font-chart-axis-label-size);
    line-height: var(--dhcs-font-chart-axis-label-line-height);
    overflow-wrap: anywhere;
    min-width: 0;
}
/* /Components/Shared/CountySelector.razor.rz.scp.css */
/*
 * Layout for the label-outside variant (DPIP-2894 landing).
 * Inside variant (default) leans entirely on Lib.UI Select styling — no rules here.
 */

.county-selector--label-outside[b-8x21wdt6vl] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    max-width: 520px;
    width: 100%;
}

.county-selector__label[b-8x21wdt6vl] {
    font-weight: var(--dhcs-font-landing-selector-label-weight);
    color: var(--dhcs-color-text-primary, #1B1B1B);
    white-space: nowrap;
    margin: 0;
}

.county-selector--label-outside[b-8x21wdt6vl]  .dhcs-select {
    flex: 1;
    min-width: 0;
}

/*
 * Hide Lib.UI Select's visible label ("County" sitting above the trigger).
 * The combobox's aria-labelledby still points to this span, so screen readers
 * continue to announce the field correctly.
 */
.county-selector--label-outside[b-8x21wdt6vl]  .dhcs-select-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * Show "County" inside the empty trigger as placeholder text. :empty matches
 * before the user picks; once a county is selected the .dhcs-combobox-value
 * span carries the county name and ::before suppresses.
 */
.county-selector--label-outside[b-8x21wdt6vl]  .dhcs-combobox-value:empty::before {
    content: "County";
    color: var(--dhcs-color-text-secondary, #565656);
}
/* /Components/Shared/KeyMetricCard.razor.rz.scp.css */
/* ==========================================================================
   Key Metric Card
   ========================================================================== */

.key-metric-card[b-od5rphrero] {
    background: #fcfcfc;
    border: 1px solid #000;
    padding: 16px;
    /* Fill the segment/grid cell rather than sizing to content, so every card
       renders the same width regardless of how wide its title or value is. */
    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* ---------- Header Row ---------- */

.key-metric-header[b-od5rphrero] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    flex: 1;
    min-width: 0;
}

/* Middle column: grows to fill the gap between the corner-pinned icon and
   popover, so the title wraps in place without displacing either. */
.key-metric-title-group[b-od5rphrero] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.key-metric-header[b-od5rphrero]  .mud-typography {
    overflow-wrap: anywhere;
    min-width: 0;
}

[b-od5rphrero] .key-metric-icon {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
}

[b-od5rphrero] .key-metric-title-line2 {
    color: var(--mud-palette-text-secondary);
}

[b-od5rphrero] .info-popover {
    margin-left: auto;
    flex-shrink: 0;
}

/* ---------- Body ---------- */

.key-metric-body[b-od5rphrero] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

[b-od5rphrero] .key-metric-subtitle {
    color: var(--mud-palette-text-secondary);
}

/* ---------- Segment variant (inside a segmented MetricGrid bar at md+) ---------- */

.key-metric-card.key-metric-card--segment[b-od5rphrero] {
    /* Hide own border/background; the parent .metric-grid carries them. */
    background: transparent;
    border: none;
    height: 100%;
}

/* On narrow viewports, the segment modifier reverts to the standard card look. */
@media (max-width: 959.98px) {
    .key-metric-card.key-metric-card--segment[b-od5rphrero] {
        background: #fcfcfc;
        border: 1px solid #000;
    }
}
/* /Components/Shared/MetricGrid.razor.rz.scp.css */
/* ==========================================================================
   Metric Grid
   ========================================================================== */

.metric-grid[b-nu7kbzucse] {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    background: #fcfcfc;
    border: 1px solid #000;
}

.metric-grid__segment[b-nu7kbzucse] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.metric-grid__divider[b-nu7kbzucse] {
    width: 1px;
    align-self: stretch;
    background: rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

/* Mobile / narrow tablet: stack into per-card boxes, hide dividers.
   Grid with equal auto-rows keeps every card the same height regardless of
   how many lines its title wraps to — flex-wrap can only equalize within a
   single row, not across rows. */
@media (max-width: 959.98px) {
    .metric-grid[b-nu7kbzucse] {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
        gap: 16px;
        border: none;
        background: transparent;
    }

    .metric-grid__divider[b-nu7kbzucse] {
        display: none;
    }
}

/* Small tablet: 2-up. */
@media (min-width: 600px) and (max-width: 959.98px) {
    .metric-grid[b-nu7kbzucse] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Shared/SectionContainer.razor.rz.scp.css */
.section-container[b-072g5aztg0] {
    background-color: #ffffff;
    border: 1px solid #e5e2e1;
    border-radius: 4px;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.section-container__header[b-072g5aztg0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 24px;
    border-bottom: 1px solid #e5e2e1;
}

.section-container__header > :first-child[b-072g5aztg0] {
    min-width: 0;
    flex: 1 1 auto;
}

.section-container__body[b-072g5aztg0] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background-color: #f4f8f9;
    min-width: 0;
}
/* /Components/Shared/SkipNavigation.razor.rz.scp.css */
/* ==========================================================================
   Skip Navigation - Accessibility Component
   ========================================================================== */

.skip-navigation[b-gn8ojtu582] {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    z-index: 9999;
    background: var(--mud-palette-background);
    color: var(--mud-palette-primary);
    padding: 8px 16px;
    text-decoration: underline;
    font-size: var(--dhcs-font-skip-nav-size);
    font-weight: var(--dhcs-font-skip-nav-weight);
}

.skip-navigation:focus[b-gn8ojtu582] {
    transform: translateY(0);
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
/* /Components/Shared/Typography/BrandText.razor.rz.scp.css */
.dhcs-brand-text[b-u4ji1zt4nf] {
    font-family: var(--dhcs-font-family-heading);
    font-size: var(--dhcs-font-brand-text-size);
    font-weight: var(--dhcs-font-brand-text-weight);
    line-height: var(--dhcs-font-brand-text-line-height);
    letter-spacing: 0;
    color: var(--dhcs-color-primary);
    overflow-wrap: break-word;
}
/* /Components/Shared/Typography/ChartCaption.razor.rz.scp.css */
/* color: #364153 is a literal because the library does not yet expose a token
   for this caption color. Tracked in .scratch/lib-ui-typography-port/02-chart-caption-color-token.md.
   The drift guard scans font-* and line-height only — color literals are allowed. */
.dhcs-chart-caption[b-0cmmcmkj13] {
    font-family: var(--dhcs-font-family-heading);
    font-size: var(--dhcs-font-chart-caption-size);
    font-weight: var(--dhcs-font-chart-caption-weight);
    line-height: var(--dhcs-font-chart-caption-line-height);
    font-style: var(--dhcs-font-chart-caption-style);
    color: #364153;
}

.dhcs-chart-caption.dhcs-chart-caption--upright[b-0cmmcmkj13] {
    font-style: var(--dhcs-font-chart-caption-upright-style);
}
/* /Components/Shared/Typography/ChartSubtitle.razor.rz.scp.css */
.dhcs-chart-subtitle[b-nu33v2vvja] {
    font-family: var(--dhcs-font-family-heading);
    font-size: var(--dhcs-font-chart-subtitle-size);
    font-weight: var(--dhcs-font-chart-subtitle-weight);
    line-height: var(--dhcs-font-chart-subtitle-line-height) !important;
    color: var(--dhcs-color-primary);
    margin: 0;
    padding: 0;
}
/* /Components/Shared/Typography/ChartTitle.razor.rz.scp.css */
/* src/CountyProfile.UI.Web/Components/Shared/Typography/ChartTitle.razor.css */
.dhcs-chart-title[b-tvhzl40jei] {
    font-family: var(--dhcs-font-family-heading);
    font-size: var(--dhcs-font-chart-title-size);
    font-weight: var(--dhcs-font-chart-title-weight);
    line-height: var(--dhcs-font-chart-title-line-height);
    color: var(--dhcs-color-primary);
    margin: 0;
    padding: 0;
}
/* /Components/Shared/Typography/CountyLabel.razor.rz.scp.css */
.dhcs-county-label[b-quvx5xp5p2] {
    font-family: var(--dhcs-font-family-heading);
    color: var(--dhcs-color-primary);
    margin: 0;
}

.dhcs-county-label--default[b-quvx5xp5p2] {
    font-size: var(--dhcs-font-county-label-size);
    font-weight: var(--dhcs-font-county-label-weight);
    line-height: var(--dhcs-font-county-label-line-height);
}

.dhcs-county-label--small[b-quvx5xp5p2] {
    font-size: var(--dhcs-font-county-label-small-size);
    font-weight: var(--dhcs-font-county-label-small-weight);
    line-height: var(--dhcs-font-county-label-small-line-height);
}
/* /Components/Shared/Typography/EmptyState.razor.rz.scp.css */
.dhcs-empty-state[b-3l8axd8rlp] {
    font-family: var(--dhcs-font-family-default);
    font-size: var(--dhcs-font-empty-state-size);
    font-weight: var(--dhcs-font-empty-state-weight);
    line-height: var(--dhcs-font-empty-state-line-height);
    letter-spacing: 0;
    color: var(--dhcs-color-text-primary);
    margin: 0;
}
/* /Components/Shared/Typography/MetricName.razor.rz.scp.css */
.dhcs-metric-name[b-d24hgar3yh] {
    font-family: var(--dhcs-font-family-heading);
    font-size: var(--dhcs-font-metric-name-size);
    font-weight: var(--dhcs-font-metric-name-weight);
    line-height: var(--dhcs-font-metric-name-line-height);
    color: var(--dhcs-color-text-primary);
    margin: 0;
}

@container (max-width: 599px) {
    .dhcs-metric-name[b-d24hgar3yh] {
        font-size: var(--dhcs-font-metric-name-card-size);
        font-weight: var(--dhcs-font-metric-name-card-weight);
        line-height: var(--dhcs-font-metric-name-card-line-height);
    }
}
/* /Components/Shared/Typography/SectionHeading.razor.rz.scp.css */
.dhcs-section-heading[b-yl2mfrawqq] {
    font-family: var(--dhcs-font-family-heading);
    font-size: var(--dhcs-font-section-heading-size);
    font-weight: var(--dhcs-font-section-heading-weight);
    line-height: var(--dhcs-font-section-heading-line-height);
    color: var(--dhcs-color-primary);
    margin: 0;
}
/* /Components/Shared/Typography/StatusTagText.razor.rz.scp.css */
.dhcs-status-tag-text[b-04xr9hr47y] {
    font-family: var(--dhcs-font-family-default);
    font-size: var(--dhcs-font-status-tag-text-size);
    font-weight: var(--dhcs-font-status-tag-text-weight);
    line-height: var(--dhcs-font-status-tag-text-line-height);
    color: var(--dhcs-color-text-primary);
}
/* /Components/Shared/Typography/TableHeaderCellText.razor.rz.scp.css */
.dhcs-table-header-cell-text[b-9ga9wjchw3] {
    font-family: var(--dhcs-font-family-heading);
    font-size: var(--dhcs-font-table-header-text-size);
    font-weight: var(--dhcs-font-table-header-text-weight);
    line-height: var(--dhcs-font-table-header-text-line-height);
    color: var(--dhcs-color-text-white);
}
/* /Components/Shared/WatermarkOverlay.razor.rz.scp.css */
/* Prevent huge rotated watermark text from forcing horizontal overflow at 400% zoom */
.watermark-container[b-kzencryeqc] {
    position: relative;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.watermark-overlay[b-kzencryeqc] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.watermark-block[b-kzencryeqc] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
}

.watermark-text[b-kzencryeqc] {
    font-size: var(--dhcs-font-watermark-size);
    font-weight: var(--dhcs-font-watermark-weight);
    text-transform: uppercase;
    color: rgba(200, 0, 0, 0.30);
    white-space: normal;
    text-align: center;
    max-width: 100%;
    line-height: var(--dhcs-font-watermark-line-height);
}

.watermark-subtitle[b-kzencryeqc] {
    font-size: var(--dhcs-font-watermark-subtitle-size);
    font-weight: var(--dhcs-font-watermark-subtitle-weight);
    text-transform: uppercase;
    color: rgba(200, 0, 0, 0.30);
    white-space: normal;
    text-align: center;
    max-width: 100%;
    line-height: var(--dhcs-font-watermark-subtitle-line-height);
}
/* /Components/Tabs/HomelessnessTab.razor.rz.scp.css */
/* HomelessnessTab — no component-specific styles needed after SectionContainer migration */
/* /Components/Tabs/IntegratedPlan/StatusTag.razor.rz.scp.css */
.status-tag[b-4s3g5utjn5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid;
    border-radius: 40px;
    white-space: normal;
    min-height: 24px;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
/* /Components/Tabs/IntegratedPlan/SubmissionStatusBanner.razor.rz.scp.css */
.submission-banner[b-66v83ctgom] {
    display: flex;
    align-items: center;
    gap: var(--dhcs-spacing-xs, 8px);
    min-height: 56px;
    padding: var(--dhcs-spacing-sm, 16px);
    border: 1.5px solid var(--dhcs-color-primary);
    border-left-width: 6px;
    border-radius: 4px;
    background-color: var(--dhcs-color-bg-white, #fff);
}

.submission-banner__icon[b-66v83ctgom] {
    color: var(--dhcs-color-primary) !important;
    flex-shrink: 0;
    font-size: var(--dhcs-font-inline-informational-icon-size) !important;
    width: 24px;
    height: 24px;
}

.submission-banner__text[b-66v83ctgom] {
    flex: 1;
    min-width: 0;
}

.submission-banner__text :global(.mud-link)[b-66v83ctgom] {
    color: inherit;
}
/* /Components/Tabs/IntegratedPlanTab.razor.rz.scp.css */
.integrated-plan-header-meta[b-yddo5jmtrj] {
    width: 100%;
    align-items: flex-start !important;
}

.integrated-plan-header-meta[b-yddo5jmtrj]  > .d-flex {
    row-gap: 0.25rem;
}
/* /Components/Tabs/Overview/ContactField.razor.rz.scp.css */
.contact-field-row[b-mwyre12lvg] {
    width: 100%;
    min-width: 0;
}

.contact-field-row[b-mwyre12lvg]  .mud-icon-root {
    flex-shrink: 0;
}

.contact-field__body[b-mwyre12lvg] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.contact-field__body[b-mwyre12lvg]  .mud-typography {
    overflow-wrap: anywhere;
}
/* /Components/Tabs/OverviewTab.razor.rz.scp.css */
/* WCAG 1.4.10 — Overview: card titles, subheaders, contact fields, plan names, emails */
.overview-tab[b-mfb8uoir8w] {
    min-width: 0;
}

.overview-tab[b-mfb8uoir8w]  .mud-paper {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.overview-tab[b-mfb8uoir8w]  .mud-typography {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Figma Overview — Medi-Cal Managed Care Plans list (909:12402) */
.overview-managed-care-plans-body[b-mfb8uoir8w] {
    background-color: #f4f8f9;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
}

.overview-tab[b-mfb8uoir8w]  .overview-managed-care-plan-name {
    font-size: var(--dhcs-font-overview-managed-care-plan-name-size);
    font-weight: var(--dhcs-font-overview-managed-care-plan-name-weight);
    line-height: var(--dhcs-font-overview-managed-care-plan-name-line-height);
    color: var(--dhcs-color-text-primary);
}