@import '_content/AgencyRoot.Extensions.Blazor.WebAssembly/AgencyRoot.Extensions.Blazor.WebAssembly.kr86g4uyry.bundle.scp.css';

/* /Features/Contacts/Activities/Components/ActivityComponent.razor.rz.scp.css */
[b-l1zwuy6ik1] .mud-timeline-item-divider {
    min-width: 60px !important;
    padding: 0 !important;
}

[b-l1zwuy6ik1] .mud-timeline-item-content {
    max-width: calc(100% - 60px) !important;
    min-width: 280px;
}
/* /Features/Contacts/Activities/Components/ActivityMediaGroupComponent.razor.rz.scp.css */
.media-container[b-q1msmjs91r] {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.media-scroll[b-q1msmjs91r] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox - hide scrollbar */
    -ms-overflow-style: none; /* IE/Edge - hide scrollbar */
}

.media-scroll[b-q1msmjs91r]::-webkit-scrollbar {
    display: none; /* Chrome/Safari - hide scrollbar */
}

.media-item[b-q1msmjs91r] {
    flex-shrink: 0;
    padding: 4px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    background: white;
}

.media-item:hover[b-q1msmjs91r] {
    border-color: #9e9e9e;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.media-scroll-button[b-q1msmjs91r] {
    position: absolute;
    z-index: 1;
    background-color: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.media-scroll-button-left[b-q1msmjs91r] {
    left: 0;
}

.media-scroll-button-right[b-q1msmjs91r] {
    right: 0;
}
/* /Features/Contacts/Activities/Components/SearchActivitiesComponent.razor.rz.scp.css */
[b-n8k229od7g] .mud-timeline-vertical.mud-timeline-position-start::before {
    left: 29px !important;
}
/* /Features/Contacts/Components/MergeContactsComponent.razor.rz.scp.css */
[b-307plhgrqa] .sticky-header {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 1;
}

[b-307plhgrqa] .text-align-center {
    text-align: center;
}
/* /Features/Contacts/Pages/ImportContactsPage.razor.rz.scp.css */
[b-j70u9o16hh] .text-align-center {
    text-align: center;
}
/* /Features/Documents/Components/DocumentsDashboardViewListComponent.razor.rz.scp.css */
.ar-view-list[b-te12gxo53p] {
    width: 100%;
}

.ar-view-list__row[b-te12gxo53p],
.ar-view-list__child[b-te12gxo53p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.ar-view-list__child[b-te12gxo53p] {
    position: relative;
}

.ar-view-list__row:hover[b-te12gxo53p],
.ar-view-list__child:hover[b-te12gxo53p] {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Active-view highlight: the Primary brand green (#007E69) as a 12%-opacity tint
   plus a solid accent bar. The Ready-for-Auto-File badge uses the same brand green
   but as a solid filled pill, so "selected row" (subtle tint) and "positive count"
   (solid pill) stay distinguishable while sharing one brand colour. */
.ar-view-list__row--active[b-te12gxo53p] {
    background-color: rgba(0, 126, 105, 0.12);
    border-left: 3px solid #007E69;
    padding-left: 5px;
}

/* Child rows sit inside the tree gutter, so the top-level accent bar would land
   beside the connector rail and read as an indent jump that breaks the line. An
   active child uses the background highlight alone; the rail stays continuous. */
.ar-view-list__child.ar-view-list__row--active[b-te12gxo53p] {
    border-left: none;
    padding-left: 8px;
}

.ar-view-list__row-main[b-te12gxo53p] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Icon / label / badge live on MudBlazor child components, so their classes are
   not in this component's scope — reach them with ::deep from a scoped ancestor. */
.ar-view-list__row[b-te12gxo53p]  .ar-view-list__icon {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

.ar-view-list__row[b-te12gxo53p]  .ar-view-list__label,
.ar-view-list__child[b-te12gxo53p]  .ar-view-list__label {
    min-width: 0;
}

/* Push every count badge to the right edge of its row regardless of the label
   width or the inline chevron, so all badges share a single right margin. */
.ar-view-list__row[b-te12gxo53p]  .ar-view-list__badge,
.ar-view-list__child[b-te12gxo53p]  .ar-view-list__badge {
    margin: 0 0 0 auto;
}

/* The loading spinner shares the badge with the count text, so it must fit the
   small chip's line height rather than MudBlazor's default small diameter. */
.ar-view-list__row[b-te12gxo53p]  .ar-view-list__badge-spinner,
.ar-view-list__child[b-te12gxo53p]  .ar-view-list__badge-spinner {
    width: 14px;
    height: 14px;
}

/* Inbox children indent. The tree rail is drawn per-child (below) rather than as
   a single container border, so the vertical line can terminate at the last
   child rather than running past it. */
.ar-view-list__children[b-te12gxo53p] {
    position: relative;
    margin-left: 19px;
    padding-left: 16px;
}

/* Vertical rail segment for each child, sitting in the container's left padding. */
.ar-view-list__child[b-te12gxo53p]::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 0;
    height: 100%;
    border-left: 1px solid var(--mud-palette-lines-default, #cfcfcf);
}

/* Horizontal tick meeting the rail at the child's vertical center. */
.ar-view-list__child[b-te12gxo53p]::after {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 8px;
    border-top: 1px solid var(--mud-palette-lines-default, #cfcfcf);
}

/* The last child stops the rail at its own center, turning the run into an
   "L" (terminating) rather than a "T" (continuing). */
.ar-view-list__child:last-child[b-te12gxo53p]::before {
    height: 50%;
}
/* /Features/Policies/Chat/PolicyChatAggregateComponent.razor.rz.scp.css */
/* The residual is a total, not another group: secondary ink and a rule above it keep it from reading
   as one more bucket sitting under the plot. The table says the same thing in its own footer, where
   MudBlazor renders the row and this stylesheet's scope does not reach. */
.agency-iq-aggregate__other[b-220y8l4h72] {
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
    padding-top: 4px;
}
/* /Features/Policies/Chat/PolicyChatAnalysisComponent.razor.rz.scp.css */
/* Its own scroll container: fifty computed columns scroll sideways here instead of widening the tab. */
.agency-iq-analysis__grid[b-amhxwhem2z] {
    overflow-x: auto;
}

/* The count takes the free width, as the structured table's criteria do; the view toggle keeps its own line. */
.agency-iq-analysis[b-amhxwhem2z]  .agency-iq-analysis__header > .policy-chat-criteria {
    flex: 1 1 auto;
    min-width: 0;
}

.agency-iq-analysis[b-amhxwhem2z]  .agency-iq-analysis__kind {
    max-width: 14rem;
}
/* /Features/Policies/Chat/PolicyChatAnalysisMapComponent.razor.rz.scp.css */
/* A definite height: the module fits its projection to the canvas's box, and a box sized by its content has none. The
   dashboard's own map height, so the answer's map is as tall as the Map tab's beside it rather than a strip that crops
   the country top and bottom on a wide screen. */
.agency-iq-analysis-map__canvas[b-eo2qwsqevd] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    height: var(--policy-map-height, 36rem);
    position: relative;
}

.agency-iq-analysis-map__stop[b-eo2qwsqevd] {
    border-radius: 2px;
    display: inline-block;
    flex: 0 0 auto;
    height: 12px;
    width: 20px;
}

/* The empty grey sits on a white page, so it carries a hairline to read as a swatch at all. It is left to Dark Reader,
   as the empty counties are, so the two stay alike on its dark ground. */
.agency-iq-analysis-map__empty[b-eo2qwsqevd] {
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px #BDBDBD;
    display: inline-block;
    flex: 0 0 auto;
    height: 12px;
    width: 20px;
}

.agency-iq-analysis-map[b-eo2qwsqevd]  .agency-iq-analysis-map__legend {
    margin-top: 4px;
}

.agency-iq-analysis-map[b-eo2qwsqevd]  .agency-iq-analysis-map__legend-title {
    font-weight: 500;
}

.agency-iq-analysis-map[b-eo2qwsqevd]  .agency-iq-analysis-map__range {
    font-variant-numeric: tabular-nums;
}

/* Dark Reader recolors a county by its size, as text when it is small and as a background when it is large, so one
   bucket of the scale would come out in two colors. Each county keeps the fill the map wrote on it instead, read back
   from its own attribute; browsers without typed attr() leave it to Dark Reader. A county with no value stays Dark
   Reader's, so the empty map around the answer darkens with the page. */
.agency-iq-analysis-map__canvas[b-eo2qwsqevd]  path[data-fips]:not([fill="#f2f2f2"]) {
    fill: attr(fill type(<color>)) !important;
}

/* The legend's swatches are pinned the same way, from the custom property each carries. */
.agency-iq-analysis-map__stop[b-eo2qwsqevd] {
    background: var(--policy-chat-map-stop) !important;
}
/* /Features/Policies/Chat/PolicyChatCellComponent.razor.rz.scp.css */
/* The dashboard grids' policy number: the policy icon beside the link. */
.policy-chat-policy[b-8zdq8zf3l0] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
/* /Features/Policies/Chat/PolicyChatChartFrameComponent.razor.rz.scp.css */
/* Opaque inks throughout rather than the theme's translucent secondary text: a dark-mode reader such as Dark Reader
   keeps a translucent color's alpha when it inverts it, which leaves chart text too faint on its dark ground. */
/* The total keeps MudText's own ink, which Dark Reader already adapts with the rest of the page's text. */
.policy-chat-chart[b-4lrfw3cwkb]  .policy-chat-chart__total {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.policy-chat-chart__plot[b-4lrfw3cwkb] {
    border-radius: 4px;
    /* The library sizes its canvas in whole pixels from a width measured earlier, so it can be a few pixels wider than
       the frame for a moment. Clipped, that never becomes a scrollbar on the pane; clip, unlike hidden, leaves the
       vertical axis alone for the tooltip and the menu. */
    overflow-x: clip;
}

.policy-chat-chart__plot:focus-visible[b-4lrfw3cwkb] {
    outline: 2px solid #007E69;
    outline-offset: 2px;
}

.policy-chat-chart__plot[b-4lrfw3cwkb]  .apexcharts-text:not(.apexcharts-datalabel):not(.apexcharts-datalabel-label):not(.apexcharts-datalabel-value) {
    fill: #616161;
}

.policy-chat-chart__plot[b-4lrfw3cwkb]  .apexcharts-xaxis-title-text,
.policy-chat-chart__plot[b-4lrfw3cwkb]  .apexcharts-yaxis-title-text {
    fill: #424242;
}

.policy-chat-chart__plot[b-4lrfw3cwkb]  .apexcharts-yaxis-label,
.policy-chat-chart__plot[b-4lrfw3cwkb]  .apexcharts-xaxis-label {
    font-variant-numeric: tabular-nums;
}

.policy-chat-chart__plot[b-4lrfw3cwkb]  .apexcharts-gridline {
    stroke: #E6E6E6;
}

/* The 2px gap between touching fills is a stroke in the surface color. Dark Reader lightens every stroke as if it were
   text, which turns the gap into a bright outline on its dark ground, so under it the gap is dropped instead. */
html[data-darkreader-scheme="dark"] .policy-chat-chart__plot[b-4lrfw3cwkb]  .apexcharts-bar-area,
html[data-darkreader-scheme="dark"] .policy-chat-chart__plot[b-4lrfw3cwkb]  .apexcharts-rangebar-area,
html[data-darkreader-scheme="dark"] .policy-chat-chart__plot[b-4lrfw3cwkb]  .apexcharts-pie-area,
html[data-darkreader-scheme="dark"] .policy-chat-chart__plot[b-4lrfw3cwkb]  .apexcharts-heatmap-rect,
html[data-darkreader-scheme="dark"] .policy-chat-chart__plot[b-4lrfw3cwkb]  .apexcharts-treemap-rect,
html[data-darkreader-scheme="dark"] .policy-chat-chart__plot[b-4lrfw3cwkb]  .apexcharts-marker {
    stroke-opacity: 0;
}

/* The library's tooltip box, restyled as a card. Its content, PolicyChatChartTooltip's, carries its colors inline. */
.policy-chat-chart__plot[b-4lrfw3cwkb]  .apexcharts-tooltip {
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
    overflow: hidden;
}

.policy-chat-chart__plot[b-4lrfw3cwkb]  .policy-chat-tip {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    max-width: 320px;
    padding: 8px 10px;
    white-space: normal;
}

.policy-chat-chart__plot[b-4lrfw3cwkb]  .policy-chat-tip__title {
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.policy-chat-chart__plot[b-4lrfw3cwkb]  .policy-chat-tip__kind {
    font-size: 11px;
    margin-bottom: 2px;
}

.policy-chat-chart__plot[b-4lrfw3cwkb]  .policy-chat-tip__row {
    align-items: baseline;
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

/* A short stroke of the mark's color, not a filled box: the key is a label's job, not data ink. */
.policy-chat-chart__plot[b-4lrfw3cwkb]  .policy-chat-tip__key {
    align-self: center;
    border-radius: 2px;
    display: inline-block;
    flex: 0 0 auto;
    height: 3px;
    width: 12px;
}

.policy-chat-chart__plot[b-4lrfw3cwkb]  .policy-chat-tip__value {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.policy-chat-chart__plot[b-4lrfw3cwkb]  .policy-chat-tip__label {
    overflow-wrap: anywhere;
}

.policy-chat-chart__plot[b-4lrfw3cwkb]  .policy-chat-tip__context {
    margin-top: 4px;
}

.policy-chat-chart__plot[b-4lrfw3cwkb]  .policy-chat-tip__details {
    border-top: 1px solid;
    column-gap: 10px;
    display: grid;
    grid-template-columns: auto auto;
    margin: 6px 0 0;
    padding-top: 6px;
    row-gap: 2px;
}

.policy-chat-chart__plot[b-4lrfw3cwkb]  .policy-chat-tip__details dt {
    margin: 0;
}

.policy-chat-chart__plot[b-4lrfw3cwkb]  .policy-chat-tip__details dd {
    font-variant-numeric: tabular-nums;
    margin: 0;
    text-align: right;
}

/* The fills pinned from MarkStyle's custom properties, above Dark Reader's own inline fills, so every mark of a series
   keeps one validated palette color whatever its size. Series are numbered from 1 by the library, marks from 0. */

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] :is(.apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-pie-area) {
    fill: var(--policy-chat-series-1) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="2"] :is(.apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-pie-area) {
    fill: var(--policy-chat-series-2) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="3"] :is(.apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-pie-area) {
    fill: var(--policy-chat-series-3) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="4"] :is(.apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-pie-area) {
    fill: var(--policy-chat-series-4) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="5"] :is(.apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-pie-area) {
    fill: var(--policy-chat-series-5) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="6"] :is(.apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-pie-area) {
    fill: var(--policy-chat-series-6) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="7"] :is(.apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-pie-area) {
    fill: var(--policy-chat-series-7) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="8"] :is(.apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-pie-area) {
    fill: var(--policy-chat-series-8) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="9"] :is(.apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-pie-area) {
    fill: var(--policy-chat-series-9) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="10"] :is(.apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-pie-area) {
    fill: var(--policy-chat-series-10) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="11"] :is(.apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-pie-area) {
    fill: var(--policy-chat-series-11) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="12"] :is(.apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-pie-area) {
    fill: var(--policy-chat-series-12) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="13"] :is(.apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-pie-area) {
    fill: var(--policy-chat-series-13) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="14"] :is(.apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-pie-area) {
    fill: var(--policy-chat-series-14) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="15"] :is(.apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-pie-area) {
    fill: var(--policy-chat-series-15) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="16"] :is(.apexcharts-bar-area, .apexcharts-rangebar-area, .apexcharts-pie-area) {
    fill: var(--policy-chat-series-16) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="0"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-0) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="1"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-1) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="2"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-2) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="3"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-3) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="4"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-4) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="5"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-5) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="6"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-6) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="7"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-7) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="8"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-8) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="9"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-9) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="10"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-10) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="11"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-11) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="12"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-12) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="13"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-13) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="14"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-14) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="15"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-15) !important;
}

.policy-chat-chart__plot--points[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] path[j="16"]:is(.apexcharts-bar-area, .apexcharts-rangebar-area) {
    fill: var(--policy-chat-point-16) !important;
}

.policy-chat-chart__plot--legend[b-4lrfw3cwkb]  .apexcharts-legend-series[rel="1"] path.apexcharts-legend-marker {
    fill: var(--policy-chat-legend-1) !important;
}

.policy-chat-chart__plot--legend[b-4lrfw3cwkb]  .apexcharts-legend-series[rel="2"] path.apexcharts-legend-marker {
    fill: var(--policy-chat-legend-2) !important;
}

.policy-chat-chart__plot--legend[b-4lrfw3cwkb]  .apexcharts-legend-series[rel="3"] path.apexcharts-legend-marker {
    fill: var(--policy-chat-legend-3) !important;
}

.policy-chat-chart__plot--legend[b-4lrfw3cwkb]  .apexcharts-legend-series[rel="4"] path.apexcharts-legend-marker {
    fill: var(--policy-chat-legend-4) !important;
}

.policy-chat-chart__plot--legend[b-4lrfw3cwkb]  .apexcharts-legend-series[rel="5"] path.apexcharts-legend-marker {
    fill: var(--policy-chat-legend-5) !important;
}

.policy-chat-chart__plot--legend[b-4lrfw3cwkb]  .apexcharts-legend-series[rel="6"] path.apexcharts-legend-marker {
    fill: var(--policy-chat-legend-6) !important;
}

.policy-chat-chart__plot--legend[b-4lrfw3cwkb]  .apexcharts-legend-series[rel="7"] path.apexcharts-legend-marker {
    fill: var(--policy-chat-legend-7) !important;
}

.policy-chat-chart__plot--legend[b-4lrfw3cwkb]  .apexcharts-legend-series[rel="8"] path.apexcharts-legend-marker {
    fill: var(--policy-chat-legend-8) !important;
}

.policy-chat-chart__plot--legend[b-4lrfw3cwkb]  .apexcharts-legend-series[rel="9"] path.apexcharts-legend-marker {
    fill: var(--policy-chat-legend-9) !important;
}

.policy-chat-chart__plot--legend[b-4lrfw3cwkb]  .apexcharts-legend-series[rel="10"] path.apexcharts-legend-marker {
    fill: var(--policy-chat-legend-10) !important;
}

.policy-chat-chart__plot--legend[b-4lrfw3cwkb]  .apexcharts-legend-series[rel="11"] path.apexcharts-legend-marker {
    fill: var(--policy-chat-legend-11) !important;
}

.policy-chat-chart__plot--legend[b-4lrfw3cwkb]  .apexcharts-legend-series[rel="12"] path.apexcharts-legend-marker {
    fill: var(--policy-chat-legend-12) !important;
}

.policy-chat-chart__plot--legend[b-4lrfw3cwkb]  .apexcharts-legend-series[rel="13"] path.apexcharts-legend-marker {
    fill: var(--policy-chat-legend-13) !important;
}

.policy-chat-chart__plot--legend[b-4lrfw3cwkb]  .apexcharts-legend-series[rel="14"] path.apexcharts-legend-marker {
    fill: var(--policy-chat-legend-14) !important;
}

.policy-chat-chart__plot--legend[b-4lrfw3cwkb]  .apexcharts-legend-series[rel="15"] path.apexcharts-legend-marker {
    fill: var(--policy-chat-legend-15) !important;
}

.policy-chat-chart__plot--legend[b-4lrfw3cwkb]  .apexcharts-legend-series[rel="16"] path.apexcharts-legend-marker {
    fill: var(--policy-chat-legend-16) !important;
}

/* A radial bar is drawn as a stroke, and its track as a faint stroke of the same green, so the unfilled part reads as
   the rest of one scale on either ground. */
.policy-chat-chart__plot[b-4lrfw3cwkb]  .apexcharts-radialbar-track .apexcharts-radialbar-area {
    stroke: #007F68 !important;
    stroke-opacity: 0.22;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="1"] .apexcharts-radialbar-area {
    stroke: var(--policy-chat-series-1) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="2"] .apexcharts-radialbar-area {
    stroke: var(--policy-chat-series-2) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="3"] .apexcharts-radialbar-area {
    stroke: var(--policy-chat-series-3) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="4"] .apexcharts-radialbar-area {
    stroke: var(--policy-chat-series-4) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="5"] .apexcharts-radialbar-area {
    stroke: var(--policy-chat-series-5) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="6"] .apexcharts-radialbar-area {
    stroke: var(--policy-chat-series-6) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="7"] .apexcharts-radialbar-area {
    stroke: var(--policy-chat-series-7) !important;
}

.policy-chat-chart__plot--pinned[b-4lrfw3cwkb]  .apexcharts-series[rel="8"] .apexcharts-radialbar-area {
    stroke: var(--policy-chat-series-8) !important;
}

/* Marks shaded by value, or drawn as lines and dots, have no one palette color to pin, so each keeps the color the
   library wrote on it, read back from its own attribute. Browsers without typed attr() leave these to Dark Reader. */
.policy-chat-chart__plot[b-4lrfw3cwkb]  :is(.apexcharts-heatmap-rect, .apexcharts-treemap-rect, .apexcharts-boxPlot-area, .apexcharts-marker, .apexcharts-area, .apexcharts-radar-series path) {
    fill: attr(fill type(<color>)) !important;
}

.policy-chat-chart__plot[b-4lrfw3cwkb]  :is(.apexcharts-line, .apexcharts-rangearea-area, .apexcharts-rangebar-goals-markers line) {
    stroke: attr(stroke type(<color>)) !important;
}
/* /Features/Policies/Chat/PolicyChatComponent.razor.rz.scp.css */
/* The dashboard's left column on the AgencyIQ tab. --agency-iq-panel-width is owned here so the
   resizer on its trailing edge can drive it; a percentage of the dashboard row keeps the split
   proportional across window resizes. The height is claimed so the transcript scrolls internally
   rather than growing the card: the results pane's own height plus the 48px tab strip above
   it (PolicyChatResultsPaneComponent.razor.css), so both columns end on the same line. */
.agency-iq[b-rscyz4qw7b] {
    --agency-iq-panel-width: 30%;

    align-items: stretch;
    display: flex;
    flex: 0 0 var(--agency-iq-panel-width);
    height: calc(100vh - 292px);
    min-height: 468px;
    min-width: 0;
}

/* A 12px hit area that is comfortable to grab. The results column's own border is the visible
   divider, so the handle draws nothing until it is hovered or focused. */
.agency-iq__resizer[b-rscyz4qw7b] {
    background: transparent;
    border: none;
    cursor: col-resize;
    flex: 0 0 12px;
    padding: 0;
}

.agency-iq__resizer:hover[b-rscyz4qw7b],
.agency-iq__resizer:focus-visible[b-rscyz4qw7b] {
    outline: none;
    background-image: linear-gradient(
        to right,
        transparent calc(50% - 2px),
        var(--mud-palette-primary, #00587d) calc(50% - 2px),
        var(--mud-palette-primary, #00587d) calc(50% + 2px),
        transparent calc(50% + 2px));
}

.agency-iq__panel[b-rscyz4qw7b] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* Matches the dashboard row's own stacking breakpoint (PolicyDashboardClassicComponent.razor.css):
   the conversation takes the full width above the results, so there is no edge left to drag. */
@media (max-width: 959.98px) {
    .agency-iq[b-rscyz4qw7b] {
        flex: 0 0 auto;
        height: 60vh;
        min-height: 420px;
        width: 100%;
    }

    .agency-iq__resizer[b-rscyz4qw7b] {
        display: none;
    }
}

/* ::deep because this class sits on a MudPaper, and CSS isolation stamps its scope attribute only
   onto elements written in this component's own markup — never onto a child component's rendered
   root. Without it the selector compiles to one that matches nothing, the surface stays a plain
   block that grows with the conversation, and every height rule inside it is meaningless.

   The height the transcript scrolls within is only as real as the chain above it: every ancestor
   between the shell and the transcript has to refuse to grow past its share, or the innermost
   overflow never engages. */
.agency-iq__panel[b-rscyz4qw7b]  .agency-iq__panel-surface {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.agency-iq__header[b-rscyz4qw7b] {
    align-items: center;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    padding: 8px 12px;
}

/* The only part of the panel that scrolls, so the header above it and the composer below it stay
   on screen however long the conversation runs. */
.agency-iq__transcript[b-rscyz4qw7b] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    /* The whole reason the composer stays on screen. A flex item defaults to min-height: auto, which
       refuses to shrink below its content, so without this the transcript grows to fit every turn
       and pushes the composer past the bottom of the panel instead of scrolling inside it. Same
       reasoning as the min-width above, on the axis this column actually grows along. */
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
}

/* ::deep for the same reason as the panel surface: this sits on a MudStack. Grows into the
   transcript's free space rather than taking its full height, so the starters beneath it stay on
   screen while the sentence still sits centred above them. */
.agency-iq__transcript[b-rscyz4qw7b]  .agency-iq__empty {
    color: var(--mud-palette-text-secondary);
    flex: 1 0 auto;
}

.agency-iq__transcript[b-rscyz4qw7b]  .agency-iq__starters {
    flex: 0 0 auto;
    padding-bottom: 8px;
}

.agency-iq__row[b-rscyz4qw7b] {
    display: flex;
}

/* Lined up with the assistant bubble the chips follow, not with the panel edge, so the offer reads
   as part of that turn. ::deep because the stack is a MudBlazor component and carries no scope
   attribute of its own, the same reason the empty state above needs it. */
.agency-iq__transcript[b-rscyz4qw7b]  .agency-iq__suggestions {
    margin-left: 8px;
}

.agency-iq__row--user[b-rscyz4qw7b] {
    justify-content: flex-end;
}

.agency-iq__row--assistant[b-rscyz4qw7b] {
    justify-content: flex-start;
}

/* Bubble and timestamp as one column so the time sits under the bubble's own edge — trailing for
   the reader's turns, leading for the assistant's — rather than under the full panel width. */
.agency-iq__turn[b-rscyz4qw7b] {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    min-width: 0;
}

.agency-iq__row--user .agency-iq__turn[b-rscyz4qw7b] {
    align-items: flex-end;
}

.agency-iq__row--assistant .agency-iq__turn[b-rscyz4qw7b] {
    align-items: flex-start;
}

.agency-iq__time[b-rscyz4qw7b] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.6875rem;
    line-height: 1.5;
    padding: 2px 4px 0;
}

/* The tail is positioned against this box, and --agency-iq-bubble-surface is the one value each
   variant sets: the bubble and its tail read it from the same place, so a new variant is a single
   declaration rather than a matching pair of colour rules. */
.agency-iq__bubble[b-rscyz4qw7b] {
    background-color: var(--agency-iq-bubble-surface);
    border-radius: 16px;
    font-size: 0.875rem;
    line-height: 1.43;
    max-width: 100%;
    padding: 8px 14px;
    position: relative;
    white-space: pre-wrap;
    word-break: break-word;
}

/* The tail hangs 8px past the bubble's own edge and sits in this margin, which keeps it inside the
   15% of the row that the turn's 85% max-width always leaves free. Letting it hang off the row into
   the transcript's padding instead would put it in the scrollable overflow area, and the transcript
   scrolls on both axes once overflow-y is set — a panel dragged down to its 20% minimum would grow
   a horizontal scrollbar. The timestamp takes the same offset so it still lines up with the
   bubble's edge rather than the tail's. */
.agency-iq__row--assistant .agency-iq__bubble[b-rscyz4qw7b] {
    border-bottom-left-radius: 0;
    margin-left: 8px;
}

.agency-iq__row--user .agency-iq__bubble[b-rscyz4qw7b] {
    border-bottom-right-radius: 0;
    margin-right: 8px;
}

.agency-iq__row--assistant .agency-iq__time[b-rscyz4qw7b] {
    margin-left: 8px;
}

.agency-iq__row--user .agency-iq__time[b-rscyz4qw7b] {
    margin-right: 8px;
}

/* Borders on a zero-sized box rather than an image or an inline SVG: the coloured border of a box
   with no content collapses to a triangle. Absolute rather than in flow so the pending bubble, which
   is a flex container, does not take the tail as a third flex item beside its dots. */
.agency-iq__bubble[b-rscyz4qw7b]::after {
    border-top: 10px solid transparent;
    bottom: 0;
    content: "";
    height: 0;
    position: absolute;
    width: 0;
}

.agency-iq__row--assistant .agency-iq__bubble[b-rscyz4qw7b]::after {
    border-right: 8px solid var(--agency-iq-bubble-surface);
    left: -8px;
}

.agency-iq__row--user .agency-iq__bubble[b-rscyz4qw7b]::after {
    border-left: 8px solid var(--agency-iq-bubble-surface);
    right: -8px;
}

/* Solid brand green: white on #007E69 clears the 4.5:1 body-text threshold, and a tint would put
   the reader's own turns on the same pale footing as the states that mean something went wrong. */
.agency-iq__bubble--user[b-rscyz4qw7b] {
    --agency-iq-bubble-surface: var(--mud-palette-primary, #007e69);

    color: var(--mud-palette-primary-text, #ffffff);
}

/* MudBlazor spells this token "gray"; "grey" resolves to nothing, which left the assistant's turns
   transparent against the panel's own MudPaper surface. */
.agency-iq__bubble--assistant[b-rscyz4qw7b] {
    --agency-iq-bubble-surface: var(--mud-palette-background-gray, #eeeeee);

    color: var(--mud-palette-text-primary, #424242);
}

/* A refusal or a failure is still an answer, so it keeps the assistant's side of the thread. Held to
   a wash of the error hue rather than the palette's own lighten step: a failed turn stays in the
   transcript for the rest of the conversation, and at that dwell time a saturated fill reads as the
   panel being broken rather than as one turn having failed. */
.agency-iq__bubble--error[b-rscyz4qw7b] {
    --agency-iq-bubble-surface: rgba(var(--mud-palette-error-rgb, 244, 67, 54), 0.12);

    color: var(--mud-palette-text-primary, #424242);
}

.agency-iq__bubble--notice[b-rscyz4qw7b] {
    --agency-iq-bubble-surface: rgba(var(--mud-palette-warning-rgb, 255, 152, 0), 0.16);

    color: var(--mud-palette-text-primary, #424242);
}

/* Shape, not tint, is what tells a failure from a notice for a reader who cannot see colour — the
   two washes are a few percent apart on the same lightness. Tail direction carries who spoke, so
   the assistant's ordinary turns need no glyph to be told from the reader's. */
.agency-iq__bubble--error[b-rscyz4qw7b]::before,
.agency-iq__bubble--notice[b-rscyz4qw7b]::before {
    font-size: 0.9375rem;
    margin-inline-end: 6px;
}

/* U+FE0E forces text presentation; without it several platforms substitute a colour emoji, which
   puts back the saturation the muted fill exists to remove. The glyph is the one place the error
   hue still appears at full strength, and it clears 3:1 against its own fill. */
.agency-iq__bubble--error[b-rscyz4qw7b]::before {
    color: var(--mud-palette-error-darken, #f21c0d);
    content: "\26A0\FE0E";
}

/* Left in the body ink: the warning hue does not reach 3:1 over its own fill at this size, and the
   glyph carries its meaning by shape in any case. */
.agency-iq__bubble--notice[b-rscyz4qw7b]::before {
    content: "\2139\FE0E";
}

/* Never shrinks: the transcript is the only part of the panel that gives up space, so the box the
   reader types into stays put however long the conversation runs. */
.agency-iq__composer[b-rscyz4qw7b] {
    align-items: flex-end;
    border-top: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    padding: 8px 12px;
}

/* The dense input control carries a 4px vertical margin, which left its bottom edge 4px above the
   button's in a flex-end row. Zeroed so both boxes end on the same line, however tall the reader
   drags the field. No helper text or counter is set, so the helper row is empty space too. */
.agency-iq__composer[b-rscyz4qw7b]  .agency-iq__prompt {
    margin: 0;
}

.agency-iq__composer[b-rscyz4qw7b]  .agency-iq__prompt .mud-input-control-helper-container {
    display: none;
}

/* Resized by hand rather than auto-grown, so a long question does not shove the transcript up
   under the reader while they type. The textarea is content-box, so one line of height plus the
   field's own padding is the floor; past eight lines it scrolls. */
.agency-iq__composer[b-rscyz4qw7b]  .agency-iq__prompt textarea {
    max-height: 8lh;
    min-height: 1lh;
    overflow-y: auto;
    resize: vertical;
}

.agency-iq__bubble--pending[b-rscyz4qw7b] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Its own line under the activity label, so the steps read as a list rather than as more label. */
.agency-iq__steps[b-rscyz4qw7b] {
    flex-basis: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.agency-iq__step[b-rscyz4qw7b] {
    align-items: center;
    color: var(--mud-palette-text-secondary);
    display: flex;
    font-size: 0.8125rem;
    gap: 6px;
}

.agency-iq__step--running[b-rscyz4qw7b] {
    color: var(--mud-palette-text-primary);
}

.agency-iq__step--failed[b-rscyz4qw7b] {
    color: var(--mud-palette-warning);
}

.agency-iq__activity[b-rscyz4qw7b] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.agency-iq__dots[b-rscyz4qw7b] {
    align-items: center;
    display: flex;
    gap: 4px;
}

.agency-iq__dots span[b-rscyz4qw7b] {
    animation: agency-iq-bounce-b-rscyz4qw7b 1.2s infinite ease-in-out;
    background-color: var(--mud-palette-text-secondary);
    border-radius: 50%;
    height: 5px;
    width: 5px;
}

/* Staggered so the row reads as one travelling wave rather than three dots in lockstep, which is
   what distinguishes "working" from "stuck mid-render". */
.agency-iq__dots span:nth-child(2)[b-rscyz4qw7b] {
    animation-delay: 150ms;
}

.agency-iq__dots span:nth-child(3)[b-rscyz4qw7b] {
    animation-delay: 300ms;
}

@keyframes agency-iq-bounce-b-rscyz4qw7b {
    0%, 60%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* A static row of dots beside the label still says "working" without the movement. */
@media (prefers-reduced-motion: reduce) {
    .agency-iq__dots span[b-rscyz4qw7b] {
        animation: none;
    }
}

/* An answer that brought back results can be selected to show them again; the one on screen is tinted. */
.agency-iq__bubble--selectable[b-rscyz4qw7b] {
    cursor: pointer;
}

.agency-iq__bubble--selectable:focus-visible[b-rscyz4qw7b] {
    outline: 2px solid var(--mud-palette-primary, #00587d);
    outline-offset: 2px;
}

/* The hint lives in the timestamp's slot rather than a tooltip so it appears where the eye already is, under the
   bubble's edge. :has() because the timestamp is not the bubble's adjacent sibling: a change note or report button
   can sit between them. */
.agency-iq__time-hint[b-rscyz4qw7b] {
    color: var(--mud-palette-primary);
    display: none;
}

.agency-iq__bubble--unavailable:focus-visible[b-rscyz4qw7b] {
    outline: 2px solid var(--mud-palette-text-secondary);
    outline-offset: 2px;
}

/* Muted rather than the primary color: it says why nothing happens, and invites nothing. */
.agency-iq__time-hint--unavailable[b-rscyz4qw7b] {
    color: var(--mud-palette-text-secondary);
}

.agency-iq__turn:has(:is(.agency-iq__bubble--selectable, .agency-iq__bubble--unavailable):is(:hover, :focus-visible)) .agency-iq__time-hint[b-rscyz4qw7b] {
    display: inline;
}

.agency-iq__turn:has(.agency-iq__time-hint):has(:is(.agency-iq__bubble--selectable, .agency-iq__bubble--unavailable):is(:hover, :focus-visible)) .agency-iq__time-clock[b-rscyz4qw7b] {
    display: none;
}

/* A tint through the shared surface token rather than a ring: the tail is drawn from that token, so
   it changes with the bubble, where a box-shadow ring traced only the rounded body and cut the tail off. */
.agency-iq__bubble--active[b-rscyz4qw7b] {
    --agency-iq-bubble-surface: rgba(var(--mud-palette-primary-rgb, 0, 126, 105), 0.14);
}

/* The inline answer card continues the reply above it: the same surface, a little apart, and wide enough for its
   tiles to sit side by side before they wrap. */
.agency-iq__bubble--card[b-rscyz4qw7b] {
    margin-top: 4px;
    min-width: min(100%, 280px);
}

.agency-iq__change[b-rscyz4qw7b] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    margin: 2px 8px 0;
}

.agency-iq__transcript[b-rscyz4qw7b]  .agency-iq__alternative {
    margin-left: 8px;
}
/* /Features/Policies/Chat/PolicyChatCriteriaBarComponent.razor.rz.scp.css */
/* One wrapping line above the result: chips, then the count, separated the way the words would be. */
.policy-chat-criteria[b-p67jhrts98] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.policy-chat-criteria__separator[b-p67jhrts98] {
    color: var(--mud-palette-text-secondary);
}
/* /Features/Policies/Chat/PolicyChatGridComponent.razor.rz.scp.css */
/* A stacked column is one cell: the bottom value on its own line, quieter than the top it belongs to. Its ink is
   MudBlazor's opaque secondary (mud-secondary-text) rather than the translucent secondary text color, which a dark-mode
   extension such as Dark Reader leaves nearly invisible. */
.policy-chat-stack[b-1plremmv43] {
    display: inline-flex;
    flex-direction: column;
}
/* /Features/Policies/Chat/PolicyChatResultsPaneComponent.razor.rz.scp.css */
/* The height is claimed so the results scroll internally rather than growing the tab; the
   conversation beside them (PolicyChatComponent.razor.css) claims this plus the tab strip above. */
.agency-iq__body[b-8bncm427l1] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 340px);
    min-height: 420px;
    min-width: 0;
    overflow-y: auto;
    /* A chart sizes itself to this width when it draws and does not narrow again when a vertical scrollbar then appears
       (a caveat or notice arriving after it), which left it a scrollbar's width too wide and put a horizontal scrollbar
       along the bottom. Holding the gutter keeps the width the same whether or not the scrollbar is showing. */
    scrollbar-gutter: stable;
    /* Separates the dashboard tabs from the first control below them (the chart/table toggle or
       a result's criteria), which otherwise touch. */
    padding-top: 16px;
}

/* Its own scroll container, so a wide projection scrolls sideways rather than widening the tab. */
.agency-iq__grid[b-8bncm427l1] {
    overflow-x: auto;
}

/* ::deep because this sits on a MudStack, whose rendered root carries no scope attribute. */
.agency-iq__body[b-8bncm427l1]  .agency-iq__placeholder {
    color: var(--mud-palette-text-secondary);
    height: 100%;
}

/* The criteria take the free width and wrap inside it; the export keeps its one-line label. */
.agency-iq__body[b-8bncm427l1]  .agency-iq__result-header > .policy-chat-criteria {
    flex: 1 1 auto;
    min-width: 0;
}

.agency-iq__body[b-8bncm427l1]  .agency-iq__export {
    flex-shrink: 0;
    white-space: nowrap;
}


/* The statement keeps its own line breaks and reads as code, so a long one wraps rather than widening the pane. */
.agency-iq__body[b-8bncm427l1]  .agency-iq__diagnostics-sql {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
/* /Features/Policies/Chat/PolicyChatScalarCardComponent.razor.rz.scp.css */
/* The card sits inside the assistant's reply, set apart from its sentence by a rule rather than a second box. */
.policy-chat-card[b-6iyuv3uvhg] {
    border-top: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
}

.policy-chat-card__headline[b-6iyuv3uvhg] {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.policy-chat-card__headline[b-6iyuv3uvhg]  .policy-chat-card__figure {
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.policy-chat-card__breakdown[b-6iyuv3uvhg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.policy-chat-bar[b-6iyuv3uvhg] {
    border-radius: 4px;
    display: flex;
    height: 8px;
    overflow: hidden;
}

.policy-chat-bar__legend[b-6iyuv3uvhg] {
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.75rem;
    gap: 4px 12px;
}

.policy-chat-bar__key[b-6iyuv3uvhg] {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}

.policy-chat-bar__key .policy-chat-bar__segment[b-6iyuv3uvhg] {
    border-radius: 2px;
    display: inline-block;
    height: 8px;
    width: 8px;
}

.policy-chat-bar__segment--0[b-6iyuv3uvhg] { background: var(--mud-palette-primary); }
.policy-chat-bar__segment--1[b-6iyuv3uvhg] { background: var(--mud-palette-secondary); }
.policy-chat-bar__segment--2[b-6iyuv3uvhg] { background: var(--mud-palette-tertiary); }
.policy-chat-bar__segment--3[b-6iyuv3uvhg] { background: var(--mud-palette-info); }
.policy-chat-bar__segment--4[b-6iyuv3uvhg] { background: var(--mud-palette-text-disabled); }

.policy-chat-card__actions[b-6iyuv3uvhg] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
/* /Features/Policies/Chat/PolicyChatTileComponent.razor.rz.scp.css */
.policy-chat-tile__label[b-xws9n3r2wv] {
    align-items: center;
    color: var(--mud-palette-text-secondary);
    display: flex;
    gap: 4px;
}
/* /Features/Policies/Chat/PolicyChatTilesComponent.razor.rz.scp.css */
/* Tiles share a row and wrap at narrow widths. A short figure's tile keeps the size it always had; a long value such
   as "4 status change month and state combinations" widens its tile to fit, since a min-width of fit-content outweighs
   the max-width, and fit-content is never more than the strip, so in a narrow pane the value wraps inside its tile
   rather than running past its border. The plain min-width is the fallback where fit-content is not understood.
   ::deep because each tile's root is a MudPaper, which this component's scope attribute never reaches. */
.policy-chat-tiles[b-jiyfsoypsj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.policy-chat-tiles[b-jiyfsoypsj]  .policy-chat-tile {
    box-sizing: border-box;
    flex: 1 1 120px;
    max-width: 220px;
    min-width: 110px;
    min-width: fit-content;
    padding: 8px 12px;
}

.policy-chat-tiles[b-jiyfsoypsj]  .policy-chat-tile__value {
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word;
}
/* /Features/Policies/Components/Dashboards/PolicyDashboardClassicComponent.razor.rz.scp.css */
/*
 * How tall the map itself is on this dashboard. Only the map: PolicyMapViewComponent runs in its
 * grow-with-content layout here (GrowsWithContent), so the panel, the totals footer and the crop and
 * plan breakdowns take their own heights under it and the PAGE scrolls to them. The earlier layout
 * gave the whole component one fixed height and scrolled inside it, which left a clipped list inside
 * a short box and a column of empty card under it whenever the filter sidebar beside the tab was the
 * taller of the two — and it usually is: the sidebar alone measures 925px.
 *
 * A custom property rather than a height on this wrapper, because the height belongs on a box inside
 * the child component (the map row, or the map alone once the panel stacks under it), and a scoped
 * rule here cannot reach that box. Custom properties inherit through component boundaries, so the
 * component reads this one where it needs it and falls back to a size of its own under another host.
 *
 * Sized so the breadcrumb, the map and the totals footer under it fit the first screen, with the
 * breakdowns below the fold. 491px is 333px above the tab panel and 158px of chrome and air:
 *   - 116px — the environment banner and the top app toolbar, to .mud-main-content's top
 *   - 64px  — the gap between the toolbar and the Policies card
 *   - 88px  — the Policies card's own header (title, experience switch, count, search box)
 *   - 16px  — the gap between the card header and the tab strip
 *   - 48px  — the tab strip itself (Policy Chart / Policies / Coverages / Map)
 *   - 48px  — the map's breadcrumb row
 *   - 42px  — the map's totals footer
 *   - 68px  — the card's own bottom padding (16px), the page footer (44px), and 8px of air
 * The 333 was measured live at the Map tab, from the TAB PANEL's getBoundingClientRect().top, and is
 * constant across viewport height (checked at 757px, 1107px and 1457px). If any of these change — a
 * taller header, a second toolbar row — remeasure. The filter chip row, when filters are applied,
 * pushes the map down rather than shrinking it; the page scrolls, which it does anyway.
 *
 * clamp() between a 32rem floor and a 40rem ceiling. The floor is for a short window, where
 * subtracting fixed chrome from a small viewport leaves less than a map worth reading; below it the
 * map keeps its 512px and runs past the fold, and the page scrolls to the rest. The ceiling
 * is for a tall one: past about 640px the map stops showing more and only shows it bigger, and on a
 * 1600px-tall window it ran past 1200px, pushing the totals and the breakdowns a whole screen down
 * for no gain. 40rem is the height that was judged right by eye on that window.
 */
.policy-dashboard-classic__map[b-3o40fb5nrq] {
    --policy-map-height: clamp(32rem, calc(100dvh - 491px), 40rem);
}

/*
 * The dashboard's only stacking breakpoint (MudBlazor's md, 960px), used by the AgencyIQ tab alone:
 * below it the conversation in the left column stacks above its results rather than squeezing them.
 * Every other tab keeps its fixed-width Filters column at every width, exactly as before.
 */
@media (max-width: 959.98px) {
    .policy-dashboard-classic__row--agency-iq[b-3o40fb5nrq] {
        flex-direction: column;
    }
}
/* /Features/Policies/Components/Dashboards/PolicyDashboardFilterChipsComponent.razor.rz.scp.css */
.policy-dashboard-chips[b-4hu6z5ufsz] {
    align-items: center;
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 0;
}

.policy-dashboard-chips__label[b-4hu6z5ufsz] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    margin-right: 4px;
}

.policy-dashboard-chips[b-4hu6z5ufsz]  .policy-dashboard-chips__clear {
    margin-left: auto;
}
/* /Features/Policies/Components/Dialogs/SavePolicyDashboardFilterDialog.razor.rz.scp.css */
.save-policy-dashboard-filter__criteria[b-iy5gqn1qpt] {
    margin-top: 20px;
}

.save-policy-dashboard-filter__scope[b-iy5gqn1qpt] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    margin-bottom: 8px;
}

.save-policy-dashboard-filter__empty[b-iy5gqn1qpt] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    font-style: italic;
}
/* /Features/Policies/Components/Notes/PolicyNoteListComponent.razor.rz.scp.css */
[b-vj8g1bazg9] .mud-table td {
    border: none;
    padding: 0;
    margin: 0;
    background: none;
}

[b-vj8g1bazg9] .mud-table {
    border: none;
    outline: none;
    box-shadow: none;
}
/* /Features/Policies/Components/Payments/PaymentsComponent.razor.rz.scp.css */

[b-0r9vbspu9r] .styled-table {
    width: 100%;
    border-collapse: collapse; 
}

[b-0r9vbspu9r] .styled-table th {
    padding: 10px;
    text-align: left;
    border: 1px solid black;
    font-weight: normal;
}


[b-0r9vbspu9r] .styled-table td {
    padding: 10px;
    text-align: right;
    border: 1px solid black;
}

[b-0r9vbspu9r] .styled-table tr {
    border-bottom: 1px solid black;
}
/* /Features/Policies/Components/PolicyDetails/LivestockGrossMarginTargetMarketingComponent.razor.rz.scp.css */
.lgm-target-marketing-table[b-jsm54hjt0f] {
    width: 100%;
    border-collapse: collapse;
}

.lgm-target-marketing-table td[b-jsm54hjt0f] {
    border-bottom: 1px solid #e8e8e8;
    text-align: left;
    background-color: #f9f9f9;
    font-weight: 500;
}

.lgm-target-marketing-table .lgm-month[b-jsm54hjt0f] {
    border-bottom: 1px solid #e8e8e8;
}

.lgm-target-marketing-table .lgm-text[b-jsm54hjt0f] {
    text-align: right;
    border-bottom: 1px solid #e8e8e8;
    font-weight: normal !important;
}

.lgm-target-marketing-table tr:nth-child(odd) td[b-jsm54hjt0f] {
    background-color: white;
}
/* /Features/Policies/Components/PolicyDetails/MPCICoverageDetailComponent.razor.rz.scp.css */
.aphTable[b-fsn657xsmd] {
    width: 100%;
    border-collapse: collapse;
}

.aphTable td[b-fsn657xsmd] {
    border-bottom: 1px solid #e8e8e8;
    text-align: left;
    background-color: #f9f9f9; 
    font-weight: 500;
}

.aphTable .aphCell[b-fsn657xsmd] {
    border-bottom: 1px solid #e8e8e8;
}

.aphTable .aphText[b-fsn657xsmd] {
    text-align: center;
    border-bottom: 1px solid #e8e8e8;
    font-weight: normal !important;
}

.aphTable tr:nth-child(odd) td[b-fsn657xsmd] {
    background-color: white;
}


/* /Features/Policies/Components/PolicyDetails/WholeFarmDetailComponent.razor.rz.scp.css */
.wfrp-table th[b-zicjklc13u] {
    font-weight: 500;
    font-size: 14px;
    border-top: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    text-align: left;
    background-color: #f9f9f9;
    padding: 6px 24px 6px 16px;
}

.wfrp-table[b-zicjklc13u] {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

.wfrp-table td[b-zicjklc13u] {
    font-size: 14px;
    border-top: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    text-align: left; 
    background-color: #f9f9f9;
    padding: 6px 24px 6px 16px;
}

.wfrp-table tr:nth-child(odd) td[b-zicjklc13u] {
    background-color: white;
}

.wfrp-table tr:nth-child(odd) th[b-zicjklc13u] {
    background-color: white;
}


.wfrp-table-2 th[b-zicjklc13u] {
    font-weight: 500;
    font-size: 14px;
    text-align: left;
    background-color: white;
    padding: 6px 24px 6px 16px;
}

#tax-year[b-zicjklc13u] {
    border-top: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}

#allowable-revenue[b-zicjklc13u] {
    border-top: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}

.wfrp-table-2[b-zicjklc13u] {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

.wfrp-table-2 td[b-zicjklc13u] {
    font-size: 14px;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    text-align: left;
    background-color: #f9f9f9; 
    padding: 6px 24px 6px 16px;
}

.wfrp-table-2 tr:nth-child(odd) td[b-zicjklc13u] {
    background-color: white;
}

.wfrp-table-2 tr:nth-child(odd) th[b-zicjklc13u] {
    background-color: white;
}
/* /Features/Policies/DashboardV2/Components/FilterGroups/PolicyDashboardV2LocationFilterGroupComponent.razor.rz.scp.css */
/* The county chips the map's picks land in. They keep the rail's own class names, because they are
   the rail's Location group — only the markup moved into a component of its own. */
.policy-dashboard-v2-rail__map-selection[b-tlovg3pkz2] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.policy-dashboard-v2-rail__map-selection-label[b-tlovg3pkz2] {
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.policy-dashboard-v2-rail__map-county-list[b-tlovg3pkz2] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.policy-dashboard-v2-rail__map-county-list[b-tlovg3pkz2]  .policy-dashboard-v2-rail__map-county {
    font-size: 12.5px;
}
/* /Features/Policies/DashboardV2/Components/PolicyDashboardV2FilterRailComponent.razor.rz.scp.css */
/*
 * The rail is a column with a scrolling body and a footer pinned to the bottom, so the
 * whole-result-set actions stay reachable however long the filter list gets.
 */
.policy-dashboard-v2-rail[b-1iexi5bv52] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* The rail's own title bar. It is the only part of the rail that does not scroll, so the control
   that puts the rail away stays reachable from anywhere in a long filter list. */
.policy-dashboard-v2-rail__header[b-1iexi5bv52] {
    align-items: center;
    display: flex;
    flex: none;
    gap: 8px;
    justify-content: space-between;
    padding: 4px 4px 4px 8px;
}

.policy-dashboard-v2-rail__header-actions[b-1iexi5bv52] {
    align-items: center;
    display: flex;
    gap: 2px;
}

.policy-dashboard-v2-rail__title[b-1iexi5bv52] {
    font-size: 1.25rem;
    font-weight: 500;
}

.policy-dashboard-v2-rail__body[b-1iexi5bv52] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 8px 16px;
}

/* Small caps section headings rather than dividers: they name what is below without spending a
   whole row on a line. */
.policy-dashboard-v2-rail__group-label[b-1iexi5bv52] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin: 28px 0 8px;
    text-transform: uppercase;
}

/* The first group already sits under the saved-filter divider, so it needs no gap of its own. */
.policy-dashboard-v2-rail__group-label:first-of-type[b-1iexi5bv52] {
    margin-top: 16px;
}

.policy-dashboard-v2-rail__more-chips[b-1iexi5bv52] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* The chips sit in one wrapping row and the groups they open stack below it, so each open group
   repeats its own name: with two or three of them open the border alone does not say which is
   which.

   ::deep because the block is a MudStack: CSS isolation stamps its scope attribute only on
   elements this component renders itself, never on a child component's root. */
.policy-dashboard-v2-rail[b-1iexi5bv52]  .policy-dashboard-v2-rail__group {
    border-left: 2px solid var(--mud-palette-lines-default);
    margin-top: 24px;
    padding-left: 8px;
}

/* Typed the same as the section headings above it: an open group is a section too, and reading as
   its own weight and case made the rail look like it had two kinds of heading. */
.policy-dashboard-v2-rail__group-name[b-1iexi5bv52] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.policy-dashboard-v2-rail__actions[b-1iexi5bv52] {
    border-top: 1px solid var(--mud-palette-lines-default);
    flex: none;
    padding: 12px 8px;
}

.policy-dashboard-v2-rail[b-1iexi5bv52]  .policy-dashboard-v2-rail__actions-hint {
    color: var(--mud-palette-text-secondary);
    display: block;
    margin-top: 8px;
}
/* /Features/Policies/DashboardV2/Components/PolicyDashboardV2PolicyTableComponent.razor.rz.scp.css */
/*
 * Only what is specific to this table. Owning the height its parent gives it — rows scrolling,
 * header and pager staying put — is the view slot's --table shape now, shared with the coverage
 * view, so those rules live in PolicyDashboardV2Component.razor.css.
 */
/* The class is on this component's own wrapper rather than on MudTable, so the scope attribute
   lands on it and every ::deep rule below has something to hang off. */
.policy-dashboard-v2-table[b-dittqf760v] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.policy-dashboard-v2-table[b-dittqf760v]  .policy-dashboard-v2-table__money-column,
.policy-dashboard-v2-table[b-dittqf760v]  .policy-dashboard-v2-table__actions-column {
    text-align: right;
}

/* County, state and type have columns of their own only while there is room for them. Below that
   they fold into the line under the contact, which is why the line is hidden up here. */
.policy-dashboard-v2-table[b-dittqf760v]  .policy-dashboard-v2-table__meta-line {
    display: none;
}

@media (max-width: 1280px) {
    .policy-dashboard-v2-table[b-dittqf760v]  .policy-dashboard-v2-table__meta-column {
        display: none;
    }

    .policy-dashboard-v2-table[b-dittqf760v]  .policy-dashboard-v2-table__meta-line {
        color: var(--mud-palette-text-secondary);
        display: block;
    }
}

/*
 * MudTable already turns each row into a stacked block at Breakpoint.Sm, so phone width is a restyle
 * of that layout rather than a second one: give each block card edges, drop the per-row checkbox
 * column that has nothing to align to, and leave room at the bottom for the docked selection bar.
 */
@media (max-width: 600px) {
    .policy-dashboard-v2-table[b-dittqf760v]  .mud-table-row {
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: var(--mud-default-borderradius);
        display: block;
        margin-bottom: 8px;
        padding: 8px;
    }

    .policy-dashboard-v2-table[b-dittqf760v]  .mud-table-container {
        padding-bottom: 72px;
    }

    .policy-dashboard-v2-table[b-dittqf760v]  .policy-dashboard-v2-table__money-column,
    .policy-dashboard-v2-table[b-dittqf760v]  .policy-dashboard-v2-table__actions-column {
        text-align: left;
    }
}

/*
 * The money column's header is a menu button rather than a label. Strip the button chrome that
 * would make it read as an action sitting in a row of column headers, and let it keep the header's
 * own type so it still looks like the heading it is.
 */
.policy-dashboard-v2-table[b-dittqf760v]  .policy-dashboard-v2-table__money-menu .mud-button-root {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    min-width: 0;
    padding: 0 0 0 8px;
    text-transform: none;
}
/* /Features/Policies/DashboardV2/Components/PolicyDashboardV2ToolbarComponent.razor.rz.scp.css */
/*
 * The view switcher and the bulk actions share this row rather than stacking, so acting on a
 * selection never moves the table under the pointer.
 */
.policy-dashboard-v2-toolbar[b-5yiy7qaaqw] {
    flex: none;
    min-height: 48px;
}

.policy-dashboard-v2-toolbar__views[b-5yiy7qaaqw],
.policy-dashboard-v2-toolbar__selection[b-5yiy7qaaqw] {
    align-items: center;
    display: flex;
    gap: 8px;
    min-height: 48px;
}

.policy-dashboard-v2-toolbar__selection[b-5yiy7qaaqw] {
    background-color: var(--mud-palette-primary-hover);
    border-radius: var(--mud-default-borderradius);
    padding: 0 8px;
}

/* Above 1280px the rail can be docked, so the toggle is the control and the drawer button is not
   rendered at all. Below it the rail cannot be docked, so the two swap. */
.policy-dashboard-v2-toolbar[b-5yiy7qaaqw]  .policy-dashboard-v2-toolbar__filters-button {
    display: none;
}

.policy-dashboard-v2-toolbar[b-5yiy7qaaqw]  .policy-dashboard-v2-toolbar__filters-toggle {
    display: inline-flex;
    flex: none;
}

@media (max-width: 1280px) {
    .policy-dashboard-v2-toolbar[b-5yiy7qaaqw]  .policy-dashboard-v2-toolbar__filters-button {
        display: inline-flex;
    }

    .policy-dashboard-v2-toolbar[b-5yiy7qaaqw]  .policy-dashboard-v2-toolbar__filters-toggle {
        display: none;
    }
}

/*
 * Plain buttons underlined on the selected one, rather than MudTabs: this strip only says which view
 * is showing, while the page decides what to render from the selected view in state. MudTabs would
 * also own the panels, and its active index is resolved against the order its panels were created
 * in, which is what makes the current dashboard's tabs fragile.
 */
.policy-dashboard-v2-toolbar__tabs[b-5yiy7qaaqw] {
    align-items: stretch;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex: 1;
    gap: 4px;
}

.policy-dashboard-v2-toolbar__tab[b-5yiy7qaaqw] {
    align-items: center;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 6px;
    padding: 10px 16px;
}

.policy-dashboard-v2-toolbar__tab:hover[b-5yiy7qaaqw] {
    background-color: var(--mud-palette-action-default-hover);
}

.policy-dashboard-v2-toolbar__tab--selected[b-5yiy7qaaqw] {
    border-bottom-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    font-weight: 500;
}

@media (max-width: 600px) {
    .policy-dashboard-v2-toolbar__views[b-5yiy7qaaqw] {
        flex-wrap: wrap;
    }

    .policy-dashboard-v2-toolbar__tab[b-5yiy7qaaqw] {
        padding: 10px 8px;
    }

    /* At phone width the bulk actions are docked to the bottom of the viewport, where a thumb
       reaches them, rather than left at the top of a table that has become a list of cards. */
    .policy-dashboard-v2-toolbar__selection[b-5yiy7qaaqw] {
        border-radius: 0;
        bottom: 0;
        box-shadow: var(--mud-elevation-8);
        left: 0;
        padding: 8px;
        position: fixed;
        right: 0;
        z-index: var(--mud-zindex-appbar);
    }

    .policy-dashboard-v2-toolbar[b-5yiy7qaaqw]  .policy-dashboard-v2-toolbar__bulk-actions {
        margin-left: auto;
    }
}
/* /Features/Policies/DashboardV2/PolicyDashboardV2Component.razor.rz.scp.css */
/*
 * The V2 dashboard is sized to the viewport rather than to its contents, so the table scrolls
 * inside the card instead of the page scrolling around it. Every rule below exists to carry that
 * height down from the page to the table: each level is a flex column, and each level that should
 * scroll gets min-height: 0 so it can shrink below its content instead of pushing the card open.
 */
.policy-dashboard-v2[b-jlyb61dyes] {
    /* The app bar and the card's own padding sit above the table; the rest of the viewport is the
       card. Held in one place so the whole chain can be retuned from here. */
    --policy-dashboard-v2-chrome: 150px;

    /* DefaultLayout pins #footer to the bottom of #page-container with position: absolute and a
       height of 75px, and reserves the same 75px on #content-wrap. Sizing against the viewport
       rather than against #content-wrap means that reservation does not reach us, so it is taken
       off here — without it the card runs under the footer and the pager is cut off the bottom. */
    --policy-dashboard-v2-footer: 75px;
    --policy-dashboard-v2-rail-width: 264px;

    display: flex;
    flex-direction: column;
    height: calc(
        100dvh - var(--policy-dashboard-v2-chrome) - var(--policy-dashboard-v2-footer));
    padding: 0 16px;
}

.policy-dashboard-v2[b-jlyb61dyes]  .mud-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.policy-dashboard-v2[b-jlyb61dyes]  .mud-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

/* Reads as part of the title rather than as a control parked beside it: no box, no width of its
   own, and the year itself set close to the h5 it follows. The label above it is the quiet half. */
/* One line of text rather than a flex row: the three sizes have to sit on a shared baseline, and a
   flex container aligns boxes, not the type inside them. Left as inline content, the menu's button
   is an inline-flex box whose baseline is the year inside it, so the phrase sets itself. */
.policy-dashboard-v2__year-field[b-jlyb61dyes] {
    flex: none;
    margin-left: 8px;
    white-space: nowrap;
}

.policy-dashboard-v2__year-label[b-jlyb61dyes] {
    font-size: 1rem;
    line-height: 1;
    opacity: 0.8;
}

/* The button inside as well as the menu around it: MudButton sets its own font-size, so a size set
   on the menu alone never reaches the year. */
.policy-dashboard-v2[b-jlyb61dyes]  .policy-dashboard-v2__year,
.policy-dashboard-v2[b-jlyb61dyes]  .policy-dashboard-v2__year .mud-button-root {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
}

.policy-dashboard-v2[b-jlyb61dyes]  .policy-dashboard-v2__year {
    display: inline-flex;
    vertical-align: baseline;
}

.policy-dashboard-v2[b-jlyb61dyes]  .policy-dashboard-v2__year .mud-button-root {
    min-width: 0;
    padding: 0 4px;
}

/* MudBlazor spaces an end icon 8px off the label, which on a four-digit word reads as a gap rather
   than as the caret belonging to it. */
.policy-dashboard-v2[b-jlyb61dyes]  .policy-dashboard-v2__year .mud-button-icon-end {
    margin-inline-start: 0;
    margin-left: 0;
}

.policy-dashboard-v2[b-jlyb61dyes]  .policy-dashboard-v2__count {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

/* This class is set on a MudTextField, so it only ever appears on markup this component did not
   emit. Blazor stamps the scope attribute on our own elements only, which is what ::deep is for. */
.policy-dashboard-v2[b-jlyb61dyes]  .policy-dashboard-v2__search {
    width: 400px;
}

.policy-dashboard-v2__body[b-jlyb61dyes] {
    display: flex;
    flex: 1;
    gap: 12px;
    min-height: 0;
}

.policy-dashboard-v2__rail[b-jlyb61dyes] {
    border-right: 1px solid var(--mud-palette-lines-default);
    flex: none;
    min-height: 0;
    padding-right: 4px;
    width: var(--policy-dashboard-v2-rail-width);
}

.policy-dashboard-v2__main[b-jlyb61dyes] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

/*
 * The view slot. Everything below is the contract every view gets by being dropped in here, so a
 * view needs no styling of its own to sit correctly in the card — which matters because two of them
 * are the tabbed dashboard's components and have none.
 *
 * The slot itself hands a view a box it can fill and shrink inside, and that it can never push
 * wider than the card: min-width: 0 is what stops a wide chart or a wide table from forcing the
 * whole layout sideways, because a flex item's default min-width: auto refuses to go below its
 * content.
 */
.policy-dashboard-v2__view[b-jlyb61dyes] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.policy-dashboard-v2__view > *[b-jlyb61dyes] {
    flex: 1;
    min-height: 0;
    min-width: 0;
}

/*
 * A view that is one table: the table owns the height, so its rows scroll and its header and pager
 * stay put. Hoisted here from the policy table's own stylesheet, which is where these rules started
 * — the coverage view needs exactly the same thing and had no stylesheet to put them in.
 */

/* The view's own root as well as the table inside it: the coverage view's root is a MudItem, which
   is display: block, and a block parent makes flex: 1 on the table below it mean nothing. */
.policy-dashboard-v2__view--table > *[b-jlyb61dyes] {
    display: flex;
    flex-direction: column;
}

.policy-dashboard-v2__view--table[b-jlyb61dyes]  .mud-table {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.policy-dashboard-v2__view--table[b-jlyb61dyes]  .mud-table-container {
    flex: 1;
    min-height: 0;
}

.policy-dashboard-v2__view--table[b-jlyb61dyes]  .mud-table-pagination {
    border-top: 1px solid var(--mud-palette-lines-default);
    flex: none;
}

/*
 * A view that is taller than the slot by nature — the chart stacks its own table underneath itself —
 * so the whole view scrolls rather than any one part of it claiming the leftover height.
 */
.policy-dashboard-v2__view--scroll[b-jlyb61dyes] {
    overflow: auto;
}

.policy-dashboard-v2__view--scroll > *[b-jlyb61dyes] {
    flex: none;
}

.policy-dashboard-v2[b-jlyb61dyes]  .policy-dashboard-v2__drawer {
    width: 320px;
}

/* Below this width there is no room to dock the rail beside the table, so the filters are only
   reachable from the drawer. The toolbar's Filters button is shown from the same breakpoint. */
@media (max-width: 1280px) {
    .policy-dashboard-v2__rail[b-jlyb61dyes] {
        display: none;
    }
}

@media (max-width: 600px) {
    .policy-dashboard-v2[b-jlyb61dyes] {
        --policy-dashboard-v2-chrome: 120px;

        padding: 0 8px;
    }

    .policy-dashboard-v2[b-jlyb61dyes]  .policy-dashboard-v2__search {
        width: 100%;
    }

    .policy-dashboard-v2[b-jlyb61dyes]  .policy-dashboard-v2__header-actions {
        flex-wrap: wrap;
    }

    .policy-dashboard-v2[b-jlyb61dyes]  .policy-dashboard-v2__drawer {
        width: 100%;
    }
}
/* /Features/Policies/Map/Components/PolicyMapBreakdownTableComponent.razor.rz.scp.css */
/*
 * position: relative so the refresh bar below can sit on this box's own top edge rather than on the
 * map's.
 */
.policy-map-breakdown[b-vo4p24h1gk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    position: relative;
}

.policy-map-breakdown__header[b-vo4p24h1gk] {
    align-items: baseline;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 4px 0;
}

.policy-map-breakdown__title[b-vo4p24h1gk] {
    font-size: 13px;
    font-weight: 600;
}

/*
 * Two classes rather than one, so this still wins against the button reset below — both classes
 * land on the same element, and a single-class rule earlier in the file would lose its colour to
 * it.
 */
.policy-map-breakdown__measure.policy-map-breakdown__measure[b-vo4p24h1gk] {
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
}

/* A column name that is also the control that orders by it, so it carries no button chrome. */
.policy-map-breakdown__sort[b-vo4p24h1gk] {
    align-items: center;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 2px;
    padding: 0;
}

.policy-map-breakdown__sort:hover[b-vo4p24h1gk] {
    color: var(--mud-palette-text-primary);
}

.policy-map-breakdown__sort:focus-visible[b-vo4p24h1gk] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.policy-map-breakdown__progress[b-vo4p24h1gk] {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.policy-map-breakdown__note[b-vo4p24h1gk] {
    align-items: center;
    color: var(--mud-palette-text-secondary);
    display: flex;
    font-size: 12px;
    gap: 8px;
    padding: 6px 0;
}

/*
 * A button, so the keyboard and a screen reader reach it — but it carries no button chrome: this is
 * a row of a table that happens to filter, and a wall of outlined buttons under the map would read
 * as a toolbar.
 */
.policy-map-breakdown__row[b-vo4p24h1gk] {
    background: none;
    border: none;
    /* The same rule the selection panel puts under its counties, so both lists are read the same
       way: one row across to its figure. */
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 13px;
    gap: 10px;
    justify-content: space-between;
    padding: 3px 6px;
    text-align: left;
    width: 100%;
}

.policy-map-breakdown__row:hover[b-vo4p24h1gk] {
    background: var(--mud-palette-action-default-hover);
}

.policy-map-breakdown__row:focus-visible[b-vo4p24h1gk] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/*
 * The row the dashboard is currently filtered to. Marked rather than merely remembered, because a
 * second click on it takes the filter back off and nothing else on screen says which row that is.
 */
.policy-map-breakdown__row--selected[b-vo4p24h1gk] {
    background: var(--mud-palette-action-default-selected);
    font-weight: 600;
}

/* Long commodity and plan names wrap; the number beside them must not. */
.policy-map-breakdown__row-name[b-vo4p24h1gk] {
    min-width: 0;
}

.policy-map-breakdown__row-value[b-vo4p24h1gk] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* One state and its rows. The gap between groups belongs to the list, not to the rows inside. */
.policy-map-breakdown__group[b-vo4p24h1gk] {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}

/*
 * Banded and bold, the same way the area panel heads a state's counties: the total belongs to the
 * rows under it rather than being the largest of them.
 */
.policy-map-breakdown__state-row[b-vo4p24h1gk] {
    background: var(--mud-palette-background-grey);
    display: flex;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    gap: 10px;
    justify-content: space-between;
    padding: 4px 6px;
}

.policy-map-breakdown__state-name[b-vo4p24h1gk] {
    min-width: 0;
}
/* /Features/Policies/Map/Components/PolicyMapSelectionPanelComponent.razor.rz.scp.css */
/*
 * Three bands, not one scroll: the column header and the totals stay put while only the list between
 * them moves. The header used to be sticky inside a scrolling panel, which stopped holding the
 * moment .policy-map itself became the scrollport — a sticky box anchors to the nearest one, so the
 * rows ran over the header instead of under it. A header outside the scrolling box cannot be
 * crossed by anything, whatever scrolls around it.
 */
.policy-map-panel[b-a2ln31yngz] {
    border-left: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    width: 260px;
}

/*
 * Collapsed, the panel is a rail against the map rather than nothing at all: what is gone is the
 * 260px of list, what stays is the 28px that says the list is there and opens it again. Its own
 * width is deliberately not a custom property — PolicyMapViewComponent.razor.css needs the STACKED
 * height, which is the block at the bottom of this file, and nothing out there is sized from this.
 */
.policy-map-panel--collapsed[b-a2ln31yngz] {
    width: 28px;
}

/*
 * The rail is the button, edge to edge, so the whole strip is the target rather than an icon inside
 * it. Vertical text under the chevron, reading bottom-to-top the way a sidebar label does.
 */
.policy-map-panel__expand[b-a2ln31yngz] {
    align-items: center;
    background: none;
    border: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    font: inherit;
    gap: 6px;
    padding: 8px 0;
    width: 100%;
}

.policy-map-panel__expand:hover[b-a2ln31yngz] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.policy-map-panel__expand:focus-visible[b-a2ln31yngz] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/*
 * Vertical so a 28px rail can carry a word at all. Upright rather than sideways-down: the chevron
 * above it points at the map, and a label reading away from that point reads as a different control.
 */
.policy-map-panel__rail-label[b-a2ln31yngz] {
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

/* The collapse control on the open panel's own header, at the end of the columns it heads. */
.policy-map-panel__collapse[b-a2ln31yngz] {
    align-items: center;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    margin-left: 6px;
    padding: 0;
}

.policy-map-panel__collapse:hover[b-a2ln31yngz] {
    color: var(--mud-palette-text-primary);
}

.policy-map-panel__collapse:focus-visible[b-a2ln31yngz] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.policy-map-panel__list[b-a2ln31yngz] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 14px 14px;
}

/* A list of states alone, which run against each other the way a state's counties do. */
.policy-map-panel__list--states[b-a2ln31yngz] {
    gap: 0;
}

.policy-map-panel__empty[b-a2ln31yngz] {
    padding: 14px;
}

/*
 * A button that carries no button chrome, the same as the breakdown rows under the map: a row of a
 * list that happens to filter, not a toolbar.
 */
.policy-map-panel__county[b-a2ln31yngz] {
    background: none;
    border: none;
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    justify-content: space-between;
    text-align: left;
    width: 100%;
}

.policy-map-panel__county:hover[b-a2ln31yngz] {
    background: var(--mud-palette-action-default-hover);
}

.policy-map-panel__county:focus-visible[b-a2ln31yngz] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* A picked county, which a second click takes back off. */
.policy-map-panel__county--picked[b-a2ln31yngz] {
    background: var(--mud-palette-action-default-selected);
    font-weight: 600;
}

/*
 * The panel's own column header: outside the scrolling list below it, so it always names the columns
 * the reader is looking at and nothing can ever be drawn across it.
 */
.policy-map-panel__columns[b-a2ln31yngz] {
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex: none;
    font-size: 11px;
    justify-content: space-between;
    letter-spacing: 0.4px;
    padding: 12px 14px 8px;
    text-transform: uppercase;
}

/* A column name that is also the control that orders by it, so it carries no button chrome. */
.policy-map-panel__sort[b-a2ln31yngz] {
    align-items: center;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 2px;
    letter-spacing: inherit;
    padding: 0;
    text-transform: inherit;
}

.policy-map-panel__sort:hover[b-a2ln31yngz] {
    color: var(--mud-palette-text-primary);
}

.policy-map-panel__sort:focus-visible[b-a2ln31yngz] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* The group's own rows sit against each other; the 14px gap belongs between groups. */
.policy-map-panel__state[b-a2ln31yngz] {
    display: flex;
    flex-direction: column;
}

/*
 * Banded and bold, so a state total reads as the heading of the counties beneath it rather than as
 * the largest of them.
 */
.policy-map-panel__state-row[b-a2ln31yngz] {
    background: var(--mud-palette-background-grey);
    display: flex;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    gap: 10px;
    justify-content: space-between;
    padding: 4px 6px;
}

.policy-map-panel__state-name[b-a2ln31yngz] {
    min-width: 0;
}

/*
 * A state row over the whole country, where it heads nothing: it is one row of a list of states and
 * the way into one of them, so it drops the band and reads like a county row does — a button with no
 * button chrome and a rule beneath it.
 */
.policy-map-panel__state-row--drill[b-a2ln31yngz] {
    background: none;
    border: none;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    text-align: left;
    width: 100%;
}

.policy-map-panel__state-row--drill:hover[b-a2ln31yngz] {
    background: var(--mud-palette-action-default-hover);
}

.policy-map-panel__state-row--drill:focus-visible[b-a2ln31yngz] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/*
 * A rule under each county rather than around the group: the eye follows one row across 260px to
 * its figure, and that is the line it needs.
 */
.policy-map-panel__county[b-a2ln31yngz] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    gap: 10px;
    padding: 4px 6px;
}

/*
 * Under the map rather than beside it. The height is its own here: stacked, nothing above hands this
 * box one, and a panel sized by its list would push the map off the top of a short window. 18rem
 * keeps a state and several of its counties visible, and the list inside goes on scrolling under the
 * header the way it does at full width.
 *
 * --policy-map-panel-stacked rather than the number, because PolicyMapViewComponent.razor.css has to
 * know it too: this panel is inside .policy-map__body, and the height that block gives the body is
 * the map's share of the fold PLUS this, so the panel lands under the fold instead of taking its
 * height out of the map. Declared on .policy-map there and inherited down to here, so the two
 * cannot drift apart — a number changed in one file alone would quietly resize the map instead.
 */
@media (max-width: 1280px) {
    .policy-map-panel[b-a2ln31yngz] {
        border-left: none;
        border-top: 1px solid var(--mud-palette-lines-default);
        flex: none;
        height: var(--policy-map-panel-stacked, 18rem);
        width: 100%;
    }

    /*
     * Stacked, the rail is a bar under the map rather than a strip beside it, so it takes the width
     * and gives up the height. 2rem is what PolicyMapViewComponent.razor.css reserves for it in that
     * layout, under .policy-map--panel-collapsed — a number changed in one file alone would leave
     * the bar overlapping the breakdowns or a band of empty card above them.
     */
    .policy-map-panel--collapsed[b-a2ln31yngz] {
        height: 2rem;
    }

    .policy-map-panel__expand[b-a2ln31yngz] {
        flex-direction: row;
        gap: 8px;
        justify-content: center;
        padding: 0;
    }

    .policy-map-panel__rail-label[b-a2ln31yngz] {
        writing-mode: horizontal-tb;
    }
}
/* /Features/Policies/Map/PolicyMapViewComponent.razor.rz.scp.css */
/*
 * height: 100% is the component's whole contract with a host that supplies a definite height.
 * PolicyDashboardV2Component.razor.css's .policy-dashboard-v2__view does that, deliberately, sized
 * from V2's own calc(100dvh - chrome - footer) chain, which gives the map and the selection panel
 * beside it an even, PROPORTIONED height. The classic dashboard does not use this contract: it runs
 * the grow-with-content layout at the bottom of this file (.policy-map--grows), where the map has a
 * height of its own and the page, not this component, scrolls.
 *
 * min-height: 8rem below is NOT a substitute for that — it is a last-resort guard for a host that
 * supplies no height contract at all, present or future (a dialog, a drawer, whatever comes next),
 * where the alternative is a collapse, not a lopsided-but-usable map. A host that has a real home
 * for this component should give it a definite height the way the two above do; skipping that and
 * relying on this floor alone is what produces the next paragraph's numbers, not a working layout.
 *
 * 8rem (128px) rather than something taller and more obviously "a map": it has to stay under what a
 * SIZED host gives at its own shortest realistic size, or the floor would force this open past a
 * slot that already fits it, which is the overflow a min-height here is not allowed to cause.
 * Measured live in the browser: PolicyDashboardV2Component's own view slot comes to 150.68px at an
 * 800x600 viewport, its shortest reasonably-tested size. 8rem leaves real margin under that number
 * rather than crowding it, because the 800x600 measurement is one data point, not a guarantee of
 * every screen this ships to.
 *
 * This floor alone is not enough to be a layout strategy, and measuring live is what caught it: when
 * height: 100% resolves to auto (no host height), .policy-map's own height becomes whatever its
 * tallest content needs — most often .policy-map-panel's county list, which can run to hundreds of
 * pixels — and CSS flexbox does not reliably stretch a sibling (.policy-map__map, the canvas side)
 * to match once an ANCESTOR's own height came from content-sizing rather than from a definite value.
 * Measured live: with a live county list and no host contract, .policy-map settled at 720px and
 * .policy-map-panel at 610px, both driven by the list's content, while .policy-map__map — right
 * beside the panel, meant to be the same height — stayed at 20px. Stretch across an auto-height
 * ancestor is not reliable enough to depend on here, which is exactly why the two hosts above give
 * this component a real height instead of leaning on this floor to do that job.
 *
 * The floor this component needs for the collapse case, then, is not one number at the top but one
 * at every level a child could otherwise be squeezed to nothing at — see .policy-map__canvas below,
 * which is where the actual guard against collapse lives. A child's own min-height is a hard floor
 * on that box regardless of how its ancestors settled on a height, which is the opposite, far more
 * reliable direction from the parent-stretches-child dependency that just failed.
 *
 * overflow-y: auto because this component is now taller than the map alone — the breakdown tables
 * sit under the footer, and a short host does not always have room for both. The column then
 * scrolls inside the host rather than either overflowing it or squeezing the map below
 * .policy-map__body's floor.
 *
 * scrollbar-gutter: stable because the canvas is watched by a ResizeObserver that refits the
 * projection — and reframes it, unless the user has panned or zoomed — on any change to its box. A
 * scrollbar that appears and disappears as this column's content grows takes its width out of the
 * map beside it, which the observer reads as a resize: the map then reframes itself repeatedly and
 * throws away the view the user was picking counties in. The gutter is reserved whether or not the
 * bar is there, so the map's width cannot move for this reason at all.
 */
.policy-map[b-xmuheb8dge] {
    --policy-map-panel-stacked: 18rem;

    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 8rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/*
 * min-height rather than height: the row carries a dense MudSelect, which is taller than a line of
 * text, and a fixed 38px let its outline cross the bottom border.
 */
.policy-map__breadcrumb[b-xmuheb8dge] {
    align-items: center;
    background: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 48px;
    padding: 4px 14px;
}

/*
 * Narrow enough and the row runs out of width. It then breaks between controls and takes a second
 * line, rather than shrinking each control until its label wraps mid-phrase inside a 40px button.
 */
.policy-map__breadcrumb > *[b-xmuheb8dge],
.policy-map__breadcrumb[b-xmuheb8dge]  .mud-button-label {
    white-space: nowrap;
}

.policy-map__crumb-current[b-xmuheb8dge] {
    font-size: 13px;
    font-weight: 500;
}

.policy-map__hint[b-xmuheb8dge] {
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
}

.policy-map__selection-count[b-xmuheb8dge] {
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.policy-map__separator[b-xmuheb8dge] {
    color: var(--mud-palette-text-disabled);
}

/*
 * min-height: 18rem rather than 0 now that the breakdown tables share this column. Without it the
 * tables are content-sized and the map is not, so every row they gain comes straight off the map,
 * down to its 2.5rem canvas floor. This is the floor that keeps the map worth looking at — three
 * thousand counties in less than this and the shading is a smear — and .policy-map scrolls when the
 * host cannot hold both. Above the floor the map takes every pixel the chrome and the tables leave,
 * which on both hosts is the viewport's own height.
 */
.policy-map__body[b-xmuheb8dge] {
    display: flex;
    flex: 1 1 auto;
    min-height: 18rem;
}

/*
 * Wraps ONLY the canvas — never anything Blazor-rendered inside it, since the JS module owns that
 * element's children via replaceChildren. The zoom buttons and the legend position against THIS
 * box instead of against __body, so they land on the map's own corners regardless of __body's
 * other children (the selection panel) or its flex-direction at a narrow width.
 */
.policy-map__map[b-xmuheb8dge] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

/*
 * BELOW .policy-map__map's own rule, not above it. A media query adds no specificity, so the two
 * blocks tie on it and source order alone decides — and written above, every declaration in here
 * that the base rule also sets quietly lost to it, which left the map a shrinkable item with no
 * floor but the canvas's 2.5rem: a 40px strip under a full-height panel, with the legend covering
 * all of it, and the fix for that sitting in the file the whole time.
 *
 * Stacked, the body has to carry a height of its own. Side by side its height is the row's and both
 * children fill it; in a column each child is sized by its own content, and .policy-map__map's
 * content is a canvas the JS module paints into — which measures whatever box it is handed and is
 * content with 40px of it. flex: none rather than 1 1 auto because what is left of .policy-map after
 * the breakdowns is not the height this needs; the height below is.
 *
 * That height is measured against .policy-map — THIS component's scrollport, whose own height is a
 * host's contract — and not against the viewport, which is the distinction the first attempt at this
 * block got wrong. 60dvh is not 60% of the box the map is seen through: classic hands this component
 * calc(100dvh - 273px), so at a 757px window the scrollport was 484px and 60dvh of map was 454px of
 * it. Add the breadcrumb and the map ran 19px past the fold, taking the zoom buttons and the legend
 * anchored to its bottom edge with it — the fit-to-results button, last in the stack, was cut in
 * half. Every shorter window made that worse, because the subtracted 273px is a constant and 60dvh
 * is not. A percentage of the scrollport cannot drift that way at any height.
 *
 * 7rem of it is spoken for: the breadcrumb's 48px, and 64px of the panel below the map left in view.
 * The peek is not decoration. countymap.js takes the wheel (non-passive, preventDefault) to zoom the
 * map, so a map filling the fold edge to edge leaves the pointer nowhere to be to scroll this column
 * at all — that is a Map tab whose breakdown tables cannot be reached, which is what filling it did.
 * 64px shows the panel's column header and the top of its list: somewhere to scroll from, and the
 * sight of something below to scroll to. It also absorbs a breadcrumb that has wrapped to two lines
 * without putting the map's own chrome under the fold again.
 *
 * Then + the panel's height, because the panel is inside this box and belongs below the fold rather
 * than inside it. The floor is the map's own 20rem plus the same, so a short window shrinks the peek
 * and then stops rather than letting the two overlap the footer.
 */
@media (max-width: 1280px) {
    .policy-map__body[b-xmuheb8dge] {
        flex: none;
        flex-direction: column;
        height: calc(100% - 7rem + var(--policy-map-panel-stacked));
        min-height: calc(20rem + var(--policy-map-panel-stacked));
    }

    .policy-map__map[b-xmuheb8dge] {
        min-height: 20rem;
    }
}

/*
 * min-height here, not just on .policy-map above, is the actual fix for a host with no height of
 * its own: a child's min-height holds regardless of how its ancestors arrived at their own height,
 * which stretching down from .policy-map does not (see the comment there). This forces .policy-map,
 * .policy-map__body and .policy-map__map to all be at least this tall too, the same way any block
 * box is grown to contain a child that needs more room — the one direction of this relationship
 * that behaves the same with or without a definite ancestor.
 *
 * 2.5rem (40px) is small — barely a map — but it is what stays under .policy-map__body's own
 * measured 59.8px at an 800x600 viewport once .policy-map__breadcrumb and .policy-map__footer are
 * subtracted from the 8rem floor above; anything closer to that number risks the same overflow in
 * V2 at a short window that the floor above is already written not to cause. This is deliberately
 * only a floor for the collapse case, not a target: a host with a real home for this component
 * gives it a definite height instead (PolicyDashboardV2Component's view slot,
 * PolicyDashboardClassicComponent's map wrapper), and only there does the map and the panel beside
 * it land at an even, proportioned height rather than this bare minimum.
 */
.policy-map__canvas[b-xmuheb8dge] {
    flex: 1 1 auto;
    min-height: 2.5rem;
    position: relative;
}

/*
 * Over the canvas rather than in the column, so the map keeps its size while the first load runs
 * and nothing moves when the counties arrive. Opaque because there is nothing behind it yet, and
 * above the legend and the zoom buttons, which have nothing to act on until there is a map.
 */
.policy-map__loading[b-xmuheb8dge] {
    align-items: center;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-direction: column;
    font-size: 13px;
    gap: 12px;
    inset: 0;
    justify-content: center;
    position: absolute;
    z-index: 6;
}

/*
 * Sits on the canvas's top edge, out of the flow, so a refresh never shifts the map.
 *
 * ::deep, because the bar is MudProgressLinear's OWN root element and a child component's root does
 * not carry this component's scope attribute — so a plain .policy-map__progress rule compiles to a
 * selector that matches nothing at all. Silently: the class is on the element, the rule is in the
 * file, and the only sign is the layout. .policy-map__map is display:flex, so a bar that never
 * turns absolute is a row sibling of the canvas rather than an overlay on it, and the two split the
 * width down the middle — which halved the map, and so the map's rendered scale, for as long as a
 * refresh ran. That is the "it zooms out and then back in" a filter change used to produce.
 */
.policy-map__map[b-xmuheb8dge]  .policy-map__progress {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 6;
}

/*
 * The word beside the breadcrumb that says which map you are looking at — the one the filters
 * describe, or the one they described a moment ago.
 */
.policy-map__updating[b-xmuheb8dge] {
    align-items: center;
    color: var(--mud-palette-text-secondary);
    display: flex;
    font-size: 12px;
    gap: 6px;
}

/* Sized to the text it sits beside. MudBlazor's own Size.Small is 24px, taller than the line. */
.policy-map__updating[b-xmuheb8dge]  .mud-progress-circular {
    height: 16px;
    width: 16px;
}

.policy-map__error[b-xmuheb8dge] {
    align-items: center;
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex: 1 1 auto;
    font-size: 13px;
    justify-content: center;
    min-height: 0;
}

/* Pushed to the right together, so the breadcrumb keeps the left and the controls keep the right. */
.policy-map__actions[b-xmuheb8dge] {
    margin-left: auto;
}

/*
 * The measure reads as a value, "Liability", not as a command, so it keeps its own case rather than
 * MudBlazor's uppercase button text.
 */
.policy-map__actions[b-xmuheb8dge]  .policy-map__measure-menu .mud-button-root {
    text-transform: none;
}

/*
 * One height for every control in the row. A dense MudSelect is 40px while a Size.Small button is
 * 30px, and three controls of three heights sitting next to each other read as a mistake. ::deep
 * because the buttons are rendered by MudBlazor, not by this component.
 */
.policy-map__breadcrumb[b-xmuheb8dge]  .mud-button-root,
.policy-map__breadcrumb[b-xmuheb8dge]  .mud-menu > .mud-button-root {
    height: 40px;
}

/*
 * The measure dropdown is the exception: the one outlined control in the row, so its box is the one
 * the eye measures, and at 40px it read as a form field rather than a switch. The text buttons beside
 * it draw no box, so their 40px hit area and this 30px outline do not read as a mismatch. After the
 * rule above, which it ties with on specificity.
 */
.policy-map__actions[b-xmuheb8dge]  .policy-map__measure-menu > .mud-button-root {
    font-size: 13px;
    height: 30px;
    padding: 0 6px 0 10px;
}

/* Anchored to the painted map's bottom-left corner, for the same reason as the zoom buttons. */
.policy-map__legend[b-xmuheb8dge] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    bottom: calc(var(--countymap-map-bottom, 0px) + 8px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    left: calc(var(--countymap-map-left, 0px) + 10px);
    padding: 9px 11px;
    position: absolute;
}

/*
 * The legend's title is also the control that changes the measure, so it keeps the title's type
 * rather than a button's: the caret is what says it can be clicked.
 */
.policy-map__legend[b-xmuheb8dge]  .policy-map__legend-menu .mud-button-root {
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    letter-spacing: 0.5px;
    min-width: 0;
    padding: 0;
    text-transform: uppercase;
}

.policy-map__legend-ramp[b-xmuheb8dge] {
    display: flex;
}

.policy-map__legend-stop[b-xmuheb8dge] {
    height: 12px;
    width: 30px;
}

.policy-map__legend-bounds[b-xmuheb8dge] {
    color: var(--mud-palette-text-secondary);
    display: flex;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    justify-content: space-between;
}

/*
 * Anchored to the painted map's own bottom-right corner, not the canvas's. The projection keeps the
 * geometry's aspect ratio, so the canvas is always taller or wider than the map it holds, and at
 * the national scale in a wide panel the canvas's own corners are empty white beside the map.
 * --countymap-map-* are the insets countymap.js publishes for the painted map; the fallbacks are
 * the canvas's own edges, which is where these sit until the first render.
 *
 * Bottom right rather than top right: at the national view the top-right corner of the map is New
 * England, and the buttons covered Maine. The bottom-right corner there is ocean off Florida.
 */
.policy-map__zoom[b-xmuheb8dge] {
    bottom: calc(var(--countymap-map-bottom, 0px) + 10px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    right: calc(var(--countymap-map-right, 0px) + 10px);
}

.policy-map__zoom-button[b-xmuheb8dge] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.policy-map__footer[b-xmuheb8dge] {
    align-items: center;
    background: var(--mud-palette-background-grey);
    border-top: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex: none;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    gap: 18px;
    height: 42px;
    padding: 0 14px;
}

.policy-map__footer-note[b-xmuheb8dge] {
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    margin-left: auto;
}

/*
 * Two equal columns at a height of their own, which is the point of the height rather than a detail
 * of it: the map above is watched by a ResizeObserver that refits — and reframes — the projection on
 * any change to its box, and .policy-map__body takes whatever height this block leaves. A block
 * sized by its content would therefore move the map every time these tables changed: first row to
 * six rows, six rows to a failure line, one refetch to the next. Fixed here, the tables can say
 * whatever they have to say and the map does not move at all.
 *
 * 13rem (208px) holds a header, six rows and a "+n more" line at the sizes below, which is the
 * tallest these tables get; a taller-than-expected row scrolls inside this box rather than pushing
 * the map.
 */
.policy-map__breakdowns[b-xmuheb8dge] {
    display: grid;
    flex: none;
    gap: 24px;
    grid-template-columns: 1fr 1fr;
    height: 13rem;
    overflow-y: auto;
    padding: 10px 14px 14px;
    scrollbar-gutter: stable;
}

/*
 * The same width the body stacks its panel at. Two breakdowns side by side in half of a narrow
 * screen leave neither column enough room for a commodity name and a figure on one line — and
 * stacked they need twice the height, which is still a fixed one for the reason above.
 */
@media (max-width: 1280px) {
    .policy-map__breakdowns[b-xmuheb8dge] {
        grid-template-columns: 1fr;
        height: 26rem;
    }
}

/*
 * Grow-with-content, for a host that would rather the page scroll than this component (the classic
 * dashboard, via GrowsWithContent). Everything above sizes the component to its host and scrolls
 * inside it, and the one box that needs a definite height — the map, whose canvas measures whatever
 * it is handed — gets it from what the rest of the column leaves. Here the map gets a height of its
 * own instead, from --policy-map-height, and everything else is sized by its content under it: the
 * panel's list, the totals footer and both breakdowns show every row they have, and the page scrolls
 * to the end of them.
 *
 * That also retires the reason the breakdowns carry a fixed height above. They were fixed so their
 * rows could not move the map, which took whatever height they left; with the map's height its own,
 * nothing below it can reach it.
 *
 * Last in the file so it wins every tie with the rules it overrides, the media blocks included.
 */
.policy-map--grows[b-xmuheb8dge] {
    --policy-map-panel-stacked: auto;

    height: auto;
    min-height: 0;
    overflow-y: visible;
    scrollbar-gutter: auto;
}

.policy-map--grows .policy-map__body[b-xmuheb8dge] {
    flex: none;
    height: var(--policy-map-height, 36rem);
}

.policy-map--grows .policy-map__breakdowns[b-xmuheb8dge] {
    height: auto;
    overflow-y: visible;
    scrollbar-gutter: auto;
}

/*
 * Stacked, the body holds the map and the panel under it, so the height moves from the body to the
 * map alone and the body grows with the panel's list. The panel reads --policy-map-panel-stacked,
 * which is auto above for exactly this.
 */
@media (max-width: 1280px) {
    .policy-map--grows .policy-map__body[b-xmuheb8dge] {
        height: auto;
        min-height: 0;
    }

    .policy-map--grows .policy-map__map[b-xmuheb8dge] {
        flex: none;
        height: var(--policy-map-height, 36rem);
    }

    .policy-map--grows .policy-map__breakdowns[b-xmuheb8dge] {
        height: auto;
    }
}

/*
 * The panel collapsed to its rail, the map has all but 28px of the row: .policy-map__map is already
 * flex: 1 1 auto, so the width needs no rule here at all — only the height does, and only where the
 * two stack. There --policy-map-panel-stacked is the panel's share of the body, added to the map's
 * above, and a rail's share is the 2rem bar it becomes (PolicyMapSelectionPanelComponent.razor.css
 * sets that height in the same media query; the two numbers are one number). Last in the file, after
 * .policy-map--grows, because the two are single-class selectors that tie on specificity and this
 * one has to win: in the grow-with-content layout the same custom property is auto, which under a
 * rail would leave the body growing for a list that is not rendered.
 */
.policy-map--panel-collapsed[b-xmuheb8dge] {
    --policy-map-panel-stacked: 2rem;
}
/* /Features/Producers/Components/ProducerDocumentsListComponent.razor.rz.scp.css */
[b-21j1blod4j] .sort-label {
    display: block;
}
/* /Features/Reports/Components/Catalog/ReportCatalogRailComponent.razor.rz.scp.css */
/* height: 100% is what makes the rail (and its border-right divider) stretch to match a taller
   workbench when the two sit side by side at/above the md breakpoint — MudGrid's row stretches
   both columns to the taller one's height, and this fills that box rather than leaving the
   divider stop short. It has nothing to do with the (removed) mobile height cap: below md the
   rail is full width with no sibling to stretch against, so this is a no-op there. */
.ar-report-rail[b-zlx7eanmfd] {
    border-right: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Below MudBlazor's md breakpoint (960px) the rail's MudItem goes xs="12" and stacks above the
   workbench instead of sitting beside it. The divider belongs between them, not on the rail's
   right edge. Deliberately no max-height/overflow-y here: an internally-scrolling pane inside a
   scrollable page is a worse interaction than one honest page scroll, and it was also changing
   the page's total height, which the shell's absolutely-positioned #footer is measured against
   (#page-container/#content-wrap/#footer live in DefaultLayout.razor.css, shared across the app —
   not ours to change). Let the rail run as long as it needs to and let the page scroll. */
@media (max-width: 959.98px) {
    .ar-report-rail[b-zlx7eanmfd] {
        border-right: none;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }
}

.ar-report-rail__head[b-zlx7eanmfd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 8px;
}

/* Rendered by MudText (a child component), so it needs ::deep to receive scoped styles. */
[b-zlx7eanmfd] .ar-report-rail__count {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}

.ar-report-rail__row[b-zlx7eanmfd] {
    align-items: center;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 8px;
    justify-content: space-between;
    padding: 8px 12px;
    text-align: left;
    width: 100%;
}

.ar-report-rail__row:hover[b-zlx7eanmfd] {
    background: var(--mud-palette-action-default-hover);
}

.ar-report-rail__row:focus-visible[b-zlx7eanmfd] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.ar-report-rail__row--selected[b-zlx7eanmfd] {
    background: var(--mud-palette-action-default-hover);
    font-weight: 600;
}

/* .ar-report-rail__name is rendered by MudText (a child component), so it needs ::deep to
   receive scoped styles. */
.ar-report-rail__row--locked[b-zlx7eanmfd]  .ar-report-rail__name {
    color: var(--mud-palette-text-disabled);
}

.ar-report-rail__meta[b-zlx7eanmfd] {
    align-items: center;
    display: flex;
    gap: 6px;
}

/* Rendered by MudText (a child component), so it needs ::deep to receive scoped styles. */
[b-zlx7eanmfd] .ar-report-rail__reason {
    color: var(--mud-palette-text-disabled);
}
/* /Features/Tasks/Comments/TaskCommentIndicatorComponent.razor.rz.scp.css */
.task-comment-badge[b-r0dwxp5ffj]  .mud-badge {
    min-width: 14px;
    height: 14px;
    font-size: 9px;
    padding: 0 3px;
    transform: scale(1) translate(40%, -40%) !important;
}
/* /Features/Workflows/Dashboard/Components/Charts/WorkflowChartLegendComponent.razor.rz.scp.css */
.ar-legend-dot[b-y57cu5tl4n] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
/* /Features/Workflows/Dashboard/Components/Charts/WorkflowChartRowComponent.razor.rz.scp.css */
/* Instance-count chip acts as a "filter by this workflow" affordance, mirroring the
   bar segment hover treatment (brightness 0.9, 120ms). ::deep reaches the MudChip
   root rendered by the child component. */
[b-xym4f1bi50] .ar-instance-chip {
    cursor: pointer;
    transition: filter 120ms ease;
    /* Fixed min-width + centered content so the chip occupies the same
       horizontal space whether the count is 1, 2, 3, or 4 digits. This
       keeps the right-aligned workflow names from shifting row-to-row as
       the count changes (fits up to 9999; larger counts expand). */
    min-width: 2.75rem;
    justify-content: center;
}

[b-xym4f1bi50] .ar-instance-chip:hover {
    filter: brightness(0.9);
}
/* /Features/Workflows/Dashboard/Components/Charts/WorkflowChartStatusBarComponent.razor.rz.scp.css */
.ar-chart-bar[b-oug94onjwe] {
    display: flex;
    width: 100%;
    height: 32px;
    border-radius: 4px;
    overflow: hidden;
}

.ar-chart-segment[b-oug94onjwe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-weight: 600;
    transition: filter 120ms ease;
}

.ar-chart-bar--clickable[b-oug94onjwe],
.ar-chart-bar--clickable .ar-chart-segment[b-oug94onjwe],
.ar-chart-segment--clickable[b-oug94onjwe] {
    cursor: pointer;
}

/* Highlight only the hovered section (e.g. Complete vs Incomplete), not the whole bar. */
.ar-chart-bar--clickable .ar-chart-segment:hover[b-oug94onjwe],
.ar-chart-segment--clickable:hover[b-oug94onjwe] {
    filter: brightness(0.9);
}
/* /Features/Workflows/Dashboard/Components/Charts/WorkflowDashboardChartsComponent.razor.rz.scp.css */
/* Shared chart-row layout for the workflow, steps, and assignee charts.
   ::deep reaches the label / bar / total elements rendered by the child
   components so all three keep a consistent, aligned column layout.
   Widening the label column shrinks the bar area, giving long workflow,
   step, and assignee names more room. Labels are right-aligned so the
   names sit flush against the bars (matches the mockup); for flex-based
   labels (workflow name + chip, assignee icon + name) flex-end achieves
   the same, while text-align handles the plain-text step labels. */
[b-f3g5j5ep6m] .ar-chart-label {
    width: 320px;
    min-width: 320px;
    justify-content: flex-end;
    text-align: right;
}

[b-f3g5j5ep6m] .ar-chart-bar {
    flex: 1 1 auto;
    min-width: 0;
}

[b-f3g5j5ep6m] .ar-chart-total {
    width: 70px;
    text-align: right;
}