@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/Fas/FasConfirm.razor.rz.scp.css */
/* FasConfirm scoped styles (snowma 8/26). Severity colors and the type-to-confirm
   field. Warn palettes read the --fs-* tokens; everything else reads Mud variables
   with token fallbacks (standing rule 1). */
.fasc-question[b-v8qs25pqy2] { font-size: 14.5px; font-weight: 600; color: var(--mud-palette-text-primary, #111827); line-height: 1.45; }
.fasc-detail[b-v8qs25pqy2] { margin-top: 6px; font-size: 12.5px; color: var(--mud-palette-text-secondary, #4B5563); line-height: 1.5; }
.fasc-warn[b-v8qs25pqy2] { margin-top: 12px; border-radius: var(--fs-radius-md); padding: 10px 12px; }
.fasc-warn-amber[b-v8qs25pqy2] { background: var(--fs-warn-bg); border: 1px solid var(--fs-warn-border); }
.fasc-warn-red[b-v8qs25pqy2] { background: var(--fs-danger-bg); border: 1px solid var(--fs-danger-border); }
.fasc-warn-title[b-v8qs25pqy2] { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.fasc-warn-amber .fasc-warn-title[b-v8qs25pqy2] { color: var(--fs-warn-text); }
.fasc-warn-red .fasc-warn-title[b-v8qs25pqy2] { color: var(--mud-palette-error, #B91C1C); }
.fasc-warn-detail[b-v8qs25pqy2] { margin-top: 3px; font-size: 12px; color: var(--mud-palette-text-primary, #111827); line-height: 1.45; }
.fasc-type-label[b-v8qs25pqy2] { margin-top: 12px; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--mud-palette-text-secondary, #4B5563); }
.fasc-type-input[b-v8qs25pqy2] { width: 100%; margin-top: 5px; padding: 8px 10px; font-size: 13.5px; border: 1.5px solid var(--mud-palette-lines-default, #E5E7EB); border-radius: var(--fs-radius-md); outline: none; background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #111827); }
.fasc-type-input:focus[b-v8qs25pqy2] { border-color: var(--mud-palette-primary, #12372E); }
.fasc-type-state[b-v8qs25pqy2] { margin-top: 4px; font-size: 11.5px; color: var(--mud-palette-text-secondary, #4B5563); }
/* Buttons moved to the global .fas-btn family in site.css (snowma, rule of two). */
/* wonote 10/14: the note under the question; the field itself is a MudTextField and keeps Mud's look. */
.fasc-note[b-v8qs25pqy2] { margin-top: 12px; }

/* /Components/Fas/FasContactChips.razor.rz.scp.css */
/* FasContactChips (wotrack 9/29). Every declaration below is byte for byte the rule it
   replaces: .vsp-issue-meta* and .vsp-issue-text-btn from ServiceTrackerServiceIssueDialog
   (lines 264-284) and the .stv-call-* block (285-291) that three dialogs each carry a
   global copy of. Only the class NAMES changed, stv-call-* -> fcc-*, so the surviving
   global copies cannot reach this component.

   The hex is deliberate and decided (Brad, 9/29), not a rule 1 miss -- see the component
   header. Do not "fix" it in isolation: these values must move to tokens in the same change
   that swaps the other three call sites, or the pixels drift apart. */

.fcc[b-75wi306wv4] { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px;
       align-items: center;
       background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px;
       padding: 12px 14px; margin-bottom: 14px; }

.fcc-row[b-75wi306wv4] { display: flex; flex-direction: column; gap: 2px; }
.fcc-label[b-75wi306wv4] { font-size: 11px; color: #374151; text-transform: uppercase;
             letter-spacing: 0.04em; font-weight: 700; }
.fcc-value[b-75wi306wv4] { font-size: 14px; color: #111827; font-weight: 600; }
.fcc-action[b-75wi306wv4] { display: flex; justify-content: flex-end; }

.fcc-text-btn[b-75wi306wv4] {
    background: #2563eb; color: #fff;
    border: 1px solid #2563eb; border-radius: 8px;
    padding: 8px 14px; font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
}
.fcc-text-btn:hover[b-75wi306wv4] { background: #1d4ed8; border-color: #1d4ed8; }

.fcc-call-row[b-75wi306wv4] { display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.fcc-call-btn[b-75wi306wv4] { background:#12372E; color:#fff; border:1px solid #12372E; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer; }
.fcc-call-btn:hover[b-75wi306wv4] { background:#0e2c24; }
.fcc-more[b-75wi306wv4] { grid-column:1 / -1; border-top:1px solid #e5e7eb; margin-top:4px; padding-top:10px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-start; }
.fcc-more-label[b-75wi306wv4] { font-size:11px; color:#9ca3af; margin-right:2px; }
.fcc-chip[b-75wi306wv4] { display:inline-flex; align-items:center; gap:5px; border:1px solid #d1d5db; border-radius:999px; padding:4px 10px; font-size:12px; color:#2563eb; text-decoration:none; font-weight:600; white-space:nowrap; }
.fcc-chip:hover[b-75wi306wv4] { border-color:#2563eb; background:#f5f8ff; }
/* /Components/Fas/FasDialog.razor.rz.scp.css */
/* FasDialog scoped styles (snowma 8/26). Chrome only; dialog bodies style themselves.
   Sizes are the UI Standard section 2 ladder. Colors read Mud palette variables with
   token fallbacks so the shell tracks a rebrand (standing rule 1). */
.fasd-scrim.fasd-above-panel[b-pqxanaj77e] { z-index: 1500; }   /* 11/03 (Eric): AbovePanel -- in front of the Source Vendor panel (1401) */
.fasd-scrim.fasd-above-panel[b-pqxanaj77e] {
    z-index: 1500;
}
/* 11/03 (Eric): AbovePanel -- in front of the Source Vendor panel (1401) */
.fasd-scrim[b-pqxanaj77e] { position: fixed; inset: 0; background: var(--fs-scrim); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 24px 24px; z-index: 1400; }
.fasd-card[b-pqxanaj77e] { background: var(--mud-palette-surface, #fff); border-radius: var(--fs-radius-lg); box-shadow: var(--fs-shadow-dialog); width: 100%; display: flex; flex-direction: column; max-height: 88vh; outline: none; }
.fasd-size-confirm[b-pqxanaj77e] { max-width: 430px; }
.fasd-size-small[b-pqxanaj77e] { max-width: 560px; }
.fasd-size-medium[b-pqxanaj77e] { max-width: 760px; }
.fasd-size-large[b-pqxanaj77e] { max-width: 1040px; }
.fasd-size-full[b-pqxanaj77e] { max-width: calc(100vw - 48px); }
.fasd-header[b-pqxanaj77e] { flex: none; display: flex; align-items: center; gap: var(--fs-gap-md); min-height: 48px; padding: 6px 10px 6px 18px; background: var(--mud-palette-primary, #12372E); color: var(--mud-palette-primary-text, #fff); border-radius: var(--fs-radius-lg) var(--fs-radius-lg) 0 0; }
.fasd-titles[b-pqxanaj77e] { flex: 1 1 auto; min-width: 0; }
.fasd-hstart[b-pqxanaj77e] { flex: none; display: inline-flex; align-items: center; }   /* e50s1 10/30: HeaderStart */
.fasd-title[b-pqxanaj77e] { font-size: 16px; font-weight: 700; line-height: 1.25; }
.fasd-subtitle[b-pqxanaj77e] { font-size: 11.5px; opacity: .85; margin-top: 1px; }
.fasd-close[b-pqxanaj77e], .fasd-header[b-pqxanaj77e]  .fasd-hbtn { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .16); color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.fasd-close:hover:not(:disabled)[b-pqxanaj77e], .fasd-header[b-pqxanaj77e]  .fasd-hbtn:hover { background: rgba(255, 255, 255, .28); }
.fasd-close:disabled[b-pqxanaj77e] { opacity: .45; cursor: default; }
    /* focusring 11/03 (Eric): the header's X (and maximize, where shown) gets a light ring on Tab, since the header is dark. */
    .fasd-close:focus-visible[b-pqxanaj77e], .fasd-header[b-pqxanaj77e]  .fasd-hbtn:focus-visible {
        outline: 2px solid var(--mud-palette-primary-text, #fff);
        outline-offset: 2px;
    }
.fasd-body[b-pqxanaj77e] { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px; }
.fasd-size-medium .fasd-body[b-pqxanaj77e] { max-height: 70vh; }
.fasd-size-large .fasd-body[b-pqxanaj77e] { max-height: 80vh; }
.fasd-footer[b-pqxanaj77e] { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: var(--fs-gap-sm); padding: 12px 18px; border-top: 1px solid var(--mud-palette-lines-default, #E5E7EB); }
/* fitdlg 10/26 (R. Nugent; Gate 1 signed off 10/26): on a phone (720px and under, the width the Snow pages turn into cards at, or a
   short touch screen turned sideways) a dialog fills the screen. The card loses its corners and its caps, and the body takes
   everything between the header and the footer and scrolls inside, so the buttons sit on the bottom edge; it was 640px with the
   body's 70vh and 80vh caps still on, which left empty screen under the buttons. 100dvh is the height a phone browser shows
   under its own bars (100vh first, for a browser without it); the footer keeps clear of a phone's home bar. A confirm stays a
   card in the middle of the screen, at its ladder width (430px) on a phone turned sideways. */
@media (max-width: 720px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
    .fasd-scrim[b-pqxanaj77e] { padding: 0; align-items: stretch; }
    .fasd-card[b-pqxanaj77e] { max-width: none; border-radius: 0; height: 100vh; height: 100dvh; max-height: none; }
    .fasd-header[b-pqxanaj77e] { border-radius: 0; padding: 6px 8px 6px 14px; }
    .fasd-body[b-pqxanaj77e], .fasd-size-medium .fasd-body[b-pqxanaj77e], .fasd-size-large .fasd-body[b-pqxanaj77e] { min-height: 0; max-height: none; padding: 12px 14px; }
    .fasd-footer[b-pqxanaj77e] { flex-wrap: wrap; padding: 10px 14px max(10px, env(safe-area-inset-bottom)); }
    .fasd-scrim:has(> .fasd-size-confirm)[b-pqxanaj77e] { padding: 16px 12px; align-items: center; }
    .fasd-card.fasd-size-confirm[b-pqxanaj77e] { max-width: 430px; height: auto; max-height: calc(100dvh - 32px); border-radius: var(--fs-radius-lg); }
    .fasd-size-confirm .fasd-header[b-pqxanaj77e] { border-radius: var(--fs-radius-lg) var(--fs-radius-lg) 0 0; }
}
/* fitdlg 10/26: on a touch screen the X, and the maximize button where it shows, is a 40px target. */
@media (pointer: coarse) {
    .fasd-close[b-pqxanaj77e], .fasd-header[b-pqxanaj77e]  .fasd-hbtn { width: 40px; height: 40px; }
}
/* histscroll 9/22 (R. Nugent): BesideDrawer. The backdrop ends at the site drawer's left edge so the
   drawer stays live beside the dialog, and the card centers in the space that is left. 1280px is where
   a Medium card (760px) and the scrim's 24px gutters still fit beside the 460px drawer; below it the
   full backdrop returns. A media query cannot read a custom property, so the breakpoint is a number. */
@media (min-width: 1280px) {
    .fasd-scrim.fasd-beside-drawer[b-pqxanaj77e] { right: var(--fs-drawer-w); }
}
/* massmove 10/21 (R. Nugent): Movable and Resizable, off unless a dialog asks. The maximize button is a MudIconButton, a
   child component, so it shares the X's look through ::deep (the X's own rule above). fas-dialog.js marks a card the
   reader has resized with data-fasd-sized, and the shell marks a maximized one with data-fasd-max: a sized card drops the
   ladder's caps and its body fills it; a maximized one fills the window less 8px. JS clears its inline size while a card
   is maximized and puts it back on restore, so no rule here has to outrank an inline style. */
.fasd-header[b-pqxanaj77e]  .fasd-hbtn { display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-right: 2px; }
.fasd-resizable[b-pqxanaj77e] { position: relative; }
.fasd-movable .fasd-header[b-pqxanaj77e] { cursor: move; user-select: none; touch-action: none; }
.fasd-card[data-fasd-sized][b-pqxanaj77e] { flex: none; max-width: none; max-height: none; }
.fasd-card[data-fasd-sized] .fasd-body[b-pqxanaj77e], .fasd-card[data-fasd-max] .fasd-body[b-pqxanaj77e] { max-height: none; }
.fasd-card[data-fasd-max][b-pqxanaj77e] { position: fixed; inset: 8px; width: auto; height: auto; max-width: none; max-height: none; }
.fasd-card[data-fasd-max] .fasd-header[b-pqxanaj77e] { cursor: default; }
.fasd-rz[b-pqxanaj77e] { position: absolute; z-index: 1; touch-action: none; }
.fasd-rz-e[b-pqxanaj77e] { top: 48px; right: -4px; bottom: 18px; width: 8px; cursor: ew-resize; }
.fasd-rz-s[b-pqxanaj77e] { left: 18px; right: 18px; bottom: -4px; height: 8px; cursor: ns-resize; }
.fasd-rz-se[b-pqxanaj77e] { right: 3px; bottom: 3px; width: 16px; height: 16px; cursor: nwse-resize; opacity: .7;
    background: linear-gradient(135deg, transparent 0 46%, var(--fs-text-muted) 46% 54%, transparent 54% 66%, var(--fs-text-muted) 66% 74%, transparent 74%); }
.fasd-card[data-fasd-max] .fasd-rz[b-pqxanaj77e] { display: none; }
@media (max-width: 959px) {
    .fasd-rz[b-pqxanaj77e], .fasd-header[b-pqxanaj77e]  .fasd-hbtn { display: none; }
    .fasd-movable .fasd-header[b-pqxanaj77e] { cursor: default; }
}

/* /Components/Fas/FasDocRow.razor.rz.scp.css */
/* FasDocRow (snowdocs 9/29). doctype 11/04: the row roots on a MudElement now, and a Mud root takes no scoped styles, so every
   rule that lived here moved to site.css under fdr-, unchanged. Nothing is left in this file; it can be deleted. */
/* /Components/Fas/FasFilterChips.razor.rz.scp.css */
/* FasFilterChips (fchips 9/18). Metrics follow the Land Tracker .vsp-mlf-chip rule so the
   two trackers read the same; every colour is a --fs-chip-* token (standing rule 1).
   toolbar 9/30: ffch, not ffc, which is FasFoldCard's (see the component). */
.ffch[b-z6jeoxv9sd] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-gap-sm);
       padding: 8px 10px; margin-top: var(--fs-gap-sm);
       background: var(--fs-kpi-surface);
       border: 1px solid var(--mud-palette-lines-default);
       border-radius: var(--fs-radius-md); }

/* Matches the theme Subtitle2 slot (.75rem / 700 / .04em), which is the app's small
   uppercase label scale and what the MudSelect field labels beside this render at.
   9px here would have sat visibly smaller than ACCOUNT and STATE directly above. */
.ffch-cap[b-z6jeoxv9sd] { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
           font-weight: 700; color: var(--fs-text-muted); }

.ffch-chip[b-z6jeoxv9sd] { display: inline-flex; align-items: center; gap: 5px;
            background: var(--fs-chip-bg); color: var(--fs-chip-fg);
            border: 1px solid var(--fs-chip-line); border-radius: 999px;
            padding: 3px 9px; font-size: 12px; font-weight: 600;
            line-height: 1.5; white-space: nowrap; max-width: 320px;
            overflow: hidden; text-overflow: ellipsis; }

.ffch-x[b-z6jeoxv9sd] { cursor: pointer; font-size: 10px; color: var(--fs-chip-x); flex: none; }
.ffch-x:hover[b-z6jeoxv9sd] { color: var(--fs-chip-x-hover); }

.ffch-more[b-z6jeoxv9sd] { font-size: 11.5px; color: var(--fs-text-muted); font-style: italic; }

.ffch-clear[b-z6jeoxv9sd] { margin-left: auto; background: none; border: 0; padding: 0;
             font-size: 12px; font-weight: 600; color: var(--fs-chip-fg);
             text-decoration: underline; cursor: pointer; }
.ffch-clear:hover[b-z6jeoxv9sd] { color: var(--fs-chip-x-hover); }
/* /Components/Fas/FasFilterSelect.razor.rz.scp.css */
/* FasFilterSelect (ffs 9/18). Metrics follow the Land Tracker .vsp-mlf-* rules so the two
   trackers read the same; every colour is a token (standing rule 1). */
/* ffsdark 10/23 (R. Nugent: these filter boxes "a little darker shade and legible"; Gate 1 signed off 10/23, option A, every
   filter box): the edge is Mud's input edge (--mud-palette-lines-inputs), the one the search box and the map's date and sort
   fields already wear, and it darkens under the pointer as theirs does (--mud-palette-action-default). The labels move to the
   secondary ink and "All" to the primary ink, semi bold. The open box keeps its primary edge and ring. */
.ffs[b-y8sn4qam3j] { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 170px; flex: 1 1 170px; }

.ffs-label[b-y8sn4qam3j] { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
             color: var(--fs-text-secondary); }

.ffs-box[b-y8sn4qam3j] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 38px;
           padding: 4px 26px 4px 8px; cursor: pointer; background: var(--fs-kpi-surface);
           border: 1px solid var(--mud-palette-lines-inputs);
           border-radius: var(--mud-default-borderradius, 4px); }
.ffs-box-open[b-y8sn4qam3j] { border-color: var(--mud-palette-primary);
                box-shadow: 0 0 0 2px var(--fs-ffs-focus); }
.ffs-box:not(.ffs-box-open):hover[b-y8sn4qam3j] { border-color: var(--mud-palette-action-default); }

.ffs-ph[b-y8sn4qam3j] { color: var(--mud-palette-text-primary); font-size: 13px; font-weight: 600; }
.ffs-box[b-y8sn4qam3j]  .ffs-caret { position: absolute; right: 8px; bottom: 13px; color: var(--fs-text-secondary);
             font-size: 11px; pointer-events: none; }

.ffs-chip[b-y8sn4qam3j] { display: inline-flex; align-items: center; gap: 5px;
            background: var(--fs-chip-bg); color: var(--fs-chip-fg);
            border: 1px solid var(--fs-chip-line); border-radius: 999px;
            padding: 2px 8px; font-size: 12px; font-weight: 600; line-height: 1.5;
            max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ffs-chip .ffs-x[b-y8sn4qam3j] { cursor: pointer; font-size: 10px; color: var(--fs-chip-x); flex: none; }
.ffs-chip .ffs-x:hover[b-y8sn4qam3j] { color: var(--fs-chip-x-hover); }
/* toolbar 9/30: the name is its own box. In the Dense form a long one ends in an ellipsis with the x in view
   (rule below); in the standard form the box has no rule of its own, so it renders exactly as before. */

.ffs-pop[b-y8sn4qam3j] { position: absolute; z-index: 1100; top: calc(100% + 4px); left: 0;
           width: 280px; max-width: 88vw; padding: 8px;
           background: var(--fs-kpi-surface);
           border: 1px solid var(--mud-palette-lines-default);
           border-radius: var(--fs-radius-md); box-shadow: var(--fs-shadow-card); }

.ffs-search[b-y8sn4qam3j] { width: 100%; margin-bottom: 6px; padding: 6px 8px; font-size: 13px;
              color: var(--mud-palette-text-primary);
              background: var(--fs-kpi-surface);
              border: 1px solid var(--mud-palette-lines-default);
              border-radius: var(--mud-default-borderradius, 4px); }
.ffs-search:focus[b-y8sn4qam3j] { outline: none; border-color: var(--mud-palette-primary); }

.ffs-list[b-y8sn4qam3j] { max-height: 240px; overflow-y: auto; }
.ffs-opt[b-y8sn4qam3j] { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer;
           font-size: 13px; color: var(--mud-palette-text-primary);
           border-radius: var(--mud-default-borderradius, 4px); box-sizing: border-box; }
.ffs-opt:hover[b-y8sn4qam3j] { background: var(--fs-rail-hover); }
.ffs-opt-on[b-y8sn4qam3j] { background: var(--fs-chip-bg); color: var(--fs-chip-fg); }
.ffs-opt[b-y8sn4qam3j]  .fs-ico { flex: none; color: var(--mud-palette-primary); }
.ffs-opt-text[b-y8sn4qam3j] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ffs-empty[b-y8sn4qam3j] { padding: 8px; text-align: center; font-size: 12px; color: var(--fs-text-muted); }

.ffs-clear[b-y8sn4qam3j] { width: 100%; margin-top: 6px; padding: 5px; cursor: pointer;
             font-size: 12px; font-weight: 600; color: var(--fs-chip-fg);
             background: none; border: 0; text-decoration: underline; }

.ffs-backdrop[b-y8sn4qam3j] { position: fixed; inset: 0; z-index: 1090; background: transparent; }

/* toolbar 9/30 (R. Nugent): Dense, the one line form for a tool bar. The label sits inside the box ahead of the
   value; the box never wraps: the first choice as a chip, then +N. The box sizes to what it holds, up to a
   limit, so an empty filter is short. The caret centres on the box because there is no label above it. */
.ffs.ffs-dense[b-y8sn4qam3j] { flex: 0 1 auto; min-width: 0; gap: 0; }
.ffs-dense .ffs-box[b-y8sn4qam3j] { flex-wrap: nowrap; gap: 6px; max-width: 300px; padding: 4px 26px 4px 10px; overflow: hidden; }
.ffs-inlabel[b-y8sn4qam3j] { flex: none; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
               color: var(--fs-text-secondary); }
.ffs-dense .ffs-ph[b-y8sn4qam3j] { white-space: nowrap; }
.ffs-dense .ffs-chip[b-y8sn4qam3j] { flex: 0 1 auto; min-width: 0; max-width: 170px; }
.ffs-dense .ffs-chip-t[b-y8sn4qam3j] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ffs-more[b-y8sn4qam3j] { flex: none; font-size: 12px; font-weight: 700; line-height: 1.5; padding: 2px 7px; border-radius: 999px;
            background: var(--fs-chip-bg); color: var(--fs-chip-fg); border: 1px solid var(--fs-chip-line); }
.ffs-dense[b-y8sn4qam3j]  .ffs-caret { bottom: auto; top: 50%; transform: translateY(-50%); }

/* ffsseg 10/27 (R. Nugent: the tool bar filters redesigned "so that the titles are more clearly delineated from the values"; Gate 1
   signed off 10/27, Snow Tracker 2.0's bar and the Snow Tracker Map's): the one line form reads as two joined parts, the name in
   white on the theme green and the value on white, in one box with one edge. The edge is an inset shadow rather than a border, so
   the green part meets the box's own edge with no seam and the box's rounded corners clip it. Hover darkens the edge, and the open
   box keeps its primary edge and ring, as before. The names keep the case the page gives them (Title Case). The standard form (the
   name above the box) is unchanged. Tokens only. */
.ffs-dense .ffs-box[b-y8sn4qam3j] { min-height: 34px; padding: 0 28px 0 0; gap: 8px; border: 0;
                      box-shadow: inset 0 0 0 1px var(--mud-palette-lines-inputs); }
.ffs-dense .ffs-box:not(.ffs-box-open):hover[b-y8sn4qam3j] { box-shadow: inset 0 0 0 1px var(--mud-palette-action-default); }
.ffs-dense .ffs-box.ffs-box-open[b-y8sn4qam3j] { box-shadow: inset 0 0 0 1px var(--mud-palette-primary), 0 0 0 2px var(--fs-ffs-focus); }
.ffs-dense .ffs-inlabel[b-y8sn4qam3j] { align-self: stretch; display: flex; align-items: center; padding: 0 12px;
                          background: var(--mud-palette-primary); color: var(--mud-palette-primary-text);
                          font-size: .8125rem; letter-spacing: .01em; text-transform: none; }
.ffs-dense[b-y8sn4qam3j]  .ffs-caret { color: var(--mud-palette-text-primary); }
/* /Components/Fas/FasKpiCard.razor.rz.scp.css */
/* FasKpiCard v2 scoped styles (kpiv2 10/23). Only the card's own plain elements live here (UI Standard rule 2); the Mud roots
   (the tooltip root, the MudPaper, the button or div, the label, value, line and icon) are styled in site.css, keyed on fkc-*,
   because a scoped sheet cannot reach a child component's root. No colour here: the accent is the site.css --fkc-accent. */
.fkc-body[b-eyraeie1gv] { display: flex; flex-direction: column; gap: 4px; }
.fkc-top[b-eyraeie1gv] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fkc-sr-only[b-eyraeie1gv] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* /Components/Fas/FasMessageAmDialog.razor.rz.scp.css */
/* FasMessageAmDialog (msgsent 10/13, R. Nugent; Gate 1 signed off 10/13): the notes already sent about the site, above the
   box, each a card on one left edge the way the staff Event History shows a client note (stx-cnote-card): blue while it waits
   on F&S, green once acknowledged, with the same word in a pill. The list scrolls past a few notes so the box never leaves
   the window. The source tag is the Client Service Tracker's (vsp-msgam-tag) on tokens. Every colour is an existing token
   (standing rule 1); these elements are this component's own markup, so its scope reaches them inside the FasDialog body. */
.fma-sent[b-tg5nxdlhd0] { margin-bottom: 12px; }
.fma-sent-head[b-tg5nxdlhd0] { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fs-text-muted); margin-bottom: 6px; }
.fma-sent-list[b-tg5nxdlhd0] { display: flex; flex-direction: column; gap: 6px; max-height: 214px; overflow-y: auto; }
.fma-sent-note[b-tg5nxdlhd0] { border-left: 3px solid var(--fs-kpi-info-fg); border-radius: 0 6px 6px 0; background: var(--mud-palette-surface);
                 box-shadow: inset 0 0 0 1px var(--fs-tl-line); padding: 6px 9px; font-size: 13px; line-height: 1.4; }
.fma-sent-note.fma-sent-acked[b-tg5nxdlhd0] { border-left-color: var(--fs-kpi-success-fg); }
.fma-sent-meta[b-tg5nxdlhd0] { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11.5px; color: var(--fs-text-muted); margin-bottom: 2px; }
.fma-sent-state[b-tg5nxdlhd0] { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 18px;
                  padding: 0 8px; border-radius: 9px; color: var(--fs-status-required-fg); background: var(--fs-status-required-bg); }
.fma-sent-acked .fma-sent-state[b-tg5nxdlhd0] { color: var(--fs-status-completed-fg); background: var(--fs-status-completed-bg); }
.fma-sent-text[b-tg5nxdlhd0] { color: var(--mud-palette-text-primary); white-space: pre-line; overflow-wrap: anywhere; }
.fma-tag[b-tg5nxdlhd0] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mud-palette-primary);
           background: var(--fs-status-none-bg); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; }
.fma-tag[b-tg5nxdlhd0]  .mud-icon-root { width: 14px; height: 14px; font-size: 14px; }
/* ackreply 10/14 (R. Nugent; Gate 1 signed off 10/14): F&S's reply to the client's notes, signed F&S, on the acknowledged green
   with its pill filled, so it reads as the answer and not as another of the client's notes. Existing tokens only. */
.fma-sent-note.fma-sent-reply[b-tg5nxdlhd0] { border-left-color: var(--fs-kpi-success-fg); background: var(--fs-status-completed-bg); }
.fma-sent-reply .fma-sent-state[b-tg5nxdlhd0] { color: var(--mud-palette-white); background: var(--fs-kpi-success-fg); }

/* /Components/Fas/FasNoteBubble.razor.rz.scp.css */
/* FasNoteBubble (snowmod 9/18). Metrics are the .stm-note-ind / .stm-note-ind-count rules from
   site.css verbatim, so the promoted component renders pixel identical to the Service Tracker
   cells it replaces. Every colour is an existing --stm-* token (standing rule 1); no hex here. */
.fnb[b-bojemr6ev1] { background: none; border: 0; padding: 0; line-height: 1; cursor: pointer; }
.fnb:disabled[b-bojemr6ev1] { cursor: default; opacity: 0.55; }
.fnb-ind[b-bojemr6ev1] { position: relative; display: inline-block; color: var(--stm-rp-brand); font-size: 15px; line-height: 1; padding: 2px 8px 0 0; }
.fnb-count[b-bojemr6ev1] { position: absolute; top: -7px; right: -4px; background: var(--stm-status-pending); color: var(--stm-note-count-text); border-radius: 999px; padding: 1px 5px; font-size: 10px; font-weight: 700; line-height: 1.2; min-width: 15px; text-align: center; }
.fnb-none[b-bojemr6ev1] { color: var(--stm-note-muted); font-size: 12px; }
/* /Components/Fas/FasPhotoGrid.razor.rz.scp.css */
/* FasPhotoGrid (snowclient 9/8). Three tiles per row, 3:2 aspect, phase badge bottom left, verified
   mark top right, "+N" tile in the last slot. Colours are --fs-photo-* and KPI tokens only. */
/* tilesize 9/22: tiles are a readable fixed size, not a share of the panel. Three per row filled the
   full width of a wide drawer, so one check-in of photos swamped the event it belongs to. */
.fpg[b-odhj1e1p7r] { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 168px)); gap: 6px; margin-top: 8px; }
.fpg-tile[b-odhj1e1p7r] { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; margin: 0; border: 2px solid var(--fs-tl-blue); border-radius: 6px; overflow: hidden; background: var(--fs-photo-tile); cursor: pointer; }
.fpg-tile:focus-visible[b-odhj1e1p7r] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.fpg-tile img[b-odhj1e1p7r] { width: 100%; height: 100%; object-fit: cover; display: block; }
.fpg-verified[b-odhj1e1p7r] { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--fs-tl-blue); box-shadow: 0 0 0 2px var(--mud-palette-surface); }
.fpg-phase[b-odhj1e1p7r] { position: absolute; left: 4px; bottom: 4px; font-size: 8px; font-weight: 700; letter-spacing: .03em; color: var(--fs-live-fg); padding: 1px 6px; border-radius: 3px; background: var(--fs-tl-neutral); }
.fpg-before[b-odhj1e1p7r]   { background: var(--fs-photo-before); }
.fpg-progress[b-odhj1e1p7r] { background: var(--fs-photo-progress); }
.fpg-after[b-odhj1e1p7r]    { background: var(--fs-photo-after); }
.fpg-more[b-odhj1e1p7r] { border-style: dashed; border-color: var(--fs-tl-line); background: var(--mud-palette-surface); color: var(--fs-text-secondary); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* docshare 10/15: a tile with an overlay (TileOverlay) sits in a cell, and the overlay takes its bottom left corner. What the
   overlay shows, and when, is the overlay's own (site.css .fshare-chip inside .fpg-cell). */
.fpg-cell[b-odhj1e1p7r] { position: relative; min-width: 0; }
.fpg-over[b-odhj1e1p7r] { position: absolute; left: 4px; bottom: 4px; display: flex; gap: 3px; }
/* /Components/Fas/FasPhotoLightbox.razor.rz.scp.css */
/* FasPhotoLightbox (lightbox 9/22, one viewer 9/30). The snow viewer's numbers, verbatim, moved here from the two
   inline style blocks and the .stl-* section of site.css. The window is our own element, so every rule below
   is scoped; the Mud icon buttons are children and are reached with ::deep. Colours are --fs-lb-* and
   --fs-photo-* tokens only (standing rule 1). */
.fas-lb-win[b-c5p1dkdz78] { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--fs-lb-bg); color: var(--fs-lb-fg); outline: none; --fas-lb-reserve: 430px; --fas-lb-details-w: 250px; }
.fas-lb-narrow[b-c5p1dkdz78] { --fas-lb-reserve: 340px; --fas-lb-details-w: 240px; }   /* the map (pagebar 9/23) */
.fas-lb-plain[b-c5p1dkdz78] { --fas-lb-reserve: 150px; }                                 /* no details panel: the arrows only */

.fas-lb-top[b-c5p1dkdz78] { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; }
.fas-lb-meta[b-c5p1dkdz78] { font-size: 13px; min-width: 0; }
.fas-lb-caption[b-c5p1dkdz78] { opacity: .85; margin-left: 12px; }
.fas-lb-when[b-c5p1dkdz78] { opacity: .6; margin-left: 12px; }
.fas-lb-ok[b-c5p1dkdz78] { color: var(--fs-lb-ok); font-weight: 700; }
.fas-lb-meta .fas-lb-ok[b-c5p1dkdz78] { margin-left: 12px; }
.fas-lb-tools[b-c5p1dkdz78] { display: flex; align-items: center; gap: 10px; flex: none; }
.fas-lb-tools[b-c5p1dkdz78]  .fas-lb-open { font-size: 13px; opacity: .85; }

.fas-lb-stage[b-c5p1dkdz78] { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 10px 18px; }
.fas-lb-prev[b-c5p1dkdz78]  .fas-lb-arrow, .fas-lb-next[b-c5p1dkdz78]  .fas-lb-arrow { background: var(--fs-lb-btn); }
.fas-lb-img[b-c5p1dkdz78] { max-width: calc(100% - var(--fas-lb-reserve)); max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: var(--fs-lb-shadow); transition: transform .15s ease; }
.fas-lb-r90[b-c5p1dkdz78]  { transform: rotate(90deg); }
.fas-lb-r180[b-c5p1dkdz78] { transform: rotate(180deg); }
.fas-lb-r270[b-c5p1dkdz78] { transform: rotate(270deg); }

.fas-lb-details[b-c5p1dkdz78] { width: var(--fas-lb-details-w); max-width: 30vw; align-self: stretch; max-height: 100%; overflow: auto; background: var(--fs-lb-panel); border: 1px solid var(--fs-lb-panel-line); border-radius: 8px; padding: 14px; }
.fas-lb-dt[b-c5p1dkdz78] { font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.fas-lb-dt-notes[b-c5p1dkdz78] { font-size: 12px; margin: 6px 0 4px; }
.fas-lb-drow[b-c5p1dkdz78] { margin-bottom: 10px; }
.fas-lb-phase[b-c5p1dkdz78] { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 10px; color: var(--fs-lb-fg); background: var(--fs-photo-after); }
.fas-lb-before[b-c5p1dkdz78]   { background: var(--fs-photo-before); }
.fas-lb-progress[b-c5p1dkdz78] { background: var(--fs-photo-progress); }
.fas-lb-after[b-c5p1dkdz78]    { background: var(--fs-photo-after); }
.fas-lb-dl[b-c5p1dkdz78] { font-size: 12px; line-height: 1.6; }
.fas-lb-k[b-c5p1dkdz78] { opacity: .6; }
.fas-lb-v[b-c5p1dkdz78] { margin-bottom: 8px; }
.fas-lb-none[b-c5p1dkdz78] { font-size: 12px; opacity: .55; }
.fas-lb-notes[b-c5p1dkdz78] { font-size: 12px; line-height: 1.5; white-space: pre-line; }

/* A phone, or a tablet held upright: no room beside the photo, so it goes full width, the arrows under it, then the details. */
@media (max-width: 599.98px), (max-width: 959.98px) and (orientation: portrait) {
    .fas-lb-top[b-c5p1dkdz78] { flex-wrap: wrap; gap: 6px 12px; }
    .fas-lb-stage[b-c5p1dkdz78] { flex-wrap: wrap; align-content: flex-start; overflow-y: auto; }
    .fas-lb-img[b-c5p1dkdz78] { order: 1; flex: 0 0 100%; max-width: 100%; max-height: 60vh; }
    .fas-lb-prev[b-c5p1dkdz78] { order: 2; }
    .fas-lb-next[b-c5p1dkdz78] { order: 3; }
    .fas-lb-details[b-c5p1dkdz78] { order: 4; flex: 0 0 100%; width: auto; max-width: none; max-height: none; align-self: auto; overflow: visible; }
}
/* /Components/Fas/FasProposalDialog.razor.rz.scp.css */
/* FasProposalDialog (props 10/5). Every element styled here is declared in that file, so a scoped
   sheet reaches it even though it sits inside FasDialog's ChildContent. The shell's own chrome is
   FasDialog's and is not touched here. Tokens only, no hex (standing rule 1). */

.fpd[b-jw28mkedml] { width: 100%; border-collapse: collapse; }
.fpd th[b-jw28mkedml], .fpd td[b-jw28mkedml] { padding: 7px 4px; text-align: left; font-size: 12.5px; line-height: 1.35;
                   border-bottom: 1px solid var(--fs-tl-line); }
.fpd thead th[b-jw28mkedml] { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
                color: var(--fs-text-muted); }
.fpd tbody td[b-jw28mkedml] { color: var(--fs-text-secondary); }
.fpd tbody tr:last-child td[b-jw28mkedml] { border-bottom: 0; }

/* D6: a declined proposal is listed but dimmed, and is not counted as available. */
.fpd tbody tr.fpd-off[b-jw28mkedml] { opacity: .55; }

.fpd .fpd-num[b-jw28mkedml] { font-weight: 700; color: var(--mud-palette-text-primary); }
.fpd th.fpd-amt[b-jw28mkedml], .fpd td.fpd-amt[b-jw28mkedml] { text-align: right; }
.fpd td.fpd-amt[b-jw28mkedml] { font-weight: 700; white-space: nowrap; }
.fpd .fpd-date[b-jw28mkedml] { color: var(--fs-text-muted); white-space: nowrap; }

.fpd-foot[b-jw28mkedml] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-gap-md);
            margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--mud-palette-lines-default);
            font-size: 11.5px; color: var(--fs-text-muted); }
.fpd-foot b[b-jw28mkedml] { color: var(--fs-text-secondary); }

.fpd-empty[b-jw28mkedml] { padding: 22px 4px; text-align: center; font-size: 12.5px; color: var(--fs-text-muted); }
/* /Components/Fas/FasScopeToggle.razor.rz.scp.css */
/* FasScopeToggle (wotrack 9/29). Metrics follow the .fsp pill so the In Scope cell and the
   Status cell sit on the same baseline in a grid row. Colours are existing --fs-status-*
   tokens and --mud-palette-lines-default: no new hex (standing rule 1), and no red on No
   (SCP-3). Unset is outlined rather than filled so it can never be misread as No (SCP-2).
   fix1 10/7: fsco, not fst, so FasSectionToggle's global fst rules in site.css stop reaching it. */

.fsco[b-k5sg3htrpr] { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px;
       font-weight: 600; white-space: nowrap; line-height: 1.5; border: 1px solid transparent; }

.fsco-yes[b-k5sg3htrpr]   { background: var(--fs-status-completed-bg); color: var(--fs-status-completed-fg); }
.fsco-no[b-k5sg3htrpr]    { background: var(--fs-status-none-bg);      color: var(--fs-status-none-fg); }
.fsco-unset[b-k5sg3htrpr] { background: transparent; color: var(--fs-text-muted);
             border: 1px dashed var(--mud-palette-lines-default); font-weight: 500; }
/* /Components/Fas/FasSnowStatusForm.razor.rz.scp.css */
/* FasSnowStatusForm scoped styles (snowma 8/27). Layout only; field chrome is Mud's. tagtmrw 10/28: the Tag for Tomorrow switch's two
   rules went with it (SnowTagTomorrow). */
.fsf-grid[b-n3l6asl7vg] { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--fs-gap-md); align-items: start; }
.fsf-field[b-n3l6asl7vg] { min-width: 0; }
.fsf-comment-row[b-n3l6asl7vg] { display: flex; gap: var(--fs-gap-md); margin-top: var(--fs-gap-sm); align-items: flex-start; flex-wrap: wrap; }
.fsf-template[b-n3l6asl7vg] { flex: 0 0 220px; }
.fsf-comment[b-n3l6asl7vg] { flex: 1 1 320px; }
/* fitdlg 10/26: on a phone the template takes the row, as the fields above it do, rather than keeping 220px beside a comment that
   has already wrapped under it. */
@media (max-width: 720px) {
    .fsf-template[b-n3l6asl7vg] { flex: 1 1 100%; }
}

/* /Components/Fas/FasStatusPill.razor.rz.scp.css */
/* FasStatusPill (snowclient 9/8). Metrics are the retired .stm-pill rule verbatim; every colour is a
   --fs-status-* token (standing rule 1). */
.fsp[b-jy8lf4jy6b] { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.fsp-completed[b-jy8lf4jy6b] { background: var(--fs-status-completed-bg); color: var(--fs-status-completed-fg); }
.fsp-followup[b-jy8lf4jy6b]  { background: var(--fs-status-followup-bg);  color: var(--fs-status-followup-fg); }
.fsp-problem[b-jy8lf4jy6b]   { background: var(--fs-status-problem-bg);   color: var(--fs-status-problem-fg); }
.fsp-required[b-jy8lf4jy6b]  { background: var(--fs-status-required-bg);  color: var(--fs-status-required-fg); }
.fsp-none[b-jy8lf4jy6b]      { background: var(--fs-status-none-bg);      color: var(--fs-status-none-fg); }
/* /Components/Fas/FasSurveyLegend.razor.rz.scp.css */
/* FasSurveyLegend (9/15). The SnowMapsCanvas .scv-svy / .scv-box rules of 9/11, renamed and moved here so the
   Snow Tracker map and the Service Tracker Map draw the one legend. Tokens only (standing rule 1); no hex. */

.fsl-label[b-4t2zdfeumx] { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--fs-text-muted); margin-left: 14px; }

/* Every chip is a filter button. The letter box already carries the rating colour, so the pressed state only
   has to read as pressed: a rule, a surface and bolder text. */
.fsl-chip[b-4t2zdfeumx] { display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; background: transparent; font: inherit; font-size: 12px;
            color: var(--fs-text-secondary); padding: 2px 9px; border-radius: 999px; cursor: pointer; }
.fsl-chip:hover[b-4t2zdfeumx] { border-color: var(--fs-tl-line); background: var(--mud-palette-surface); }
.fsl-chip:focus-visible[b-4t2zdfeumx] { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.fsl-n[b-4t2zdfeumx] { font-weight: 700; color: var(--fs-text-muted); margin-left: 3px; }
/* A rating with nothing in view stays clickable, but reads as empty so the eye skips past it. */
.fsl-zero[b-4t2zdfeumx] { opacity: .45; }
.fsl-clear[b-4t2zdfeumx] { border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: var(--fs-text-secondary); font: inherit;
             font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: var(--fs-radius-md); cursor: pointer; }
.fsl-clear:focus-visible[b-4t2zdfeumx] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* The rating square inside each chip is the global .fas-svy-box in site.css, the same rule the map popups use,
   so the legend is recognisably the object the pin draws. Only the chip around it is styled here. */

/* Chips carry their colour at rest, not only when pressed (9/11, R. Nugent): the row exists to be scanned, and
   a reader who came to find the reds should not have to read seven grey labels first. Each chip publishes its
   own ink, ground and rule as local properties and the shared rules below read them, so the pressed state is
   one rule serving seven ratings. Same shade and outline pairing the KPI cards use for severity. */
.fsl-svy-r[b-4t2zdfeumx]  { --fsl-fg: var(--fs-svy-r-fg);  --fsl-bg: var(--fs-svy-r-bg);  --fsl-line: var(--fs-svy-r); }
.fsl-svy-y[b-4t2zdfeumx]  { --fsl-fg: var(--fs-svy-y-fg);  --fsl-bg: var(--fs-svy-y-bg);  --fsl-line: var(--fs-svy-y); }
.fsl-svy-g[b-4t2zdfeumx]  { --fsl-fg: var(--fs-svy-g-fg);  --fsl-bg: var(--fs-svy-g-bg);  --fsl-line: var(--fs-svy-g); }
.fsl-svy-na[b-4t2zdfeumx] { --fsl-fg: var(--fs-svy-na-fg); --fsl-bg: var(--fs-svy-na-bg); --fsl-line: var(--fs-svy-na); }
.fsl-svy-iv[b-4t2zdfeumx] { --fsl-fg: var(--fs-svy-iv-fg); --fsl-bg: var(--fs-svy-iv-bg); --fsl-line: var(--fs-svy-iv); }
.fsl-svy-ot[b-4t2zdfeumx] { --fsl-fg: var(--fs-svy-ot-fg); --fsl-bg: var(--fs-svy-ot-bg); --fsl-line: var(--fs-svy-ot); }
.fsl-svy-no[b-4t2zdfeumx] { --fsl-fg: var(--fs-svy-no-fg); --fsl-bg: var(--fs-svy-no-bg); --fsl-line: var(--mud-palette-lines-default); }

.fsl-chip[class*="fsl-svy-"][b-4t2zdfeumx] { color: var(--fsl-fg); }
.fsl-chip[class*="fsl-svy-"] .fsl-n[b-4t2zdfeumx] { color: var(--fsl-fg); opacity: .75; }
.fsl-chip[class*="fsl-svy-"]:hover[b-4t2zdfeumx] { border-color: var(--fsl-line); background: var(--fsl-bg); }
/* Pressed: the chip fills with its own tint and takes a solid rule in its own colour, so the one chip the reader
   chose is the only one that reads as a button rather than a label. */
.fsl-chip[class*="fsl-svy-"].fsl-on[b-4t2zdfeumx] { border-color: var(--fsl-line); background: var(--fsl-bg); color: var(--fsl-fg); font-weight: 700; }
.fsl-chip[class*="fsl-svy-"].fsl-on .fsl-n[b-4t2zdfeumx] { color: var(--fsl-fg); opacity: 1; }
.fsl-chip[class*="fsl-svy-"]:focus-visible[b-4t2zdfeumx] { outline: 2px solid var(--fsl-line); outline-offset: 1px; }
/* /Components/Fas/FasTimeline.razor.rz.scp.css */
/* FasTimeline container (snowclient 9/8). Items own their own geometry; the container only stacks. */
.ftl[b-zdb0j0z4wg] { display: flex; flex-direction: column; padding: 2px 0 0; }
/* /Components/Fas/FasTimelineItem.razor.rz.scp.css */
/* FasTimelineItem (snowclient 9/8). Geometry: a 14px rail with the dot at the top and a 2px
   connector that runs to the next item; the last item has no connector. Type sizes follow the
   Mud caption / body2 ramp already used across the snow screens. */
.fti[b-3xywbwvfpb] { display: flex; gap: 10px; position: relative; padding: 0 0 14px; }
.fti-rail[b-3xywbwvfpb] { flex: none; width: 14px; display: flex; flex-direction: column; align-items: center; }
.fti-dot[b-3xywbwvfpb] { display: block; width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; background: var(--fs-tl-neutral); box-shadow: 0 0 0 2px var(--mud-palette-surface); }
.fti-rail[b-3xywbwvfpb]::after { content: ""; flex: 1; width: 2px; margin-top: 4px; background: var(--fs-tl-line); }
.fti-last .fti-rail[b-3xywbwvfpb]::after { display: none; }
.fti-last[b-3xywbwvfpb] { padding-bottom: 2px; }
.fti-main[b-3xywbwvfpb] { flex: 1; min-width: 0; }
.fti-head[b-3xywbwvfpb] { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fti-title[b-3xywbwvfpb] { font-size: 13px; font-weight: 700; line-height: 1.4; display: inline-flex; align-items: center; gap: 4px; }
.fti-icon[b-3xywbwvfpb] { display: inline-flex; font-size: 15px; line-height: 1; }
.fti-icon[b-3xywbwvfpb]  .mud-icon-root { font-size: 15px; width: 15px; height: 15px; }
.fti-meta[b-3xywbwvfpb] { flex: none; font-size: 11px; font-weight: 600; color: var(--fs-text-muted); white-space: nowrap; }
.fti-body[b-3xywbwvfpb] { font-size: 12px; line-height: 1.5; color: var(--fs-text-secondary); margin-top: 2px; }
.fti-when[b-3xywbwvfpb] { font-weight: 600; color: var(--fs-text-secondary); }
.fti-sep[b-3xywbwvfpb] { color: var(--fs-text-muted); }
.fti-amber .fti-dot[b-3xywbwvfpb]   { background: var(--fs-tl-amber); }
.fti-blue .fti-dot[b-3xywbwvfpb]    { background: var(--fs-tl-blue); }
.fti-green .fti-dot[b-3xywbwvfpb]   { background: var(--fs-tl-green); }
.fti-red .fti-dot[b-3xywbwvfpb]     { background: var(--fs-tl-red); }
.fti-neutral .fti-dot[b-3xywbwvfpb] { background: var(--fs-tl-neutral); }
.fti-amber .fti-title[b-3xywbwvfpb]   { color: var(--fs-tl-amber); }
.fti-blue .fti-title[b-3xywbwvfpb]    { color: var(--fs-tl-blue); }
.fti-green .fti-title[b-3xywbwvfpb]   { color: var(--fs-tl-green); }
.fti-red .fti-title[b-3xywbwvfpb]     { color: var(--fs-tl-red); }
.fti-neutral .fti-title[b-3xywbwvfpb] { color: var(--fs-text-secondary); }
/* /Components/Fas/FasWoNumber.razor.rz.scp.css */
/* FasWoNumber (clientwo 11/01): the linked work order number. Tokens only. */
.fwn[b-jv52nneh4t] { display: inline-flex; align-items: center; gap: 3px; color: var(--mud-palette-primary); text-decoration: none; }
.fwn:hover[b-jv52nneh4t] { text-decoration: underline; }
.fwn-ico[b-jv52nneh4t] { display: inline-flex; }
.fwn-ico[b-jv52nneh4t]  .mud-icon-root { font-size: 14px; }
/* /Components/Fas/FasWorkOrderTable.razor.rz.scp.css */
/* FasWorkOrderTable (wotrack 9/29). Only elements THIS file declares are styled here; the
   few rules that must reach markup MudTable generates live in site.css under .fwo-grid,
   because a scope attribute does not attach to a child component's rendered elements.
   Every colour is an existing --fs-* or --mud-palette-* token: zero new hex (standing rule 1). */

.fwo[b-kyb0m2ftdl] { display: flex; flex-direction: column; gap: var(--fs-gap-sm); }

.fwo-chev[b-kyb0m2ftdl] { display: inline-block; width: 16px; text-align: center; font-weight: 700;
            color: var(--fs-text-muted); }
.fwo-wo[b-kyb0m2ftdl] { font-weight: 700; }
.fwo-muted[b-kyb0m2ftdl] { font-size: 11px; color: var(--fs-text-muted); }
.fwo-warn[b-kyb0m2ftdl] { font-size: 11px; font-weight: 600; color: var(--fs-warn-text); }

/* WO-5: two lines in the grid, the whole thing in the expanded row. The max-width is gone
   because table-layout: fixed now owns the column width (site.css .fwo-grid block); the
   clamp alone decides the height. Vendor and Assigned AM share it so one long company
   name cannot ladder four lines deep and set the height of every cell in the row. */
.fwo-scope[b-kyb0m2ftdl], .fwo-clamp2[b-kyb0m2ftdl] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
             overflow: hidden; line-height: 1.35; }

/* Empty, error and cap states. */
.fwo-state[b-kyb0m2ftdl] { padding: 28px 16px; text-align: center; }
.fwo-state-title[b-kyb0m2ftdl] { font-size: 14px; font-weight: 700; color: var(--fs-text-secondary); }
.fwo-state-sub[b-kyb0m2ftdl] { font-size: 12px; color: var(--fs-text-muted); margin-top: 4px; }
.fwo-state-error .fwo-state-title[b-kyb0m2ftdl] { color: var(--fs-warn-text); }
.fwo-note[b-kyb0m2ftdl] { font-size: 11px; color: var(--fs-text-muted); font-style: italic; padding: 0 4px; }

/* Expanded row (EXP-2): details on the left, the facts panel on the right. */
.fwo-exp-cell[b-kyb0m2ftdl] { padding: 0; background: var(--fs-rowexp-bg); }
.fwo-exp[b-kyb0m2ftdl] { display: grid; grid-template-columns: 1fr 320px; gap: var(--fs-gap-lg);
           padding: 14px 16px; align-items: start; }
.fwo-exp-main[b-kyb0m2ftdl] { min-width: 0; }
.fwo-exp-head[b-kyb0m2ftdl] { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
                font-weight: 700; color: var(--fs-text-secondary); margin: 10px 0 4px; }
.fwo-exp-head:first-child[b-kyb0m2ftdl] { margin-top: 0; }
.fwo-exp-tag[b-kyb0m2ftdl] { text-transform: none; letter-spacing: 0; font-weight: 500; font-style: italic;
               color: var(--fs-text-muted); margin-left: 6px; }
.fwo-exp-body[b-kyb0m2ftdl] { font-size: 13px; color: var(--fs-text-secondary); line-height: 1.45; }
.fwo-rtf[b-kyb0m2ftdl] { max-height: 240px; overflow: auto; }

.fwo-facts[b-kyb0m2ftdl] { border: 1px solid var(--mud-palette-lines-default); border-radius: var(--fs-radius-md);
             padding: 10px 12px; background: var(--mud-palette-surface); }
.fwo-fact[b-kyb0m2ftdl] { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12px; }
.fwo-fact + .fwo-fact[b-kyb0m2ftdl] { border-top: 1px solid var(--mud-palette-lines-default); }
.fwo-fact-label[b-kyb0m2ftdl] { color: var(--fs-text-muted); white-space: nowrap; }
.fwo-fact-value[b-kyb0m2ftdl] { color: var(--fs-text-secondary); font-weight: 600; text-align: right; }

/* props 10/5: the Proposals button. The list that used to sit in the facts panel moved into
   FasProposalDialog; the panel keeps only the "N available" count. The badge counts PENDING
   proposals (EXP-4) and goes grey when there are none, which is also when the button disables. */
.fwp-btn[b-kyb0m2ftdl] { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px;
           background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-primary);
           color: var(--mud-palette-primary); border-radius: var(--fs-radius-md);
           padding: 7px 14px; font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; }
.fwp-btn:hover[b-kyb0m2ftdl] { background: var(--fs-chip-bg); }
.fwp-btn:focus-visible[b-kyb0m2ftdl] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.fwp-btn:disabled[b-kyb0m2ftdl] { border-color: var(--fs-tl-line); color: var(--fs-text-muted);
                    background: var(--mud-palette-surface); cursor: not-allowed; }
.fwp-count[b-kyb0m2ftdl] { background: var(--fs-status-required-bg); color: var(--fs-status-required-fg);
             border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.fwp-count-zero[b-kyb0m2ftdl] { background: var(--fs-status-none-bg); color: var(--fs-status-none-fg); }
/* /Components/Fas/FasZone.razor.rz.scp.css */
/* FasZone scoped styles (addsite 9/29): the zone chrome SnowMassAssignDialog carried as .smd-zone and
   friends, moved here unchanged so every dialog draws its zones from one sheet. Colours read tokens only;
   the pill's ink is --fs-on-tertiary from the :root block in site.css. The buttons a consumer places in
   Actions are global .fas-btn buttons, so nothing here needs to reach into them. */
.fz[b-7yyhfj5onz] { border: 1px solid var(--mud-palette-lines-default); border-radius: var(--fs-radius-md); padding: 10px 12px; margin-bottom: var(--fs-gap-md); }
.fz-head[b-7yyhfj5onz] { display: flex; align-items: center; gap: var(--fs-gap-sm); font-size: 11px; font-weight: 800; letter-spacing: .4px; color: var(--mud-palette-text-primary); margin-bottom: 8px; }
.fz-n[b-7yyhfj5onz] { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); font-size: 10px; }
.fz-hint[b-7yyhfj5onz] { font-weight: 500; color: var(--mud-palette-text-secondary); text-transform: none; letter-spacing: 0; }
.fz-count[b-7yyhfj5onz] { background: var(--mud-palette-tertiary); color: var(--fs-on-tertiary); border-radius: 999px; padding: 1px 9px; font-size: 10.5px; }
/* wo2 10/6 (R. Nugent): the count pill's two optional tones (CountClass), first used by the Work Orders window. Alert is the
   Problem pill's red, for open corrective work; quiet is the None pill's grey, for an empty count. */
.fz-count.fz-count-alert[b-7yyhfj5onz] { background: var(--fs-status-problem-bg); color: var(--fs-status-problem-fg); }
.fz-count.fz-count-quiet[b-7yyhfj5onz] { background: var(--fs-status-none-bg); color: var(--fs-status-none-fg); }
.fz-actions[b-7yyhfj5onz] { margin-left: auto; display: flex; gap: 6px; }

/* /Components/IntegrationWorkOrderPanel.razor.rz.scp.css */
/* IntegrationWorkOrderPanel (e50 step 4, 10/30): what MudGrid and MudStack do not carry. Tokens only. */
.iwp-lbl[b-fg6scp29b3] { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--fs-text-muted); }
.iwp-gap[b-fg6scp29b3] { margin-top: var(--fs-gap-md); }
.iwp-mute[b-fg6scp29b3] { color: var(--fs-text-muted); font-size: 13px; }
.iwp-rec[b-fg6scp29b3] { font-size: 13px; }
/* e50 notes 10/30: the activity timeline (notes and status changes). Client lines take the client note tint. */
.iwp-act[b-fg6scp29b3] { border: 1px solid var(--fs-tl-line); border-left: 4px solid var(--fs-tl-line); border-radius: var(--fs-radius-md); padding: var(--fs-gap-sm); }
.iwp-act-client[b-fg6scp29b3] { border-left-color: var(--fs-note-client); background: var(--fs-note-client-bg); }
.iwp-act-meta[b-fg6scp29b3] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-gap-sm); margin-bottom: 4px; }
.iwp-act-who[b-fg6scp29b3] { font-size: 13px; font-weight: 600; }
.iwp-act-text[b-fg6scp29b3] { font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
/* e50 D13 10/30: the acknowledge box and the NEW mark on an unacknowledged client note. */
.iwp-ack[b-fg6scp29b3] { border: 1px solid var(--fs-note-client); border-radius: var(--fs-radius-md); padding: var(--fs-gap-sm); background: var(--fs-note-client-bg); }
.iwp-new[b-fg6scp29b3] { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--mud-palette-error-text); background: var(--mud-palette-error); border-radius: var(--fs-radius-md); padding: 0 6px; }
/* /Components/ServiceTrackerKpiRow.razor.rz.scp.css */
/* ServiceTrackerKpiRow scoped styles (stbar 11/02). Layout only, no colour: the cards are FasKpiCard. The columns and the 16px gutter
   are MudGrid's and site.css's (keyed on stkr). What Mud's grid leaves out is here, on the cell each card sits in, the one element
   of the component's own a scoped sheet can reach: it fills its MudItem, so a line's cards stand equally tall (SnowKpiRow's skr-cell). */
.stkr-cell[b-220wn5xnjp] { height: 100%; }
/* /Components/ServiceTrackerServiceIssueDialog.razor.rz.scp.css */
/* Work Order Tracking bar (wotrack 9/29). Scoped, because these elements are declared in
   THIS file even though FasDialog renders them inside its body slot, so the scope attribute
   does attach. The legacy .vsp-issue-* inline <style> block is untouched and unrelated: it
   only renders when the flag is OFF. Tokens only, no hex (standing rule 1). */
.stwo-bar[b-5exxg0tedp] { display: flex; align-items: center; justify-content: space-between;
            gap: var(--fs-gap-md); margin: var(--fs-gap-md) 0 var(--fs-gap-sm); }
.stwo-count[b-5exxg0tedp] { font-size: 12px; font-weight: 600; color: var(--fs-text-muted); }

/* Render-fault panel (wotrack 9/30). Deliberately plain markup and no FasDialog: if the
   shell itself were the thing throwing, drawing another one here would throw again. */
.stwo-fault[b-5exxg0tedp] { position: fixed; inset: 0; z-index: 1300; display: flex; flex-direction: column;
              align-items: center; justify-content: center; gap: var(--fs-gap-sm);
              background: var(--fs-scrim); text-align: center; }
.stwo-fault-title[b-5exxg0tedp] { font-size: 16px; font-weight: 700; color: var(--mud-palette-primary-text); }
.stwo-fault-sub[b-5exxg0tedp] { font-size: 13px; color: var(--mud-palette-primary-text); opacity: .85; }
.stwo-fault-btn[b-5exxg0tedp] { margin-top: var(--fs-gap-sm); border: 0; border-radius: var(--fs-radius-md);
                  padding: 8px 18px; font-size: 13px; font-weight: 700; cursor: pointer;
                  background: var(--mud-palette-surface); color: var(--fs-text-secondary); }
/* /Components/SnowAddDocumentsDialog.razor.rz.scp.css */
/* adddocs 10/15 (R. Nugent, signed off 10/15): the plain lines of the Add documents window. Tokens only. The saved notice is
   green, as the signed off picture shows, on the done tokens the Work Orders door's tag reads (--fs-door-done-*). The Mud parts
   (the description field and the inbox icon) are styled in site.css under sad-, because a Mud root takes no scoped styles. */
.sad-notice[b-matu6v3vyc] { margin: 0 0 10px; padding: 7px 10px; font-size: 12.5px; font-weight: 600;
              color: var(--fs-door-done-fg); background: var(--fs-door-done-bg);
              border: 1px solid var(--fs-door-done-line); border-radius: var(--fs-radius-md); }
/* massinbox 10/16: the From the email and Not added lines moved to FasEmailFrom (site.css, fef-) when Mass Assign took them too. */
.sad-error[b-matu6v3vyc] { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--mud-palette-error); }
.sad-inbox[b-matu6v3vyc] { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; }

/* /Components/SnowAddSitesDialog.razor.rz.scp.css */
/* SnowAddSitesDialog scoped styles (addsite 9/29). The zone chrome is FasZone's, the buttons the global
   .fas-btn family, the busy, outcome, gate and summary blocks the global .fas-* dialog vocabulary in
   site.css; only the filter row and the map's preface live here. Colours read tokens. */
.sad-filters[b-254hjrb9l6] { display: flex; flex-wrap: wrap; gap: var(--fs-gap-md); }
/* FasFilterSelect and MudTextField are child components, so the widths reach their roots through ::deep,
   as Mass Assign's row does (massearch 9/21). */
.sad-filters[b-254hjrb9l6]  .sad-filter { flex: 1 1 210px; min-width: 180px; }
.sad-filters[b-254hjrb9l6]  .sad-filter-narrow { flex: 0 1 140px; min-width: 120px; }
.sad-pre[b-254hjrb9l6] { margin-bottom: var(--fs-gap-md); padding: 8px 12px; border-radius: var(--fs-radius-md); background: var(--mud-palette-background-gray); font-size: 12.5px; color: var(--mud-palette-text-primary); }


/* fitdlg 10/26 (R. Nugent; Gate 1 signed off 10/26): on a phone (as Mass Assign's list) each site keeps to one line and the table
   scrolls sideways inside its box. MudTable is a child component root, so its cells are reached with ::deep from sad-sites, this
   dialog's own div. */
@media (max-width: 720px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
    .sad-sites[b-254hjrb9l6]  .mud-table-root .mud-table-cell { white-space: nowrap; }
}
/* /Components/SnowClientWorkOrdersDialog.razor.rz.scp.css */
/* SnowClientWorkOrdersDialog scoped styles (clientwo 11/01, Julian). The client's read only Work Orders window. The list matches
   the staff window's (SnowWorkOrdersDialog.razor.css) and the activity lines match the integration panel's
   (IntegrationWorkOrderPanel.razor.css), on the same tokens; no hex. The table's root is a child component root, so its frame is
   reached through ::deep from .cwo; rows and cells are markup this dialog writes and carry this sheet's scope. */
.cwo-load[b-hofyv3pwxo] { display: flex; align-items: center; gap: 10px; padding: 18px 4px; font-size: 13px; color: var(--mud-palette-text-secondary); }
.cwo-empty[b-hofyv3pwxo] { font-size: 13px; color: var(--fs-text-muted); padding: 6px 2px; }
.cwo[b-hofyv3pwxo]  .cwo-list { border: 1px solid var(--fs-tl-line); border-radius: var(--fs-radius-md); overflow: hidden; }
.cwo-list th[b-hofyv3pwxo] { color: var(--fs-text-muted); }
.cwo-list td[b-hofyv3pwxo] { white-space: nowrap; }
.cwo-row[b-hofyv3pwxo] { cursor: pointer; }
.cwo-row:focus-visible[b-hofyv3pwxo] { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.cwo-list tr.cwo-sel td[b-hofyv3pwxo] { background: var(--fs-focus-row); }
.cwo-list tr.cwo-sel td:first-child[b-hofyv3pwxo] { box-shadow: inset 3px 0 0 var(--mud-palette-primary); }
.cwo-wo[b-hofyv3pwxo] { font-weight: 700; }
.cwo-list td.cwo-day[b-hofyv3pwxo] { font-weight: 700; color: var(--fs-status-problem-fg); }
.cwo-bill[b-hofyv3pwxo] { display: inline-flex; align-items: center; margin-left: 4px; padding: 1px 8px; border: 1px solid var(--fs-chip-line);
            border-radius: 999px; background: var(--fs-chip-bg); color: var(--fs-chip-fg); font-size: 10.5px; font-weight: 700;
            letter-spacing: .03em; vertical-align: middle; white-space: nowrap; }
.cwo-scope[b-hofyv3pwxo] { font-size: 13px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; padding: 9px 12px; border: 1px solid var(--fs-tl-line);
             border-radius: var(--fs-radius-md); background: var(--fs-rail-head-bg); margin-bottom: 12px; }
.cwo-lbl[b-hofyv3pwxo] { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--fs-text-muted); margin: 2px 0 6px; }
.cwo-gap[b-hofyv3pwxo] { margin-top: 14px; }
.cwo-acts[b-hofyv3pwxo] { display: flex; flex-direction: column; gap: 6px; }
.cwo-act[b-hofyv3pwxo] { border: 1px solid var(--fs-tl-line); border-left: 4px solid var(--fs-tl-line); border-radius: var(--fs-radius-md); padding: var(--fs-gap-sm); }
.cwo-act-client[b-hofyv3pwxo] { border-left-color: var(--fs-note-client); background: var(--fs-note-client-bg); }
.cwo-act-meta[b-hofyv3pwxo] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-gap-sm); margin-bottom: 4px; }
.cwo-act-who[b-hofyv3pwxo] { font-size: 13px; font-weight: 600; }
.cwo-act-text[b-hofyv3pwxo] { font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.cwo-mute[b-hofyv3pwxo] { font-size: 12px; color: var(--fs-text-muted); }
/* /Components/SnowFollowUpMeter.razor.rz.scp.css */
/* SnowFollowUpMeter scoped styles (kpiwo 10/23, Gate 1 signed off 10/23; on MudChip kpimud 10/23). Tokens only (standing rule
   1). The root is MudChip, a child component a scoped sheet cannot reach, so the pill itself (edge, ground, padding, the
   pressed and focus rings) is in site.css, keyed on sfu; this sheet styles the inside, from the meter's own span (sfu-in). The
   icon and the bar are Mud components, so their rules reach them with ::deep, and each names one class more than Mud's own,
   because the scoped bundle loads before Mud's sheet (a small chip sizes its icons with three). The track is Mud's ::before at
   its own .2 opacity. */
.sfu-in[b-6808o5aahy] { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }   /* skew 10/26: may be narrower than its content (below) */
.sfu-in[b-6808o5aahy]  .sfu-icon.sfu-icon { font-size: 16px; color: var(--fs-kpi-success-fg); }
.sfu-label[b-6808o5aahy] { font-size: 12px; font-weight: 700; color: var(--fs-text-secondary); white-space: nowrap; }
/* skew 10/26 (R. Nugent): when the line runs short the bar gives way first, from 110px down to 36px, so the meter fits a 360px phone.
   It kept 110px and drew 353px wide there, past the 340px the page has, and the whole page moved sideways. The words and the count
   keep their size, and with room to spare it draws exactly as before. The title box it sits in may narrow too (st-titlebox on the
   grid, stm-titlebox on the map). */
.sfu-in[b-6808o5aahy]  .sfu-bar.mud-progress-linear.horizontal { width: 110px; height: 6px; flex: 0 1 auto; min-width: 36px; }
.sfu-in[b-6808o5aahy]  .sfu-bar.mud-progress-linear::before { background-color: var(--fs-kpi-success-fg); }
.sfu-in[b-6808o5aahy]  .sfu-bar.mud-progress-linear .mud-progress-linear-bar { background-color: var(--fs-kpi-success-fg); }
.sfu-num[b-6808o5aahy] { font-size: 12px; font-weight: 600; color: var(--fs-text-muted); white-space: nowrap; }
/* /Components/SnowKpiRow.razor.rz.scp.css */
/* SnowKpiRow scoped styles (kpiwo 10/23; on MudGrid kpimud 10/23). Layout only, no colour: the cards are FasKpiCard. The
   columns and the gutter, 16px since kpiv2 10/23, are MudGrid and MudItem's own (the component's header). What Mud's grid
   leaves out is here, on the cell each card sits in, the one element of the component's own a scoped sheet can reach: a
   MudItem stretches to the tallest card in its line and the cell fills the MudItem, so a line's cards stand equally tall, as
   the row's CSS grid stood them. FasKpiCard v2 (kpiv2 10/23) fills the cell itself (.fkc-tip and .fkc-card, site.css). */
.skr-cell[b-yswqftl2f4] { height: 100%; }
/* /Components/SnowMassAssignDialog.razor.rz.scp.css */
/* SnowMassAssignDialog scoped styles (snowma 8/27). Field chrome is Mud's, buttons are the global
   .fas-btn family, colors read tokens. addsite 9/29: the zone chrome moved to FasZone and the gate,
   busy, outcome and summary rules to the .fas-* dialog vocabulary in site.css when Add Sites became
   their second consumer (rule of two); only the filter row is this dialog's own. */
.smd-filters[b-16jkjn88qb] { display: flex; flex-wrap: wrap; gap: var(--fs-gap-md); }
/* massearch 9/21: every control in this row is a CHILD COMPONENT (FasFilterSelect, MudSelect,
   MudTextField), and a scoped rule does not attach to a child component's root, so these two
   widths never actually reached anything -- the row has been falling back to each control's own
   sizing since it shipped. ::deep applies them from .smd-filters, which does carry this
   stylesheet's scope. Same house gotcha the Fas components root on a plain div to avoid. */
.smd-filters[b-16jkjn88qb]  .smd-filter { flex: 1 1 210px; min-width: 180px; }
.smd-filters[b-16jkjn88qb]  .smd-filter-narrow { flex: 0 1 140px; min-width: 120px; }
/* railhead 10/2: the Contact row at the foot of zone 1, FasCommStrip Compact; the strip's own rules are in site.css. */
.smd-vendor[b-16jkjn88qb] { margin-top: var(--fs-gap-md); padding-top: var(--fs-gap-sm); border-top: 1px solid var(--fs-tl-line); font-size: 13px; }
.smd-vendor-label[b-16jkjn88qb] { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fs-text-muted); }
.smd-vendor-name[b-16jkjn88qb] { font-weight: 600; }
.smd-vendor-hint[b-16jkjn88qb] { color: var(--fs-text-muted); }
.smd-vendor-note[b-16jkjn88qb] { margin-top: 4px; font-size: 12px; color: var(--fs-text-muted); }
/* massinbox 10/16: zone 3's From your inbox door, a mini button with the mail icon (the icon's size is in site.css). */
.smd-inbox[b-16jkjn88qb] { display: inline-flex; align-items: center; gap: 4px; }
/* sharebulk 10/16: Share all and Hide all in the Review table. The table is this dialog's own markup (BuildSummary), so it carries
   this sheet's scope even though FasConfirm draws it. */
.smd-share-btn + .smd-share-btn[b-16jkjn88qb] { margin-left: 6px; }
/* massdense 10/21 (R. Nugent, Gate 1 signed off 10/21 on Claude outputs/Mass-Assign-Select-Sites-Density-Gate1-2026-10-21.png): SELECT SITES at one
   line per site, about three times the rows in the same list. Mud's dense cells carry 40px of side padding, which pushed the
   table wider than the window, so names wrapped to three lines and PROBLEM hid behind a sideways scrollbar. The table and its
   cells are MudTable's parts, so every rule reaches them through ::deep from .smd-sites, this sheet's element, and names more
   classes than Mud's own rule does (this bundle loads before MudBlazor.min.css). Short columns take fixed widths and Account,
   City and Vendor share the rest; long text ends in an ellipsis and the cell's title shows it whole. Every heading keeps to one
   line, which retires massmove's STORE # rule. The checkbox icon is 18px but keeps Mud's own padding, so its click target stays
   26px, above the 24px minimum; the sort arrows drop to 14px to sit with the smaller headings. The short columns are as wide as
   their heading plus its sort arrow (measured: STORE # 85, ST 53, FOLLOW-UP 105, PROBLEM 92), so the arrow of the sorted column
   always shows; narrower, it was cut off. */
.smd-sites[b-16jkjn88qb]  table.mud-table-root { table-layout: fixed; width: 100%; }
.smd-sites[b-16jkjn88qb]  .mud-table-root .mud-table-row .mud-table-cell { padding: 3px 8px; }
.smd-sites[b-16jkjn88qb]  .mud-table-root .mud-table-body .mud-table-cell { font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smd-sites[b-16jkjn88qb]  .mud-table-root .mud-table-head .mud-table-cell { font-size: 10.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; }
.smd-sites[b-16jkjn88qb]  .mud-table-root .mud-table-head .mud-table-sort-label-icon { font-size: 14px; }
.smd-sites[b-16jkjn88qb]  .mud-table-root .mud-table-cell .mud-checkbox .mud-icon-root { font-size: 18px; }
.smd-sites[b-16jkjn88qb]  .mud-table-pagination .mud-table-pagination-toolbar { height: 38px; font-size: 12px; }
.smd-sites[b-16jkjn88qb]  col.smd-col-check { width: 34px; }
.smd-sites[b-16jkjn88qb]  col.smd-col-acct { width: 22%; }
.smd-sites[b-16jkjn88qb]  col.smd-col-store { width: 86px; }
.smd-sites[b-16jkjn88qb]  col.smd-col-city { width: 14%; }
.smd-sites[b-16jkjn88qb]  col.smd-col-st { width: 54px; }
.smd-sites[b-16jkjn88qb]  col.smd-col-vendor { width: 19%; }
.smd-sites[b-16jkjn88qb]  col.smd-col-status { width: 118px; }
.smd-sites[b-16jkjn88qb]  col.smd-col-fu { width: 106px; }
.smd-sites[b-16jkjn88qb]  col.smd-col-prob { width: 92px; }
/* billco 10/28 (Gate 1 signed off 10/28): OPEN WO, "2 · 1 billing" at 12px; Account, City and Vendor gave it three, two and three points. */
.smd-sites[b-16jkjn88qb]  col.smd-col-wo { width: 104px; }

/* massadd 10/26 (R. Nugent; Gate 1 signed off 10/26): the line in SELECT SITES naming the sites Add sites just added, on the done
   tokens as Add documents' saved notice; and an apply's result on top of the form, green when every site took it and every file
   landed, amber when any was skipped or failed. The lines inside are site.css's .fas-out family, as the result screen drew them. */
.smd-added[b-16jkjn88qb] { margin: 0 0 10px; padding: 7px 10px; font-size: 12.5px; font-weight: 600;
             color: var(--fs-door-done-fg); background: var(--fs-door-done-bg);
             border: 1px solid var(--fs-door-done-line); border-radius: var(--fs-radius-md); }
.smd-outcome[b-16jkjn88qb] { display: flex; align-items: flex-start; gap: var(--fs-gap-md); margin-bottom: var(--fs-gap-md); padding: 4px 8px 4px 12px;
               border: 1px solid var(--fs-door-done-line); border-radius: var(--fs-radius-md); background: var(--fs-door-done-bg); }
.smd-outcome.smd-outcome-warn[b-16jkjn88qb] { border-color: var(--fs-warn-border); background: var(--fs-warn-bg); }
.smd-outcome-lines[b-16jkjn88qb] { flex: 1 1 auto; min-width: 0; }
.smd-outcome-hide[b-16jkjn88qb] { flex: none; margin-top: 4px; }


/* fitdlg 10/26 (R. Nugent; Gate 1 signed off 10/26): on a phone (720px and under, or a short touch screen turned sideways, where
   the dialog fills the screen) the site list is one line per site. The columns size to what they hold rather than to the desktop
   shares above, so every value shows whole without a hover, and the table scrolls sideways inside its box, the main grid's way. */
@media (max-width: 720px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
    .smd-sites[b-16jkjn88qb]  table.mud-table-root { table-layout: auto; }
    .smd-sites[b-16jkjn88qb]  table.mud-table-root col[class] { width: auto; }
}

/* billco 10/28 (Gate 1 signed off 10/28 on Claude outputs/Snow-Tracker-Billing-WOs-and-Close-Out-Gate1-2026-10-28.png): WORK ORDERS under the
   form in ASSIGN VALUES. Its head is set as FasZone's (.fz-head, .fz-hint) so it reads as part of the zone; each switch sits on the chip
   tokens with what it does beside it, the second indented under the first it belongs to, and the which-work-orders choice under the first. */
.smd-wo[b-16jkjn88qb] { margin-top: var(--fs-gap-md); padding-top: var(--fs-gap-md); border-top: 1px solid var(--mud-palette-lines-default); }
.smd-wo-head[b-16jkjn88qb] { display: flex; align-items: center; gap: var(--fs-gap-sm); margin-bottom: 8px; font-size: 11px; font-weight: 800;
               letter-spacing: .4px; color: var(--mud-palette-text-primary); }
.smd-wo-hint[b-16jkjn88qb] { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mud-palette-text-secondary); }
.smd-close[b-16jkjn88qb] { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--fs-chip-line);
             border-radius: var(--fs-radius-md); background: var(--fs-chip-bg); }
.smd-close.smd-close-sub[b-16jkjn88qb] { margin-left: 28px; }
.smd-wo .smd-close:last-child[b-16jkjn88qb] { margin-bottom: 0; }
.smd-close-text[b-16jkjn88qb] { font-size: 12.5px; line-height: 1.45; color: var(--fs-text-secondary); padding-top: 6px; }
.smd-close-text b[b-16jkjn88qb] { color: var(--mud-palette-text-primary); }
.smd-close-pick[b-16jkjn88qb] { margin-top: 8px; max-width: 440px; }
.smd-wo-error[b-16jkjn88qb] { margin: 0 0 4px; }
/* /Components/SnowModifyStatusDialog.razor.rz.scp.css */
/* SnowModifyStatusDialog scoped styles (snowma 8/27). */
.smo-load[b-7osahrn0sb] { display: flex; align-items: center; gap: 10px; padding: 18px 4px; font-size: 13px; color: var(--mud-palette-text-secondary, #6B7280); }
.smo-locked[b-7osahrn0sb] { background: var(--fs-warn-bg); border: 1px solid var(--fs-warn-border); border-radius: var(--fs-radius-md); padding: 12px 14px; font-size: 13px; color: var(--mud-palette-text-primary, #111827); }
/* svyrow 9/14: latest survey + Open in Map on their own row above CURRENT. Wraps on a narrow dialog. */
.smo-info[b-7osahrn0sb] { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: var(--fs-gap-md); padding-bottom: var(--fs-gap-md); border-bottom: 1px solid var(--fs-tl-line); }
/* wodoor 10/9 (R. Nugent): the Work Orders door and Open in Map held together at the row's right end, and the door's count
   tag, colored as the grid's WO REC'D: red while any work order is open, green once every one is completed. */
.smo-doors[b-7osahrn0sb] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.smo-wo-chip[b-7osahrn0sb] { display: inline-block; margin-left: 2px; padding: 0 7px; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 17px;
               background: var(--fs-kpi-surface); color: var(--fs-text-secondary); }
.smo-wo-chip.smo-wo-open[b-7osahrn0sb] { background: var(--fs-door-open-bg); color: var(--fs-door-open-fg); }
.smo-wo-chip.smo-wo-done[b-7osahrn0sb] { background: var(--fs-door-done-bg); color: var(--fs-door-done-fg); }
/* tagtmrw 10/28: the Tag for Tomorrow door is off, as Save is, while someone else is in the site or this window is busy. */
.smo-doors button.fas-maplink:disabled[b-7osahrn0sb] { opacity: .5; cursor: default; filter: none; }
.smo-current[b-7osahrn0sb] { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--fs-gap-md); font-size: 12.5px; color: var(--mud-palette-text-primary, #111827); }
/* railhead 10/2: the VENDOR line, FasCommStrip Compact between the survey row and CURRENT. The label is CURRENT's pill; the
   strip's own rules are in site.css under FasCommStrip. */
.smo-vendor[b-7osahrn0sb] { margin-bottom: var(--fs-gap-md); font-size: 12.5px; color: var(--mud-palette-text-primary); }
.smo-vendor-name[b-7osahrn0sb] { font-weight: 600; }
.smo-cur-label[b-7osahrn0sb] { font-size: 10px; font-weight: 800; letter-spacing: .4px; color: var(--mud-palette-text-secondary, #6B7280); background: var(--mud-palette-background, #F9FAFB); border: 1px solid var(--mud-palette-lines-default, #E5E7EB); border-radius: 999px; padding: 1px 8px; }
.smo-error[b-7osahrn0sb] { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--mud-palette-error, #B91C1C); }

/* snowdocs 9/29: the DOCUMENTS zone's rules moved to site.css with FasDocDrop (docs1 10/1). */

/* Non-error outcome the user still has to read: the tag wrote to EM, but this grid
   reads the fasedw projection and only sees it after the next sync. */
.smo-notice[b-7osahrn0sb] { margin: 8px 0 0; padding: 7px 10px; font-size: 12.5px; font-weight: 600;
              color: var(--fs-chip-fg); background: var(--fs-chip-bg);
              border: 1px solid var(--fs-chip-line); border-radius: var(--fs-radius-md); }

/* ackmod 10/27 (R. Nugent; Gate 1 signed off 10/27): when Acknowledge opens this window, the client's note sits on top in the Event
   History's own card, the blue edge for the client and the green edge for the reply, on the --fs-kpi-* tokens the drawer's notes use.
   The button is a MudButton root, reached with ::deep, in the sentence case of the house buttons. */
.smo-cn[b-7osahrn0sb] { display: flex; flex-direction: column; gap: 10px; }
.smo-cn-card[b-7osahrn0sb] { border-left: 3px solid var(--fs-kpi-info-fg); background: var(--fs-kpi-info-bg); border-radius: 0 6px 6px 0; padding: 8px 12px; font-size: 13px; }
.smo-cn-card.smo-cn-reply[b-7osahrn0sb] { border-left-color: var(--fs-kpi-success-fg); background: var(--mud-palette-surface); }
.smo-cn-meta[b-7osahrn0sb] { font-size: 11.5px; color: var(--fs-kpi-sub); margin-bottom: 2px; }
.smo-cn-tag[b-7osahrn0sb] { font-weight: 700; letter-spacing: .04em; color: var(--fs-kpi-info-fg); }
.smo-cn-reply .smo-cn-tag[b-7osahrn0sb] { color: var(--fs-kpi-success-fg); }
.smo-cn-text[b-7osahrn0sb] { color: var(--mud-palette-text-primary); white-space: pre-line; overflow-wrap: anywhere; }
.smo-cn-acts[b-7osahrn0sb] { display: flex; justify-content: flex-end; }
.smo-cn-acts[b-7osahrn0sb]  .mud-button-root { text-transform: none; }
.smo-cn-done[b-7osahrn0sb] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--fs-kpi-success-fg); }

/* billco 10/28 (Gate 1 signed off 10/28): the earlier days a close-out also closes, said under the form before Save, on the chip tokens.
   The checkbox is a MudCheckBox root, reached with ::deep and set back by its own padding so its box lines up with the text. */
.smo-carry[b-7osahrn0sb] { margin: 4px 0 10px; padding: 10px 14px; border: 1px solid var(--fs-chip-line); border-radius: var(--fs-radius-md);
             background: var(--fs-chip-bg); font-size: 12.5px; line-height: 1.5; color: var(--fs-text-secondary); }
.smo-carry b[b-7osahrn0sb] { color: var(--mud-palette-text-primary); }
.smo-carry-left[b-7osahrn0sb] { margin-top: 4px; color: var(--fs-text-muted); }
.smo-carry[b-7osahrn0sb]  .mud-checkbox { margin-left: -10px; }
/* /Components/SnowSiteContextMenu.razor.rz.scp.css */
/* SnowSiteContextMenu scoped styles (snowma 8/27). */
.scm-backdrop[b-uarh88m9z4] { position: fixed; inset: 0; z-index: 1500; background: transparent; outline: none; }
.scm-menu[b-uarh88m9z4] { position: fixed; left: var(--scm-x); top: var(--scm-y); min-width: 190px; background: var(--mud-palette-surface, #fff); border: 1px solid var(--mud-palette-lines-default, #E5E7EB); border-radius: var(--fs-radius-md); box-shadow: var(--fs-shadow-dialog); padding: 6px; }
.scm-title[b-uarh88m9z4] { font-size: 10.5px; font-weight: 800; letter-spacing: .3px; color: var(--mud-palette-text-secondary, #6B7280); padding: 4px 8px 6px; border-bottom: 1px solid var(--mud-palette-lines-default, #E5E7EB); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.scm-item[b-uarh88m9z4] { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 6px; padding: 7px 9px; font-size: 13px; font-weight: 600; color: var(--mud-palette-text-primary, #111827); cursor: pointer; }
.scm-item:hover[b-uarh88m9z4] { background: var(--mud-palette-background, #F1F5F9); color: var(--mud-palette-primary, #12372E); }
/* /Components/SnowTagTomorrow.razor.rz.scp.css */
/* SnowTagTomorrow scoped styles (tagtmrw 10/28). Layout only: the window is FasConfirm's and the field is Mud's. The follow-up time sits
   between the question's detail and the note, spaced as FasConfirm spaces its note. */
.stt-time[b-edjy12wbs1] { margin-top: 12px; }
.stt-none[b-edjy12wbs1] { font-size: 12.5px; line-height: 1.5; color: var(--mud-palette-text-secondary); }
/* /Components/SnowWorkOrdersDialog.razor.rz.scp.css */
/* SnowWorkOrdersDialog scoped styles (wo 10/6, R. Nugent). The window, zones, document rows, drop zone, pills, footer
   buttons and outcome lines are house parts with their own rules (FasDialog, FasZone, FasDocRow, FasDocDrop, FasStatusPill,
   and .fas-btn, .fas-gate and .fas-out in site.css). These are the list, the field labels and the status strip, as the
   Gate 1 review rendered them, and every colour is a token. The rows and cells are markup this dialog writes, so they carry
   this sheet's scope even inside MudSimpleTable; the table's own root is a child component root, so its frame is reached
   through ::deep from .wom. Mud's cell rules (.mud-simple-table table * tr>td) count one class and three elements and load
   after the scoped bundle, so a cell rule here needs its class and the scope attribute to outrank them, which every one has. */
.wom-load[b-wrg5edxfhe] { display: flex; align-items: center; gap: 10px; padding: 18px 4px; font-size: 13px; color: var(--mud-palette-text-secondary); }
.wom-empty[b-wrg5edxfhe] { font-size: 13px; color: var(--fs-text-muted); padding: 6px 2px; }
.wom[b-wrg5edxfhe]  .wom-list { border: 1px solid var(--fs-tl-line); border-radius: var(--fs-radius-md); overflow: hidden; }
.wom-list th[b-wrg5edxfhe] { color: var(--fs-text-muted); }
.wom-list td[b-wrg5edxfhe] { white-space: nowrap; }
.wom-row[b-wrg5edxfhe] { cursor: pointer; }
.wom-row:focus-visible[b-wrg5edxfhe] { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.wom-list tr.wom-sel td[b-wrg5edxfhe] { background: var(--fs-focus-row); }
.wom-list tr.wom-sel td:first-child[b-wrg5edxfhe] { box-shadow: inset 3px 0 0 var(--mud-palette-primary); }
.wom-wo[b-wrg5edxfhe] { font-weight: 700; }
.wom-r[b-wrg5edxfhe] { text-align: right; }
.wom-c[b-wrg5edxfhe] { text-align: center; }
.wom-mute[b-wrg5edxfhe] { color: var(--fs-text-muted); font-weight: 500; }
.wom-lbl[b-wrg5edxfhe] { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--fs-text-muted); margin: 2px 0 4px; }
.wom-hint[b-wrg5edxfhe] { font-size: 12px; color: var(--fs-text-muted); padding-top: 22px; }
.wom-status[b-wrg5edxfhe] { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--fs-tl-line); border-radius: var(--fs-radius-md); background: var(--fs-rail-head-bg); }
.wom-status .wom-lbl[b-wrg5edxfhe] { margin: 0; }
/* wonote 10/14: a completed work order's completion note, on its own line under the status. */
.wom-done-note[b-wrg5edxfhe] { flex: 1 0 100%; font-size: 13px; line-height: 1.45; color: var(--mud-palette-text-primary); white-space: pre-line; overflow-wrap: anywhere; }
.wom-out[b-wrg5edxfhe] { margin: 10px 2px 0; }
/* emailwo 10/9 (R. Nugent, signed off 10/9): the FROM EMAIL block on a form filled in from an email, on the chip tokens; its checks
   green when they pass and on the warning tokens when they do not. The icons are MudIcon roots, so ::deep reaches them. */
.wom-src[b-wrg5edxfhe] { display: flex; flex-direction: column; gap: 5px; margin: 2px 0 12px; padding: 9px 12px; border: 1px solid var(--fs-chip-line);
           border-radius: var(--fs-radius-md); background: var(--fs-chip-bg); font-size: 12.5px; line-height: 1.45; color: var(--fs-text-secondary); }
.wom-src-head[b-wrg5edxfhe] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--fs-chip-fg); }
.wom-src-when[b-wrg5edxfhe] { font-weight: 600; letter-spacing: 0; color: var(--fs-text-muted); }
.wom-src-subj[b-wrg5edxfhe] { font-weight: 700; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.wom-src-checks[b-wrg5edxfhe] { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.wom-src-ok[b-wrg5edxfhe] { display: inline-flex; align-items: center; gap: 4px; color: var(--fs-status-completed-fg); font-weight: 600; }
.wom-src-warn[b-wrg5edxfhe] { display: flex; align-items: flex-start; gap: 6px; padding: 6px 9px; border: 1px solid var(--fs-warn-border); border-radius: 6px;
                background: var(--fs-warn-bg); color: var(--fs-warn-text); font-weight: 600; }
.wom-src[b-wrg5edxfhe]  .mud-icon-root { font-size: 16px; flex: none; }

/* wocarry 10/27 (R. Nugent: an open work order is carried to each next day until it is marked complete; Gate 1 signed off 10/27): the
   day a work order carried from an earlier day came in, in STILL OPEN FROM EARLIER DAYS' Received column, red as an open one reads. */
.wom-list td.wom-day[b-wrg5edxfhe] { font-weight: 700; color: var(--fs-status-problem-fg); }

/* billco 10/28 (Gate 1 signed off 10/28): a monthly billing work order's tag beside its number, and the line under its SCOPE / NOTES saying
   why it stays on its own day, on the chip tokens the FROM EMAIL block uses. */
.wom-bill[b-wrg5edxfhe] { display: inline-flex; align-items: center; margin-left: 4px; padding: 1px 8px; border: 1px solid var(--fs-chip-line);
            border-radius: 999px; background: var(--fs-chip-bg); color: var(--fs-chip-fg); font-size: 10.5px; font-weight: 700;
            letter-spacing: .03em; vertical-align: middle; white-space: nowrap; }
.wom-bill-note[b-wrg5edxfhe] { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 4px; padding: 8px 12px; border: 1px solid var(--fs-chip-line);
                 border-radius: var(--fs-radius-md); background: var(--fs-chip-bg); font-size: 12.5px; line-height: 1.45; color: var(--fs-text-secondary); }
.wom-bill-note b[b-wrg5edxfhe] { color: var(--fs-chip-fg); }

/* /Pages/DebugFasCommentChips.razor.rz.scp.css */
/* DebugFasCommentChips (notechips 10/29): the dev route's own spacing. Tokens only. */
.dcc-wrap[b-oyfh8e747d] { padding: var(--fs-gap-lg); }
.dcc-h[b-oyfh8e747d] { margin: 0 0 var(--fs-gap-sm); }
.dcc-sec[b-oyfh8e747d] { margin: var(--fs-gap-lg) 0 var(--fs-gap-sm); font-size: 13px; font-weight: 700; color: var(--fs-text-secondary); }
.dcc-narrow[b-oyfh8e747d] { width: 360px; padding: 8px; border: 1px dashed var(--mud-palette-lines-default); }
.dcc-badges[b-oyfh8e747d] { display: flex; flex-wrap: wrap; gap: var(--fs-gap-sm); align-items: center; }
/* /Pages/DebugFasDialog.razor.rz.scp.css */
/* Dev route styles (snowma 8/26). Reads Mud variables; scoped, so nothing leaks. */
.dfd-wrap[b-i4dtlyt2bn] { max-width: 860px; margin: 24px auto; padding: 0 16px; }
.dfd-h[b-i4dtlyt2bn] { color: var(--mud-palette-primary, #12372E); margin: 0 0 4px; }
.dfd-note[b-i4dtlyt2bn] { font-size: 12.5px; color: var(--mud-palette-text-secondary, #4B5563); margin-bottom: 14px; }
.dfd-group[b-i4dtlyt2bn] { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--mud-palette-text-secondary, #4B5563); margin: 14px 0 6px; }
.dfd-row[b-i4dtlyt2bn] { display: flex; flex-wrap: wrap; gap: var(--fs-gap-sm); }
.dfd-result[b-i4dtlyt2bn] { margin-top: 16px; font-size: 13px; color: var(--mud-palette-text-primary, #111827); }
.dfd-btn[b-i4dtlyt2bn] { border: 1px solid var(--mud-palette-lines-default, #D1D5DB); background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #111827); border-radius: var(--fs-radius-md); padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dfd-btn:hover:not(:disabled)[b-i4dtlyt2bn] { border-color: var(--mud-palette-primary, #12372E); color: var(--mud-palette-primary, #12372E); }
.dfd-btn:disabled[b-i4dtlyt2bn] { opacity: .5; cursor: default; }
.dfd-btn-primary[b-i4dtlyt2bn] { background: var(--mud-palette-primary, #12372E); border-color: var(--mud-palette-primary, #12372E); color: var(--mud-palette-primary-text, #fff); }
.dfd-btn-primary:hover:not(:disabled)[b-i4dtlyt2bn] { color: var(--mud-palette-primary-text, #fff); filter: brightness(1.12); }
.dfd-p[b-i4dtlyt2bn] { font-size: 13.5px; line-height: 1.55; color: var(--mud-palette-text-primary, #111827); margin: 0 0 10px; }
.dfd-filler[b-i4dtlyt2bn] { color: var(--mud-palette-text-secondary, #6B7280); }
/* /Pages/DebugFasKpiCard.razor.rz.scp.css */
/* FasKpiCard dev route chrome (faskpi 9/8). Tokens only, standing rule 1. */
.dfk-wrap[b-w4467fislh] { padding: 20px; }
.dfk-h[b-w4467fislh] { font-size: 18px; font-weight: 700; color: var(--mud-palette-primary); margin: 0 0 12px; }
.dfk-sec[b-w4467fislh] { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fs-text-muted); margin: 22px 0 8px; }
/* /Pages/DebugFasSurveyLegend.razor.rz.scp.css */
/* FasSurveyLegend dev route chrome (svyland 9/15). Tokens only, standing rule 1. */
.dfl-wrap[b-wy07oyd2cw] { padding: 20px; }
.dfl-h[b-wy07oyd2cw] { font-size: 18px; font-weight: 700; color: var(--mud-palette-primary); margin: 0 0 12px; }
.dfl-sec[b-wy07oyd2cw] { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fs-text-muted); margin: 22px 0 8px; }
.dfl-row[b-wy07oyd2cw] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--fs-tl-line); border-radius: var(--fs-radius-md); background: var(--mud-palette-surface); }
.dfl-note[b-wy07oyd2cw] { font-size: 12px; color: var(--fs-text-secondary); margin-top: 6px; }
.dfl-boxes[b-wy07oyd2cw] { gap: 18px; }
.dfl-box[b-wy07oyd2cw] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fs-text-secondary); }

.dfl-h2[b-wy07oyd2cw] { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--fs-tl-line); }
.dfl-cap[b-wy07oyd2cw] { font-size: 11px; color: var(--fs-text-muted); }
.dfl-cards[b-wy07oyd2cw] { gap: 14px; align-items: stretch; }
.dfl-card[b-wy07oyd2cw] { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-width: 260px; padding: 8px 10px;
            border: 1px solid var(--fs-tl-line); border-radius: var(--fs-radius-md); background: var(--mud-palette-surface); }
.dfl-card-t[b-wy07oyd2cw] { font-weight: 600; font-size: 13px; color: var(--mud-palette-text-primary); }
.dfl-card-s[b-wy07oyd2cw] { font-size: 12px; color: var(--fs-text-muted); }
.dfl-card-v[b-wy07oyd2cw] { font-size: 11px; color: var(--fs-text-muted); }
.dfl-card-r[b-wy07oyd2cw] { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
/* /Pages/DebugFasTimeline.razor.rz.scp.css */
/* 1G components dev route chrome (snowclient 9/8). Tokens only, standing rule 1. */
.dft-wrap[b-lpm3q36v6b] { padding: 20px; }
.dft-h[b-lpm3q36v6b] { font-size: 18px; font-weight: 700; color: var(--mud-palette-primary); margin: 22px 0 10px; }
.dft-row[b-lpm3q36v6b] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dft-sep[b-lpm3q36v6b] { display: inline-block; width: 1px; height: 18px; background: var(--fs-tl-line); margin: 0 6px; }
.dft-card[b-lpm3q36v6b] { max-width: 380px; padding: 12px 14px; border-radius: var(--fs-radius-md); background: var(--mud-palette-surface); box-shadow: var(--fs-shadow-card); }
.dft-note[b-lpm3q36v6b] { margin-top: 10px; font-size: 12px; color: var(--fs-text-muted); }
.dft-grid4[b-lpm3q36v6b] { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; }
.dft-grid3[b-lpm3q36v6b] { display: grid; grid-template-columns: repeat(3, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.dft-rail[b-lpm3q36v6b] { border: 1px solid var(--fs-tl-line); border-radius: var(--fs-radius-md); overflow: hidden; background: var(--mud-palette-surface); }
.dft-railhead[b-lpm3q36v6b] { padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--fs-text-secondary); background: var(--fs-rail-head-bg); border-bottom: 1px solid var(--fs-tl-line); }
/* railhead 10/2: FasRailHead's demo columns, the widths Snow Tracker 2.0's side panel has open and folded. */
.dft-frh-open[b-lpm3q36v6b] { width: 285px; }
.dft-frh-folded[b-lpm3q36v6b] { width: 48px; }
/* /Pages/DebugFasWorkOrders.razor.rz.scp.css */
/* Dev route chrome only (wotrack 9/29). Mirrors DebugFasDialog.razor.css so the debug pages
   read alike. Nothing here ships inside a dialog. Tokens only, no new hex. */
.dwo-wrap[b-adwph7sgns] { padding: 18px 22px 60px; max-width: 1400px; }
.dwo-h[b-adwph7sgns] { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--fs-text-secondary); }
.dwo-note[b-adwph7sgns] { font-size: 12px; color: var(--fs-text-muted); margin-bottom: 14px; }
.dwo-bad[b-adwph7sgns] { color: var(--fs-warn-text); font-weight: 600; }
.dwo-group[b-adwph7sgns] { margin: 26px 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase;
             letter-spacing: .05em; color: var(--fs-text-secondary);
             border-bottom: 1px solid var(--mud-palette-lines-default); padding-bottom: 4px; }
.dwo-row[b-adwph7sgns] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-gap-sm); margin-bottom: 10px; }
.dwo-cap[b-adwph7sgns] { font-size: 11.5px; color: var(--fs-text-muted); }
.dwo-sep[b-adwph7sgns] { width: 1px; height: 18px; background: var(--mud-palette-lines-default); margin: 0 4px; }
.dwo-btn[b-adwph7sgns] { border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface);
           color: var(--fs-text-secondary); border-radius: var(--fs-radius-md);
           padding: 5px 14px; font-size: 12px; font-weight: 700; cursor: pointer; }
.dwo-btn.on[b-adwph7sgns] { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary);
              color: var(--mud-palette-primary-text); }
.dwo-in[b-adwph7sgns] { border: 1px solid var(--mud-palette-lines-default); border-radius: var(--fs-radius-md);
          padding: 5px 10px; font-size: 12px; min-width: 200px; }
/* /Pages/DebugServiceTrackerKpiRow.razor.rz.scp.css */
/* DebugServiceTrackerKpiRow (stbar 11/02): the dev route's own layout. Tokens only. */
.dst-wrap[b-nb129au89z] { max-width: 1500px; margin: 0 auto; padding: 24px 16px 48px; }
.dst-h[b-nb129au89z] { margin: 0 0 8px; color: var(--mud-palette-text-primary); }
.dst-sec[b-nb129au89z] { margin: 28px 0 22px; font-size: 13px; font-weight: 700; color: var(--fs-text-secondary); }
.dst-narrow[b-nb129au89z] { width: 520px; max-width: 100%; }
/* /Pages/DebugSnowKpiRow.razor.rz.scp.css */
/* DebugSnowKpiRow (kpiwo 10/23): the dev route's own spacing. Tokens only. */
.dsk-wrap[b-dmqcv4tjkf] { padding: var(--fs-gap-lg); }
.dsk-h[b-dmqcv4tjkf] { margin: 0 0 var(--fs-gap-sm); }
.dsk-sec[b-dmqcv4tjkf] { margin: var(--fs-gap-lg) 0 var(--fs-gap-sm); font-size: 13px; font-weight: 700; color: var(--fs-text-secondary); }
.dsk-meters[b-dmqcv4tjkf] { display: flex; flex-wrap: wrap; gap: var(--fs-gap-lg); align-items: center; }
/* /Pages/Index.razor.rz.scp.css */
.fc-home[b-y3lkqg76cl] {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 6vh 20px 40px; max-width: 720px; margin: 0 auto;
}
.fc-home-logo[b-y3lkqg76cl] { width: 100%; max-width: 520px; height: auto; margin-bottom: 22px; }
.fc-home-greeting[b-y3lkqg76cl] { font-size: 30px; font-weight: 800; color: #12372E; margin: 0; }
.fc-home-sub[b-y3lkqg76cl] { font-size: 14px; font-weight: 700; color: #374151; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; }
.fc-home-version[b-y3lkqg76cl] { font-size: 12px; color: #9ca3af; margin-top: 4px; }
.fc-home-hint[b-y3lkqg76cl] { font-size: 14px; color: #6b7280; margin-top: 24px; padding-top: 18px; border-top: 1px solid #e5e7eb; width: 100%; max-width: 420px; }

/* F&S IQ client home */
.fasiq-home[b-y3lkqg76cl] { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 5vh 20px 40px; max-width: 800px; margin: 0 auto; }
.fasiq-greeting[b-y3lkqg76cl] { font-size: 28px; font-weight: 800; color: #12372E; margin: 0; }
.fasiq-sub[b-y3lkqg76cl] { font-size: 13px; font-weight: 700; color: #374151; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; }
.fasiq-support[b-y3lkqg76cl] { display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; width: 100%; max-width: 520px; margin-top: 24px; text-align: left; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px 20px; }
.fasiq-support-block[b-y3lkqg76cl] { flex: 1 1 200px; }
.fasiq-support-divider[b-y3lkqg76cl] { border-left: 1px solid #e5e7eb; padding-left: 18px; }
.fasiq-support-label[b-y3lkqg76cl] { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9ca3af; margin-bottom: 3px; }
.fasiq-support-name[b-y3lkqg76cl] { font-size: 16px; font-weight: 700; color: #111827; }
.fasiq-support-line[b-y3lkqg76cl] { font-size: 13px; color: #374151; margin-top: 3px; }
.fasiq-support-line[b-y3lkqg76cl]  .fs-ico { width: 16px; color: #12372E; }
/* contactemail 10/8: an account address wider than its half of the card breaks inside it rather than pushing the block under
   Your Program Director; an address that fits renders exactly as before. */
.fasiq-support-line a[b-y3lkqg76cl] { color: #1d4ed8; text-decoration: none; overflow-wrap: anywhere; }
.fasiq-support-line a:hover[b-y3lkqg76cl] { text-decoration: underline; }
/* clientbrand 9/22: the client's logo under the portal name. Height capped so a tall or wide mark
   reads as a co-brand, never a second hero. */
.fasiq-client-logo[b-y3lkqg76cl] { display: block; max-height: 44px; max-width: 220px; width: auto; height: auto; object-fit: contain; margin-top: 14px; }

/* Discipline groups (9/22). Each group is labelled with the sidebar's discipline name and ruled in its
   accent; tiles keep a fixed width so 3, 4 or 5 of them stay the same size. */
.fasiq-groups[b-y3lkqg76cl] { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 20px; width: 100%; margin-top: 20px; }
.fasiq-group[b-y3lkqg76cl] { --group-accent: var(--fs-disc-land); display: flex; flex-direction: column; text-align: left; }
.fasiq-group--land[b-y3lkqg76cl] { --group-accent: var(--fs-disc-land); }
.fasiq-group--snow[b-y3lkqg76cl] { --group-accent: var(--fs-disc-snow); }
.fasiq-group--quality[b-y3lkqg76cl] { --group-accent: var(--fs-disc-quality); }
.fasiq-group-label[b-y3lkqg76cl] { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fs-text-secondary); padding-bottom: 6px; margin-bottom: 10px; border-bottom: 2px solid var(--group-accent); }
.fasiq-group-tiles[b-y3lkqg76cl] { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 136px; grid-template-rows: 1fr; gap: 12px; }
.fasiq-tile[b-y3lkqg76cl] { --tile-accent: var(--fs-disc-land); display: block; text-decoration: none; background: #fff; border: 1px solid #e5e7eb; border-top: 3px solid var(--tile-accent); border-radius: 12px; padding: 12px 12px 14px; text-align: left; color: #111827; transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease; }
.fasiq-tile--land[b-y3lkqg76cl] { --tile-accent: var(--fs-disc-land); }
.fasiq-tile--snow[b-y3lkqg76cl] { --tile-accent: var(--fs-disc-snow); }
.fasiq-tile--quality[b-y3lkqg76cl] { --tile-accent: var(--fs-disc-quality); }
.fasiq-tile:hover[b-y3lkqg76cl] { box-shadow: 0 6px 16px rgba(0,0,0,.10); transform: translateY(-1px); border-color: var(--tile-accent); }
.fasiq-tile:focus-visible[b-y3lkqg76cl] { outline: 2px solid var(--tile-accent); outline-offset: 2px; }
.fasiq-tile[b-y3lkqg76cl]  .fasiq-tile-icon { font-size: 20px; color: var(--tile-accent); }
.fasiq-tile-title[b-y3lkqg76cl] { font-size: 14px; font-weight: 700; margin-top: 8px; }
.fasiq-tile-sub[b-y3lkqg76cl] { font-size: 11.5px; color: #6b7280; margin-top: 2px; }
/* /Pages/LandscapeSowGuidelines.razor.rz.scp.css */
/* Landscape SOW Guidelines: full height frame, same sizing as the Embed page. */
.sow-frame[b-acrganjamw] {
    width: 100%;
    height: calc(100vh - 8px);
    border: 0;
    display: block;
}
/* /Pages/ServiceTracker.razor.rz.scp.css */
/* ServiceTracker scoped styles (stbar 11/02, R. Nugent; Gate 1 signed off 11/02 on Claude outputs/Service-Tracker-Snow-Cards-Filter-
   Bar-NVA-Gate1-2026-11-02-p1.png and -p2.png). The page's first scoped sheet: its older rules are still the inline style block at the
   top of ServiceTracker.razor, which predates UI Standard rule 2. Only the page's own plain elements live here, and through ::deep the
   search box of its tool bar; the bar's house parts are styled where they live (FasFilterSelect's sheet, and site.css for FasViewChips,
   FasFilterChips and the phone layout, #st-filterbar). Tokens only. */

/* The Week control's wrapper. Its popover's position was an inline style; a class carries it now (no inline style=). */
.vsp-week[b-dno06ws8d9] { position: relative; }

/* In the staff bar (.stb, its MudPaper) the Week control takes the bar's look, FasFilterSelect's one line form (ffsseg 10/27): the
   name in white on the theme green, the week on white, one edge drawn as an inset shadow that darkens under the pointer. The steps,
   the calendar and its popover are unchanged, and the client bar (cfb) keeps its own look. These name the inline block's classes
   with more classes than it does, so they win over it although it comes later. */
.stb .vsp-week[b-dno06ws8d9] { display: flex; align-items: stretch; min-height: 34px; border-radius: var(--mud-default-borderradius);
                 background: var(--fs-kpi-surface); box-shadow: inset 0 0 0 1px var(--mud-palette-lines-inputs); }
.stb .vsp-week:hover[b-dno06ws8d9] { box-shadow: inset 0 0 0 1px var(--mud-palette-action-default); }
.stb .vsp-week > label[b-dno06ws8d9] { display: flex; align-items: center; margin: 0; padding: 0 12px;
                         border-radius: var(--mud-default-borderradius) 0 0 var(--mud-default-borderradius);
                         background: var(--mud-palette-primary); color: var(--mud-palette-primary-text);
                         font-size: .8125rem; font-weight: 700; letter-spacing: .01em; text-transform: none; }
.stb .vsp-week .vsp-week-ctl[b-dno06ws8d9] { height: auto; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.stb .vsp-week .vsp-week-step[b-dno06ws8d9] { background: transparent; color: var(--mud-palette-text-primary); }
.stb .vsp-week .vsp-week-step:disabled[b-dno06ws8d9] { color: var(--mud-palette-text-disabled); }
.stb .vsp-week .vsp-week-step:hover:not(:disabled)[b-dno06ws8d9] { background: var(--mud-palette-action-default-hover); }
.stb .vsp-week .vsp-week-mid[b-dno06ws8d9] { background: transparent; border-color: var(--mud-palette-lines-default); font-size: 13px; font-weight: 600;
                               color: var(--mud-palette-text-primary); }

/* The bar's search box, a MudTextField (so through ::deep), at Snow's size: it gives way first as the boxes fill the row. */
[b-dno06ws8d9] .st-search { flex: 1 1 250px; min-width: 200px; max-width: 380px; }
/* /Pages/SnowTracker20.razor.rz.scp.css */
/* Snow Tracker 2.0 scoped styles. Introduced 9/11 for the row expansion, which became the EVENT
   TIMELINE. Tokens only, no hex (standing rule 1). The date rail debt this header used to warn about
   was cleared on 9/17 and its rules are at the foot of this file. */
/* kpiwo 10/23: the KPI row's layout moved to SnowKpiRow.razor.css with the cards (statuscol 10/5, clientmsg 10/8). */
.stx-cell[b-lo0tk3eq7c] { background: var(--fs-rowexp-bg); border-bottom: 1px solid var(--fs-tl-line); padding: 14px 20px; }
.stx-head[b-lo0tk3eq7c] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.stx-title[b-lo0tk3eq7c] { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--fs-text-secondary); }
.stx-sub[b-lo0tk3eq7c] { font-size: 13px; font-weight: 600; color: var(--mud-palette-text-primary); margin-top: 2px; }
.stx-counts[b-lo0tk3eq7c] { font-weight: 400; color: var(--fs-text-muted); }
.stx-addr[b-lo0tk3eq7c] { font-size: 12px; color: var(--fs-text-muted); margin-top: 2px; }
.stx-loading[b-lo0tk3eq7c] { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fs-text-muted); padding: 6px 0; }
.stx-empty[b-lo0tk3eq7c] { font-size: 12px; color: var(--fs-text-muted); padding: 4px 0 6px; }
/* snowdocs 9/29: the DOCUMENTS block under a date's comments and the drawer's Documents section. The lines are
   FasDocRow and the tiles FasPhotoGrid, both child component roots, hence ::deep where a rule has to reach them. */
.stx-docs[b-lo0tk3eq7c] { margin-top: 10px; }
.stx-docs-label[b-lo0tk3eq7c] { font-size: 10px; font-weight: 800; letter-spacing: .4px; color: var(--fs-text-muted); margin: 6px 0 4px; }
.stx-doc-batch[b-lo0tk3eq7c] { border: 1px solid var(--mud-palette-lines-default); border-radius: var(--fs-radius-md); padding: 6px 10px; margin-bottom: 6px; }
.stx-doc-who[b-lo0tk3eq7c] { font-size: 11.5px; color: var(--fs-text-muted); margin-bottom: 2px; }
.stx-doc-batch[b-lo0tk3eq7c]  .fpg { margin: 4px 0 6px; }
.stx-docs-foot[b-lo0tk3eq7c] { margin-top: 6px; font-size: 11.5px; color: var(--fs-text-muted); }
/* adddocs 10/15: with the Add documents button the foot is one row, the words left and the button right; on a narrow panel the
   button wraps under, still to the right. The button is a Mud root, so its own rules are in site.css (stx-docs-add-btn). */
.stx-docs-foot-add[b-lo0tk3eq7c] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
/* evh 10/8 (R. Nugent): every Event History entry is one card on one left edge; the tint says who wrote it, blue for a note
   (as notes always were) and gray for an F&S line, which used to sit flush left outside any box. The late tag reads the
   follow-up pill's colors. */
.stx-hist-entry[b-lo0tk3eq7c] { border: 1px solid var(--fs-hist-sys-line); background: var(--fs-hist-sys-bg); border-radius: 6px;
                  padding: 6px 8px; margin-bottom: 4px; font-size: 12px; line-height: 1.45; }
.stx-hist-note[b-lo0tk3eq7c] { border-color: var(--fs-hist-note-line); background: var(--fs-hist-note-bg); }
.stx-hist-meta[b-lo0tk3eq7c] { color: var(--fs-text-muted); }
.stx-hist-text[b-lo0tk3eq7c] { color: var(--fs-hist-text); white-space: pre-line; }
.stx-hist-late[b-lo0tk3eq7c] { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; font-size: 10.5px; font-weight: 700;
                 background: var(--fs-status-followup-bg); color: var(--fs-status-followup-fg); }
/* notechips 10/29 (R. Nugent; Gate 1 signed off 10/29): the type chips above Event History's dates and Show all's, the line when they are
   off, and the badge that starts each entry's line. The chips and the badge are Mud roots (FasCommentChips, FasCommentBadge) styled in
   site.css; this page only places them. */
.stx-hist-chips[b-lo0tk3eq7c] { margin: 2px 0 8px; }
.stx-hist-chips-off[b-lo0tk3eq7c] { margin: 2px 0 8px; font-size: 12px; color: var(--fs-text-muted); }
.stx-hist-meta[b-lo0tk3eq7c]  .fcb, .stx-cnote-meta[b-lo0tk3eq7c]  .fcb { margin-right: 6px; }
.stx-link[b-lo0tk3eq7c] { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 700; color: var(--mud-palette-primary); cursor: pointer; }
/* wo5 10/6 (R. Nugent): the drawer's Work Orders section. Each work order is one button that opens the window on it: the
   number and its status pill on the first line, source, scope, NTE, added and files under it. Tokens only. */
.stx-wo-list[b-lo0tk3eq7c] { display: flex; flex-direction: column; gap: 6px; }
.stx-wo-item[b-lo0tk3eq7c] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; width: 100%; text-align: left;
    border: 1px solid var(--fs-tl-line); border-radius: 8px; background: var(--mud-palette-surface); padding: 6px 10px; font: inherit; cursor: pointer; }
.stx-wo-item:hover[b-lo0tk3eq7c] { border-color: var(--mud-palette-primary); }
/* e50 10/30 (Julian): a work order an integration sent carries the integration's colour on its left edge. */
.stx-wo-item.stx-wo-int-servicechannel[b-lo0tk3eq7c] { border-left: 3px solid var(--fs-int-servicechannel); }
.stx-wo-item:focus-visible[b-lo0tk3eq7c] { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.stx-wo-num[b-lo0tk3eq7c] { font-size: 13px; font-weight: 700; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.stx-wo-meta[b-lo0tk3eq7c] { grid-column: 1 / -1; font-size: 11.5px; color: var(--fs-text-muted); }
/* Open in Map: the action a reader wants once they have read what happened here. */
/* svyrow 9/14: the map link moved to the global .fas-maplink (FasMapLink), so the grid, the drawer and
   the Modify Status dialog share one rule. .stx-actions holds the survey badge and the link together and
   lets them wrap under the heading on a narrow screen instead of covering it. */
.stx-actions[b-lo0tk3eq7c] { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
/* AI Analyst panel (rollup 9/14). One set of rules dresses both reads, the single site and the roll up that
   fills the panel when no row is selected. The flag, body, actions and outlook carried inline hex before;
   they now read the same fs-ai tokens the client site card uses, so the two analyst surfaces agree. Site
   status in the list is FasStatusPill, never a coloured span here (standing rule 11). */
.stx-ai-head[b-lo0tk3eq7c] { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--mud-palette-text-primary); }
.stx-ai-scope[b-lo0tk3eq7c] { font-size: 11px; color: var(--fs-text-muted); margin: 3px 0 8px; }
.stx-ai-facts[b-lo0tk3eq7c] { font-size: 12px; line-height: 1.5; color: var(--mud-palette-text-primary); }
.stx-ai-label[b-lo0tk3eq7c] { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--fs-text-secondary); margin-top: 8px; }
.stx-ai-sites[b-lo0tk3eq7c] { list-style: none; margin: 2px 0 0; padding: 0; }
/* aifirst 10/6 (R. Nugent): each analyst row is the site's name on its own line with its pills under it, so every name
   reads in full and left aligned, and the pills line up down the list. The names had been centred, with their pill
   dropping to a second line on some rows and not others, because MudBlazor's stylesheet makes every button a centred
   flex box; the site button is display block again, which is also what lets an overlong name end in an ellipsis. An
   open problem's row takes the grid row's red wash, its text kept in line with the rows around it. Tokens only. */
.stx-ai-sites li[b-lo0tk3eq7c] { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 5px 0; border-bottom: 1px solid var(--fs-tl-line); }
.stx-ai-sites li:last-child[b-lo0tk3eq7c] { border-bottom: 0; }
.stx-ai-sites li.stx-ai-problem[b-lo0tk3eq7c] { background: var(--fs-row-problem-bg); margin: 0 -6px; padding: 5px 6px; border-radius: var(--fs-radius-md); }
.stx-ai-pills[b-lo0tk3eq7c] { display: flex; flex-wrap: wrap; gap: 4px; }
.stx-ai-site[b-lo0tk3eq7c] { display: block; max-width: 100%; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 12px; font-weight: 600; text-align: left; color: var(--mud-palette-primary); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stx-ai-site:hover[b-lo0tk3eq7c] { text-decoration: underline; }
.stx-ai-site:focus-visible[b-lo0tk3eq7c] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; border-radius: 3px; }
.stx-ai-more[b-lo0tk3eq7c] { font-size: 11px; font-style: italic; color: var(--fs-text-muted); margin-top: 4px; }
.stx-ai-loading[b-lo0tk3eq7c] { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fs-text-muted); margin-top: 8px; }
.stx-ai-quiet[b-lo0tk3eq7c] { font-size: 11px; color: var(--fs-text-muted); margin-top: 6px; }
.stx-ai-flag[b-lo0tk3eq7c] { display: inline-block; background: var(--fs-ai-warn-bg); color: var(--fs-ai-warn-fg); border: 1px solid var(--fs-ai-warn-border); border-radius: 10px; padding: 1px 8px; font-size: 10px; font-weight: 700; margin-bottom: 5px; }
.stx-ai-body[b-lo0tk3eq7c] { font-size: 12px; line-height: 1.5; color: var(--mud-palette-text-primary); margin-top: 2px; }
.stx-ai-actions[b-lo0tk3eq7c] { margin: 2px 0 0; padding-left: 16px; }
.stx-ai-actions li[b-lo0tk3eq7c] { font-size: 11px; line-height: 1.4; color: var(--mud-palette-text-primary); }
.stx-ai-outlook[b-lo0tk3eq7c] { font-size: 11px; line-height: 1.4; color: var(--fs-text-muted); margin-top: 6px; }
.stx-ai-outlook b[b-lo0tk3eq7c] { color: var(--fs-text-secondary); }

/* ── Dates rail (9/17). Lifted out of the page's inline <style> block, which Blazor emits GLOBALLY
   whatever page it sits on, so three of these rules were reaching the whole app to dress one sidebar
   (standing rule 2). Every selector below sits on a plain div in this page's own markup, so the scope
   attribute attaches and these rules stay where they belong. The one rule that could NOT come here is
   the card itself: it is a MudPaper, a child component root, which the scope attribute never reaches,
   so .mud-paper.st-rail-card is global in site.css with a comment saying why.

   The rail is 285px, arrived at over three passes and worth recording so nobody trims it back. The date
   range picker was clipping the year off both dates: a range field is four things in one row, a start
   date, a separator, an end date and a calendar button, and at 230px there was not room for all four.
   Moving the scroll onto the list alone gave back the width of a scrollbar. Widening to 250 was still a
   few pixels short at the app's body size. 285 is that size plus about thirty pixels of slack, which is
   what stops a longer date format or a font change bringing this back a fourth time.

   Colours are tokens: the divider and the hover are --fs-rail-*, the selected row reuses the amber the
   grid already highlights a focused row with, and the empty line reuses the neutral timeline ink. */
.st-rail[b-lo0tk3eq7c] { display: flex; flex-direction: column; gap: var(--fs-gap-md); width: 285px; flex: none; }
/* railfold 9/29: the green bar is FasFoldCard's now (site.css, .ffc-bar), with the same padding, weight and ink. */
.st-rail-picker[b-lo0tk3eq7c] { flex: none; padding: var(--fs-gap-sm); border-bottom: 1px solid var(--fs-rail-line); }
/* The date field carries NO font rule at all, on purpose (9/17, third pass, R. Nugent: the field read
   smaller than the list under it and both read smaller than the grid). Shrinking the text to 12px was the
   second pass, and it did stop the clipping, but it bought the space by making one control quieter than
   everything around it. The rail is the cheaper thing to spend: it went to 285px, which is about thirty
   pixels more than the field needs at the app's own body size, and the override is gone. Inheriting the
   theme is what parity actually means, and it is one less bespoke number to drift.
   If this ever clips again, widen the rail. Do not shrink the text. */
/* min-height 0 is what actually makes this scroll: a flex child will not shrink below its content without it. */
.st-rail-list[b-lo0tk3eq7c] { flex: 1 1 auto; min-height: 0; overflow: auto; }
.st-rail-empty[b-lo0tk3eq7c] { padding: 8px 12px; color: var(--fs-text-muted); font-size: 14px; }
/* railfit 10/6 (R. Nugent): the rows sit closer (3px, was 6px) so the list shows more dates in less of the rail; the
   text keeps the size the note above asks for. */
.st-date[b-lo0tk3eq7c] { padding: 3px 12px; border-bottom: 1px solid var(--fs-rail-line); cursor: pointer; font-size: 14px; }
.st-date:hover[b-lo0tk3eq7c] { background: var(--fs-rail-hover); }
.st-date-sel[b-lo0tk3eq7c] { background: var(--fs-focus-row); font-weight: 700; }
/* railside 9/30 (R. Nugent): the rail also folds sideways, for the grid's width. The Dates bar carries the
   collapse button (FasFoldCard's Leading); pressed, the whole rail becomes a 48px strip holding the way back
   and one door per card, the way the side menu folds to its icon rail, and the grid takes the width. The cards
   still fold up and down as before. Open on every load, like the fold cards (railfold 9/29) and the side menu
   (navopen 9/23). From 960px up only: below that the rail already sits above the grid, so there the button
   and the strip stay hidden and a collapsed rail simply shows its cards. The strip is this page's own div; the
   cards and the buttons are child component roots, reached with ::deep. Tokens only. */
/* railhead 10/2 (R. Nugent, signed off 10/2): the collapse button moved off the Dates bar onto a head bar over the whole
   panel, FasRailHead (st-rail-head here), with the side menu's hamburger. Open, the head stands over the cards with the
   rail's gap; folded, the gap closes and the head sits on top of the strip as one piece, a hairline between them as under
   the side menu's own head, so the hamburger never moves. Below 960px the panel does not fold, so the head is hidden there
   as the old button was. The head's own look is in site.css under FasRailHead. */
.st-rail-strip[b-lo0tk3eq7c] { display: none; }
.st-rail[b-lo0tk3eq7c]  .st-rail-head { display: none; }
@media (min-width: 960px) {
    .st-rail[b-lo0tk3eq7c] { transition: width .15s ease; }
    .st-rail[b-lo0tk3eq7c]  .st-rail-head { display: flex; }
    .st-rail-collapsed[b-lo0tk3eq7c] { width: 48px; gap: 0; }
    .st-rail-collapsed[b-lo0tk3eq7c]  .ffc { display: none; }
    .st-rail-collapsed[b-lo0tk3eq7c]  .st-rail-head { border-radius: var(--fs-radius-md) var(--fs-radius-md) 0 0; border-bottom: 1px solid var(--fs-nav-hover); }
    .st-rail-collapsed .st-rail-strip[b-lo0tk3eq7c] { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0;
        background: var(--mud-palette-primary); color: var(--mud-palette-primary-text);
        border-radius: 0 0 var(--fs-radius-md) var(--fs-radius-md); box-shadow: var(--mud-elevation-1); }
    /* 44px targets in a 48px strip: Mud's default icon button is 48px (12px padding round a 24px icon). */
    .st-rail-collapsed .st-rail-strip[b-lo0tk3eq7c]  .mud-icon-button { padding: 10px; }
}
/* fitview 10/26 (R. Nugent; Gate 1 signed off 10/26): under 1600px the panel opens folded (SnowTracker20.razor, RailFoldBelow), so a
   laptop or a tablet gives the grid the width. st-rail-auto is the page's first draw, before the width is read: folded under 1600
   with railside's look above, and open from there up, so nothing moves when the read settles it. A head drawn open hides its
   name while it waits, as a folded head does. */
@media (min-width: 960px) and (max-width: 1599.98px) {
    .st-rail-auto[b-lo0tk3eq7c] { width: 48px; gap: 0; }
    .st-rail-auto[b-lo0tk3eq7c]  .ffc { display: none; }
    .st-rail-auto[b-lo0tk3eq7c]  .st-rail-head { justify-content: center; border-radius: var(--fs-radius-md) var(--fs-radius-md) 0 0; border-bottom: 1px solid var(--fs-nav-hover); }
    .st-rail-auto[b-lo0tk3eq7c]  .st-rail-head .frh-title { display: none; }
    .st-rail-auto .st-rail-strip[b-lo0tk3eq7c] { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0;
        background: var(--mud-palette-primary); color: var(--mud-palette-primary-text);
        border-radius: 0 0 var(--fs-radius-md) var(--fs-radius-md); box-shadow: var(--mud-elevation-1); }
    .st-rail-auto .st-rail-strip[b-lo0tk3eq7c]  .mud-icon-button { padding: 10px; }
}
/* fitview 10/26: under 960px the panel folds too, where it never did. Folded, and on the first draw, it is one bar over the grid,
   the head with the strip's doors beside it, in place of the Dates and AI Analyst cards stacked over the grid; the head opens
   it, and open, the head sits over the cards as a full width bar. The Status key stays a desktop card (MudHidden), so its door
   goes here too. */
@media (max-width: 959.98px) {
    .st-rail[b-lo0tk3eq7c]  .st-rail-head { display: flex; flex: 1 1 100%; }
    .st-rail-strip[b-lo0tk3eq7c]  .st-rail-keydoor { display: none; }
    .st-rail-collapsed[b-lo0tk3eq7c], .st-rail-auto[b-lo0tk3eq7c] { flex-wrap: nowrap; align-items: stretch; gap: 0; }
    .st-rail-collapsed[b-lo0tk3eq7c]  .ffc, .st-rail-auto[b-lo0tk3eq7c]  .ffc { display: none; }
    .st-rail-collapsed[b-lo0tk3eq7c]  .st-rail-head, .st-rail-auto[b-lo0tk3eq7c]  .st-rail-head { flex: 1 1 auto; border-radius: var(--fs-radius-md) 0 0 var(--fs-radius-md); }
    .st-rail-auto[b-lo0tk3eq7c]  .st-rail-head .frh-title { display: none; }
    .st-rail-collapsed .st-rail-strip[b-lo0tk3eq7c], .st-rail-auto .st-rail-strip[b-lo0tk3eq7c] { display: flex; flex-direction: row; align-items: center; gap: 2px; padding: 0 6px;
        background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); border-radius: 0 var(--fs-radius-md) var(--fs-radius-md) 0;
        box-shadow: var(--mud-elevation-1); }
}
/* histfold 9/22 (R. Nugent): the site drawer's sections are one MudExpansionPanels accordion. A row click
   opens every section, as the drawer always has; the Modify Status door folds all but Event History, which
   lists the date being modified first and open, so the note history sits beside the dialog with no second
   window (the 9/21 companion panel is retired). Mud props carry the shape (Elevation 0, Dense, Gutters off,
   MultiExpansion); these rules only keep the drawer's old rhythm. The panels are child components, so their
   own parts are reached with ::deep from .stx-drawer-body, which is this page's element. This bundle loads
   before MudBlazor.min.css, so each rule names at least one class more than Mud's does. Tokens only. */
.stx-drawer-body[b-lo0tk3eq7c] { flex: 1; overflow: auto; padding: 4px 16px 14px; }
.stx-drawer-body[b-lo0tk3eq7c]  .mud-expand-panel.mud-panel-expanded { margin: 0; }
.stx-drawer-body[b-lo0tk3eq7c]  .mud-expand-panel + .mud-expand-panel { border-top: 1px solid var(--fs-tl-line); }
.stx-drawer-body[b-lo0tk3eq7c]  .mud-expand-panel .mud-expand-panel-header { min-height: 0; padding: 10px 0 8px; font-size: inherit; line-height: inherit; }
.stx-drawer-body[b-lo0tk3eq7c]  .mud-expand-panel .mud-expand-panel-content { padding: 0 0 12px; }
.stx-sec-title[b-lo0tk3eq7c] { font-weight: 700; color: var(--fs-text-secondary); }
.stx-sec-sub[b-lo0tk3eq7c] { margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--fs-text-muted); }
.stx-sec-row[b-lo0tk3eq7c] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* phototok 10/21 (R. Nugent, Gate 1 signed off 10/21): the drawer's Photos group header, inline styles and hex until now, on
   tokens. The icon is MudIcon, a child component root, so its size is reached with ::deep from .stx-photo-head, this page's
   element, which outranks Mud's .mud-icon-size-medium; its colour is the Mud Color prop. The photo count was a lighter gray, below
   readable contrast for 10px text (2.5 to 1); it takes the muted text token now (4.8 to 1). The empty line uses .stx-empty. */
.stx-photo-head[b-lo0tk3eq7c] { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.stx-photo-head[b-lo0tk3eq7c]  .stx-photo-icon { font-size: 14px; }
.stx-photo-when[b-lo0tk3eq7c] { font-size: 12px; font-weight: 700; color: var(--fs-text-secondary); }
.stx-photo-status[b-lo0tk3eq7c] { font-size: 10px; color: var(--fs-text-muted); border: 1px solid var(--fs-tl-line); border-radius: 8px; padding: 0 6px; }
.stx-photo-count[b-lo0tk3eq7c] { font-size: 10px; color: var(--fs-text-muted); }
.stx-photo-grid[b-lo0tk3eq7c] { margin-bottom: 6px; }
/* panelw 10/13 (R. Nugent, Gate 1 signed off 10/13): the drawer's shell, inline styles until now, on tokens. Its width is the
   --fs-drawer-w token (site.css: 40% of the screen by default, a person's own width set over it by wwwroot/js/fas-drawer.js),
   shared with FasDialog's BesideDrawer backdrop. The handle on the left edge is a MudElement, a child component root, so it
   is reached with ::deep from .stx-drawer, this page's element; the tab and its two lines inside it are this page's markup.
   The handle stays inside the drawer's own edge: Modify Status and Work Orders open with their backdrop ending exactly at that
   edge, and a click on that backdrop closes the window, so no part of the handle may sit under it. Under 1280px it never shows
   (the script says "off" there and the media query backs that up), so phones and small screens keep the drawer as it was. */
.stx-drawer-scrim[b-lo0tk3eq7c] { position: fixed; inset: 0; background: var(--fs-drawer-scrim); z-index: 1200; }
.stx-drawer[b-lo0tk3eq7c] { position: fixed; top: 0; right: 0; height: 100vh; width: var(--fs-drawer-w); max-width: 94vw; background: var(--mud-palette-surface);
              box-shadow: var(--fs-shadow-drawer); z-index: 1201; display: flex; flex-direction: column; }
.stx-drawer-head[b-lo0tk3eq7c] { padding: 14px 16px; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); display: flex;
                   justify-content: space-between; align-items: flex-start; gap: 8px; }
.stx-drawer-acct[b-lo0tk3eq7c] { font-weight: 700; font-size: 16px; }
.stx-drawer-loc[b-lo0tk3eq7c] { opacity: .85; font-size: 13px; }
.stx-drawer-btns[b-lo0tk3eq7c] { flex: none; display: flex; align-items: center; gap: 4px; }
/* drawermod 10/14 (R. Nugent; Gate 1 signed off 10/14): the top row's actions, Modify Status beside Open in Map. The buttons are
   child components, so their case is set with ::deep from this page's span. No colour of its own. */
.stx-drawer-acts[b-lo0tk3eq7c] { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.stx-drawer-acts[b-lo0tk3eq7c]  .mud-button-root { text-transform: none; }
.stx-drawer[b-lo0tk3eq7c]  .stx-drawer-grip { position: absolute; left: 0; top: 0; bottom: 0; width: 16px; z-index: 2; cursor: col-resize;
                                      touch-action: none; outline: none; }
.stx-drawer[b-lo0tk3eq7c]  .stx-drawer-grip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.stx-drawer[b-lo0tk3eq7c]  .stx-drawer-grip:hover::before,
.stx-drawer[b-lo0tk3eq7c]  .stx-drawer-grip:focus-visible::before { background: var(--mud-palette-primary); }
.stx-drawer[b-lo0tk3eq7c]  .stx-drawer-grip:focus-visible .stx-drawer-grip-tab { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.stx-drawer-grip-tab[b-lo0tk3eq7c] { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: 12px; height: 56px;
                       border-radius: 6px; background: var(--mud-palette-surface); border: 1px solid var(--fs-drawer-grip-line);
                       box-shadow: var(--fs-drawer-grip-shadow); display: flex; align-items: center; justify-content: center; gap: 2px; }
.stx-drawer-grip-tab i[b-lo0tk3eq7c] { display: block; width: 2px; height: 26px; border-radius: 1px; background: var(--fs-drawer-grip-ink); }
@media (max-width: 1279.98px) { .stx-drawer[b-lo0tk3eq7c]  .stx-drawer-grip { display: none; } }

/* ── Tablets and phones (snowfit 9/23, R. Nugent). From 960px up the page is exactly the desktop layout
   it has always been; everything below adapts only what does not fit. 960 is where the side menu leaves
   the row (Shared/NavMenu) and where MudTable's Breakpoint.Sm turns the grid into cards, so the three
   change together. Desktop values moved here from inline styles unchanged. Tokens only, no hex.
   fitview 10/26: the table stays a table at every width now (Breakpoint.None); a phone's card list is this page's own, at
   720px, and the fill and the tablet layout are at the foot of this file (its 80% look retired 10/27, prodtype). */

/* The corporate top bar is FasPageBar since pagebar 9/23; its rules, the phone layout included, are in
   site.css. */

/* The body: the Dates and AI Analyst column beside the main column. */
.st-body[b-lo0tk3eq7c] { display: flex; gap: 16px; align-items: flex-start; margin-top: 18px; padding: 0 18px; }
.st-main[b-lo0tk3eq7c] { flex: 1; min-width: 0; }
/* railfit 10/6 (R. Nugent): from 960px up the rail is stretched to the main column's height, so its cards have a
   height to share (site.css, .mud-paper.st-rail-card). contain: size is what makes that work: it keeps the rail's own
   content out of the body's height, so the rail follows the grid rather than the grid following a long rail. The
   analyst's body scrolls inside its card (it was an inline padding before, which this class carries). */
@media (min-width: 960px) {
    .st-body[b-lo0tk3eq7c] { align-items: stretch; }
    .st-rail[b-lo0tk3eq7c] { contain: size; }
}
.stx-ai-wrap[b-lo0tk3eq7c] { padding: 10px; flex: 1 1 auto; min-height: 0; overflow: auto; }

/* The grid's height. On desktop the rows scroll inside a box, which keeps the header in view.
   fitview 10/26 (R. Nugent; Gate 1 signed off 10/26): the box takes whatever height the window has left, so nothing is left white
   under the pager. It was the screen less a fixed 500px (toolbar 9/30 handed fixed shares back for Hide summary and Hide
   filters), which left white wherever less than 500px sat above the rows: the client view, a hidden summary, a zoomed out
   page. Now the page bar, the title, the cards and the filters keep their own heights and the box takes the rest, so a hidden
   section's height goes to the rows by itself. The shell and the article are a column the window's height (site.css); here the
   body, the main column, the box, and Mud's table and its scrolling container (reached with ::deep from .stx-grid) carry it
   down. A short window keeps a floor of 260px and the page scrolls past it, as it did. A phone shows the card list (below),
   which flows with the page. */
@media (min-width: 720.02px) and (min-height: 500.02px), (min-width: 720.02px) and (orientation: portrait) {
    .st-body[b-lo0tk3eq7c] { flex: 1 0 auto; }
    .st-main[b-lo0tk3eq7c] { display: flex; flex-direction: column; }
    .stx-grid[b-lo0tk3eq7c] { flex: 1 1 0; min-height: 260px; display: flex; flex-direction: column; }
    .stx-grid[b-lo0tk3eq7c]  .mud-table { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
    .stx-grid[b-lo0tk3eq7c]  .mud-table-container { flex: 1 1 0; min-height: 0; }
}

/* The photo viewer is FasPhotoLightbox since oneviewer 9/30; its layout, the phone layout included, is in that
   component's scoped sheet. */

/* Under 960px the column moves above the grid, and Dates and AI Analyst sit side by side, wrapping to one
   above the other on a phone. Their widths are set in site.css, because both are MudPaper roots. */
@media (max-width: 959.98px) {
    .st-body[b-lo0tk3eq7c] { flex-direction: column; align-items: stretch; }
    .st-main[b-lo0tk3eq7c] { flex: 1 0 auto; }   /* fitview 10/26: was none; it grows into the body, so the grid's fill reaches a tablet too */
    .st-rail[b-lo0tk3eq7c] { width: auto; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
}

/* four 9/30: the My stores empty note. stbar 11/02: the VIEW row is FasViewChips now (the Service Tracker draws it too), so its
   rules (the row, its label and the counts, unchanged) moved to site.css, keyed on fvc-*. */
.st-mine-empty[b-lo0tk3eq7c] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--fs-text-secondary);
                 background: var(--fs-rowexp-bg); border: 1px solid var(--fs-tl-line); border-radius: var(--fs-radius-md); padding: 6px 12px; margin-bottom: 8px; }

/* Phones: the page already sits inside the layout's side padding, so the body drops its own. */
@media (max-width: 599.98px) {
    .st-body[b-lo0tk3eq7c] { padding: 0; }
}

/* toolbar 9/30 (R. Nugent): the title row and the filter bar are MudStack props and Mud utilities now (toolbar2), and
   the title row's controls are FasRefreshStamp and FasSectionToggle, whose rules are in site.css. Two things no
   prop says stay here: the subtitle's grey, and the search box's share of the bar. Both are child component roots,
   so the rules start with ::deep, which reaches them from this page's own elements. Tokens only.
   stown 10/5: the box may reach 380px (was 320px), so the staff hint, which now names managers too, shows in full. */
[b-lo0tk3eq7c] .st-subtitle { color: var(--fs-text-muted); }
/* skew 10/26 (R. Nugent): the title and its subtitle line may be narrower than their content, so on a narrow phone the follow-up
   meter's bar gives way (SnowFollowUpMeter.razor.css) rather than the title box pushing the page past the screen's edge. */
.st-titlebox[b-lo0tk3eq7c] { min-width: 0; }

/* status2 10/6 (R. Nugent): a row with an open problem is washed red and stays red under the pointer; the selected row keeps
   its yellow and its bar (the inline style it had, as a class), and a selected problem row keeps its red with the bar. The
   selectors repeat Mud's own table chain so they outrank its hover rule (.mud-table-hover ... .mud-table-row:hover), which
   would otherwise paint the row grey the moment the pointer crossed it. The rows are the table's own elements, reached with
   ::deep from .stx-grid, this page's element; .stx-c centres the PROBLEM RESOLVED cells the same way. Tokens only. */
.stx-grid[b-lo0tk3eq7c]  .mud-table-container .mud-table-root .mud-table-body tr.mud-table-row.stx-row-problem { background: var(--fs-row-problem-bg); }
.stx-grid[b-lo0tk3eq7c]  .mud-table-container .mud-table-root .mud-table-body tr.mud-table-row.stx-row-sel { background: var(--fs-focus-row); box-shadow: inset 3px 0 0 var(--mud-palette-primary); }
.stx-grid[b-lo0tk3eq7c]  .mud-table-container .mud-table-root .mud-table-body tr.mud-table-row.stx-row-problem.stx-row-sel { background: var(--fs-row-problem-bg); }
.stx-grid[b-lo0tk3eq7c]  .stx-c { text-align: center; }
/* docscol 10/16 (R. Nugent: "give back"): a header's sort arrow takes room on the sorted column only. Mud 9.5.0 keeps 26px in every
   sortable header (an 18px icon and 4px each side) for an arrow it shows only on hover; measured on the Gate 1, that space was over
   300px of the staff grid's width. The header still dims on hover and sorts on click, and the sorted column keeps its arrow. */
.stx-grid[b-lo0tk3eq7c]  .mud-table-sort-label .mud-table-sort-label-icon:not(.mud-direction-asc):not(.mud-direction-desc) { display: none; }
/* gridfmt 10/7 (R. Nugent: "revert snow tracker grid formatting back to its previous format type ... Model similar to the Land
   Tracker format"), then gridpar 10/7 ("those snow tracker headers are still way too bold and big. We need it on parity with
   our Land and Risk Tracker styles"). gh1 (15px headers, 13.5px values) and gridcols (10px cells, name column floors, 12.5px
   counts) are out, and the desktop grid takes the Land Tracker's measures exactly (site.css, .vsp-table): its cell spacing,
   6px by 7px; its values, 12.5px at the theme's 600; and its headers, 11.5px at 700 in capitals tracked .02em. The color
   is the theme's text, the same #111827 Land's --stm-dlg-text names. STORE # keeps to one line (stx-nowrap), as Land's does.
   What sits in a value cell follows the cell: the pills (mapsix, below), the WO count chips (font: inherit) and the muted
   No and dash, which are MudText and would otherwise keep Body2's own size. At 960px and below Mud draws the rows as cards
   (Breakpoint.Sm) and they keep Mud's spacing and the theme's sizes. The row expansion is a plain td, not a Mud cell, so
   the timeline keeps its own sizes. The cells are the table's own elements, reached with ::deep from .stx-grid. */
/* fitview 10/26: from 720px, where the table now shows at every width; it was 961px, where Mud's card mode ended. */
@media (min-width: 720.02px) {
    .stx-grid[b-lo0tk3eq7c]  .mud-table-root .mud-table-row .mud-table-cell { padding: 6px 7px; }
    .stx-grid[b-lo0tk3eq7c]  .mud-table-root .mud-table-head .mud-table-cell { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
    .stx-grid[b-lo0tk3eq7c]  .mud-table-root .mud-table-head th.stx-nowrap { white-space: nowrap; }
    .stx-grid[b-lo0tk3eq7c]  .mud-table-root .mud-table-body td.mud-table-cell { font-size: 12.5px; }
    .stx-grid[b-lo0tk3eq7c]  .mud-table-root .mud-table-body td.mud-table-cell .mud-typography-body2 { font-size: inherit; }
}
/* mapsix 10/6 (R. Nugent: "statuses in the first column have the same bold font as the rest of the grid"): a pill in a
   grid cell reads in the cell's own type, the theme's 14px at 600, rather than the pill's 11px, so STATUS, PROBLEM and
   FOLLOW-UP read as one grid. The pill keeps its own shape and colours; elsewhere it keeps its own size. */
.stx-grid[b-lo0tk3eq7c]  td.mud-table-cell .fsp { font-size: inherit; font-weight: inherit; }
/* keyaz 10/6 (R. Nugent): the Status key's pills are one size, the width of their column, so the key reads as a set.
   The pill is a child component root (FasStatusPill, a MudElement), reached with ::deep from the rail, the page's div. */
.st-rail[b-lo0tk3eq7c]  .fsp.stx-key-pill { display: block; text-align: center; }
/* pillw 10/6 (R. Nugent): the staff STATUS pills in the grid are one size too, at least as wide as the longest status, No
   Service Required (11.5em at the cell's type), centred, so the column keeps one width from page to page. The client view's
   ladder pills keep their own widths. clientmsg 10/8: the pill sits on the line as an inline block rather than filling the
   cell, so the Client Activity marker can sit beside it and every pill stays one size when a marker widens the column; with
   no marker in view the column paints exactly as before. */
.stx-grid[b-lo0tk3eq7c]  td.mud-table-cell.stx-status-cell { white-space: nowrap; }
.stx-grid[b-lo0tk3eq7c]  td.mud-table-cell.stx-status-cell .fsp { display: inline-block; vertical-align: middle; min-width: 11.5em; text-align: center; }
/* clientmsg 10/8 (R. Nugent; Gate 1 signed off 10/8): the Client Service Tracker's blue marker, staff only, on a site with a
   client note on this date that nobody has acknowledged; it opens the site at Event History. A MudIconButton in a span this
   page writes, reached with ::deep from the span. The blue is the Client Activity card's (--fs-kpi-info-fg). */
.stx-cnote[b-lo0tk3eq7c] { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.stx-cnote[b-lo0tk3eq7c]  .stx-cnote-btn { padding: 2px; color: var(--fs-kpi-info-fg); }
.stx-cnote[b-lo0tk3eq7c]  .stx-cnote-btn .mud-icon-root { width: 20px; height: 20px; font-size: 20px; }   /* mudicons 11/02: Error at the old mark's size */
/* clientmsg 10/8: client notes at the top of their Event History date, staff only. While a note is new a banner on the info
   blue says whose it is and carries Acknowledge; every note is a card with the info blue edge. Markup this page writes; the
   banner's MudIcon is reached with ::deep. Tokens only. */
.stx-cnotes[b-lo0tk3eq7c] { margin-bottom: 8px; }
.stx-cnote-new[b-lo0tk3eq7c] { display: flex; align-items: flex-start; gap: 8px; background: var(--fs-kpi-info-bg); color: var(--mud-palette-text-primary);
                 border-radius: 6px; padding: 7px 9px; margin-bottom: 6px; font-size: 12px; line-height: 1.45; }
.stx-cnote-new[b-lo0tk3eq7c]  .stx-cnote-ico { color: var(--fs-kpi-info-fg); flex: none; margin-top: 1px; }
/* evhclient 10/14: Acknowledge is a MudButton, a child component's root, so ::deep reaches it; it keeps its width and the
   sentence case of the button it replaced. */
.stx-cnote-new[b-lo0tk3eq7c]  .mud-button-root { flex: none; text-transform: none; }
.stx-cnote-say[b-lo0tk3eq7c] { flex: 1 1 auto; min-width: 0; }
.stx-cnote-card[b-lo0tk3eq7c] { border-left: 3px solid var(--fs-kpi-info-fg); background: var(--mud-palette-surface); border-radius: 0 6px 6px 0;
                  box-shadow: inset 0 0 0 1px var(--fs-tl-line); padding: 6px 9px; margin-bottom: 4px; font-size: 12px; line-height: 1.45; }
.stx-cnote-meta[b-lo0tk3eq7c] { color: var(--fs-kpi-sub); }
.stx-cnote-tag[b-lo0tk3eq7c] { font-weight: 700; letter-spacing: .04em; color: var(--fs-kpi-info-fg); }
.stx-cnote-text[b-lo0tk3eq7c] { color: var(--mud-palette-text-primary); white-space: pre-line; }
/* ackreply 10/14 (R. Nugent; Gate 1 signed off 10/14): F&S's reply among the comments, the client note card's green twin; the
   client's own note on the client's screen keeps the blue. Tokens only. */
.stx-cnote-card.stx-cnote-reply[b-lo0tk3eq7c] { border-left-color: var(--fs-kpi-success-fg); }
.stx-cnote-reply .stx-cnote-tag[b-lo0tk3eq7c] { color: var(--fs-kpi-success-fg); }
[b-lo0tk3eq7c] .st-search { flex: 1 1 250px; min-width: 200px; max-width: 380px; }
/* wo 10/6 (R. Nugent; Gate 1 signed off 10/6): for staff, WO REC'D and WO OPEN are the door to the site's Work Orders
   window, a count you can click. wo2 10/6 (R. Nugent: red, not green, while open): a snow work order is usually
   corrective, a recall or a complaint, so the chip reads red while any of the site's work orders is open (stx-wo-open),
   green once every one is completed (stx-wo-done), and quiet at none, on the --fs-door tokens. The button is markup this
   page writes (WoCount), so the rules need no ::deep, and the class with the scope attribute outranks Mud's bare button
   reset. Hover comes last so it wins over both tones. */
.stx-wo-count[b-lo0tk3eq7c] { display: inline-block; min-width: 26px; padding: 1px 8px; border: 1px solid var(--fs-tl-line); border-radius: 6px; background: transparent; color: var(--fs-text-muted); font: inherit; font-weight: 700; line-height: inherit; cursor: pointer; }
.stx-wo-count.stx-wo-open[b-lo0tk3eq7c] { background: var(--fs-door-open-bg); border-color: var(--fs-door-open-line); color: var(--fs-door-open-fg); }
.stx-wo-count.stx-wo-done[b-lo0tk3eq7c] { background: var(--fs-door-done-bg); border-color: var(--fs-door-done-line); color: var(--fs-door-done-fg); }
/* docscol 10/16 (R. Nugent, Gate 1 signed off 10/16): the DOCS count wears the same box, quiet at none and on the chip blue while the
   site has files on the grid's date; before the hover rule, so hover still wins. The counting and could not count marks are muted. */
.stx-wo-count.stx-doc-has[b-lo0tk3eq7c] { background: var(--fs-chip-bg); border-color: var(--fs-chip-line); color: var(--fs-chip-fg); }
.stx-doc-wait[b-lo0tk3eq7c] { color: var(--fs-text-muted); }
.stx-wo-count:hover[b-lo0tk3eq7c] { border-color: currentColor; }
.stx-wo-count:focus-visible[b-lo0tk3eq7c] { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
/* wocarry 10/27 (R. Nugent; Gate 1 signed off 10/27): under WO OPEN, the day the oldest work order still open from an earlier day came
   in, while the site carries one; in a phone card's chip it sits beside the count. */
.stx-wo-since[b-lo0tk3eq7c] { display: block; margin-top: 2px; font-size: 10px; line-height: 1.2; font-weight: 600; color: var(--fs-text-muted); white-space: nowrap; }
.stx-card-chip .stx-wo-since[b-lo0tk3eq7c] { display: inline; margin: 0 0 0 4px; }

/* ── fitview 10/26 (R. Nugent; Gate 1 signed off 10/26): the page on every screen. ───────────────────────────────────────────────
   The table on a narrow window scrolls sideways inside its box rather than crushing its columns into tall rows: the table keeps
   the width its columns need (the client view's fewer columns need less), and Mud's container already scrolls across. From
   720 to 1199px, and on a touch screen above a phone, the name columns keep a readable width as well (the spec's density
   ladder); the title and the cards compact in site.css. */
.stx-grid[b-lo0tk3eq7c]  .mud-table-root { min-width: 1080px; }
.stx-grid-client[b-lo0tk3eq7c]  .mud-table-root { min-width: 860px; }
@media (min-width: 720.02px) and (max-width: 1199.98px), (min-width: 720.02px) and (pointer: coarse) {
    .stx-grid[b-lo0tk3eq7c]  td[data-label="Vendor"], .stx-grid[b-lo0tk3eq7c]  td[data-label="Account"] { min-width: 150px; }
    .stx-grid[b-lo0tk3eq7c]  td[data-label="Account Manager"], .stx-grid[b-lo0tk3eq7c]  td[data-label="Program Manager"] { min-width: 120px; }
}

/* fitview 10/26: the phone card list (SnowTracker20.razor, after the table), the house dual view (FS Vendor Tracker Adaptive Layout
   spec, section 4). The list is declared hidden once, and shown only inside the query, so nothing wider than a phone ever draws
   it (the spec's specificity trap). In the query the table goes and the list takes its place; a short touch screen turned
   sideways is a phone too (a short desktop window keeps the table). Zone 1 is the status and the row's actions, zone 2 the site (the button that opens the site panel), zone 3
   the fields, zone 4 the counts; an open problem washes the card red as it does the row, and the open site keeps the row's
   bar. The cards are this page's markup; the pills, the bubble and the icon buttons in them are child component roots, reached
   with ::deep where a rule needs them. Tokens only. */
.stx-cards[b-lo0tk3eq7c] { display: none; }
@media (max-width: 720px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
    .stx-grid[b-lo0tk3eq7c]  .mud-table { display: none; }
    .stx-cards[b-lo0tk3eq7c] { display: flex; flex-direction: column; gap: 12px; }
}
.stx-card[b-lo0tk3eq7c] { background: var(--mud-palette-surface); border: 1px solid var(--fs-tl-line); border-radius: var(--fs-radius-md);
            padding: 10px 12px; box-shadow: var(--fs-shadow-card); }
.stx-card-problem[b-lo0tk3eq7c] { background: var(--fs-row-problem-bg); box-shadow: inset 4px 0 0 var(--fs-tl-red), var(--fs-shadow-card); }
.stx-card-sel[b-lo0tk3eq7c] { background: var(--fs-focus-row); box-shadow: inset 4px 0 0 var(--mud-palette-primary), var(--fs-shadow-card); }
.stx-card-problem.stx-card-sel[b-lo0tk3eq7c] { background: var(--fs-row-problem-bg); }
.stx-card-strip[b-lo0tk3eq7c] { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.stx-card-status[b-lo0tk3eq7c] { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.stx-card-acts[b-lo0tk3eq7c] { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 2px; }
.stx-card-site[b-lo0tk3eq7c] { display: block; width: 100%; margin: 4px 0 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
                 text-align: left; cursor: pointer; }
.stx-card-site:focus-visible[b-lo0tk3eq7c] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; border-radius: 4px; }
.stx-card-acct[b-lo0tk3eq7c] { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--mud-palette-text-primary); }
.stx-card-store[b-lo0tk3eq7c] { color: var(--fs-text-secondary); white-space: nowrap; }
.stx-card-loc[b-lo0tk3eq7c] { display: block; font-size: 12px; color: var(--fs-text-secondary); }
.stx-card-vendor[b-lo0tk3eq7c] { display: block; font-size: 11.5px; color: var(--fs-text-muted); }
.stx-card-fields[b-lo0tk3eq7c] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; margin-top: 8px; padding-top: 8px;
                   border-top: 1px solid var(--fs-tl-line); }
.stx-card-k[b-lo0tk3eq7c] { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fs-text-muted); }
.stx-card-v[b-lo0tk3eq7c] { display: block; font-size: 13px; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.stx-card-chips[b-lo0tk3eq7c] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; }
.stx-card-chip[b-lo0tk3eq7c] { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--fs-tl-line); border-radius: 6px; padding: 1px 8px;
                 color: var(--fs-text-muted); font-weight: 700; }
.stx-card-chip .stx-wo-count[b-lo0tk3eq7c] { min-width: 0; padding: 0 6px; }
.stx-card-tl[b-lo0tk3eq7c] { margin: 10px -12px -10px; padding: 12px; background: var(--fs-rowexp-bg); border-top: 1px solid var(--fs-tl-line);
               border-radius: 0 0 var(--fs-radius-md) var(--fs-radius-md); }
.stx-cards-pager[b-lo0tk3eq7c] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 4px 2px 12px;
                   font-size: 12px; color: var(--fs-text-secondary); }
.stx-cards-empty[b-lo0tk3eq7c] { padding: 16px 4px; font-size: 13px; color: var(--fs-text-muted); }

/* prodtype 10/27 (R. Nugent; Gate 1 signed off 10/27): the 80% look that stood here is retired; site.css part 4 says why. */
/* /Shared/ErDispatchDetail.razor.rz.scp.css */
/* ErDispatchDetail (erdgrid 10/28, layout 10/29): the detail row under an ER Dispatch Manager grid row. The root and
   every element here are plain elements this component writes, so a scoped sheet reaches them. Tokens only. The left
   padding lines the blocks up past the chevron column; the three blocks wrap onto new lines on a narrow screen. */
.erdd[b-v10owb53c1] {
    padding: 12px 16px 14px 44px;
    background: var(--fs-rail-head-bg);
}

.erdd-grid[b-v10owb53c1] {
    display: grid;
    //grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-template-columns: 500px 800px 1fr;
    gap: 12px 28px;
}

.erdd-addr[b-v10owb53c1] {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fs-text-secondary);
}

.erdd-strong[b-v10owb53c1] {
    font-weight: 700;
}

.erdd-row[b-v10owb53c1] {
    display: flex;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.5;
}

.erdd-l[b-v10owb53c1] {
    flex: 0 0 130px;
    color: var(--fs-text-muted);
}

.erdd-v[b-v10owb53c1] {
    min-width: 0;
    color: var(--fs-text-secondary);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.erdd-list[b-v10owb53c1] {
    margin: 0;
    padding-left: 16px;
}

/* 10/29 (Eric): the Service block sits 1/2 inch further left and the Approved By block 1/4 inch further right.
   The detail row spans the grid's 1650px minimum width, so the blocks never wrap and these offsets never push
   a block off the edge. */
.erdd-svc[b-v10owb53c1] {
    margin-left: -0.5in;
}

.erdd-people[b-v10owb53c1] {
    margin-left: 0.25in;
}
/* /Shared/MainLayout.razor.rz.scp.css */
/* The app shell (navfit 9/23, R. Nugent). .fc-shell and .fc-main were an inline <style> block in
   MainLayout.razor, which Blazor emits globally (UI Standard rule 2). This file used to hold the project
   template's rules for classes this layout no longer has (.page, .sidebar, .top-row); the one rule that
   still matched, the page's side padding from 641px up, is kept below unchanged. */
.fc-shell[b-pprhoyqsud] { display: flex; min-height: 100vh; align-items: stretch; }
.fc-main[b-pprhoyqsud] { flex: 1; min-width: 0; }

/* Kept from the template: 2rem left and 1.5rem right from 641px up. It has to beat Bootstrap's px-4
   utility on the same element, which is why it keeps its !important. */
@media (min-width: 641px) {
    article[b-pprhoyqsud] { padding-left: 2rem !important; padding-right: 1.5rem !important; }
}

/* Under 960px the menu leaves the row (NavMenu): its app bar stacks above the page, and the menu slides
   in over it. */
@media (max-width: 959.98px) {
    .fc-shell[b-pprhoyqsud] { flex-direction: column; }
}
/* /Shared/NavMenu.razor.rz.scp.css */
/* NavMenu (navfit 9/23, R. Nugent). These rules were an inline <style> block in NavMenu.razor, which
   Blazor emits globally (UI Standard rule 2); every colour now reads an --fs-nav-* token from site.css
   (rule 1). This file used to hold the project template's rules for classes the menu no longer has
   (.navbar-toggler, .top-row, .nav-item and friends), so nothing that styled the menu was lost. NavLink
   renders the <a> itself, so the link rules reach it with ::deep from .fcnav-scroll, an element this
   component writes. The MudAppBar is styled in site.css: a scoped stylesheet cannot reach a Mud root. */
.fcnav[b-kcntnjcq4f] {
    width: 240px; flex-shrink: 0;
    background: var(--fs-nav-bg); color: var(--fs-nav-ink);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    transition: width .15s ease, transform .2s ease;
}

.fcnav-head[b-kcntnjcq4f] {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 14px; border-bottom: 1px solid var(--fs-nav-hover);
}
.fcnav-burger[b-kcntnjcq4f] {
    background: transparent; border: none; color: var(--fs-nav-ink);
    font-size: 18px; cursor: pointer;
    width: 34px; height: 34px; border-radius: 7px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.fcnav-burger:hover[b-kcntnjcq4f] { background: var(--fs-nav-hover); color: var(--fs-nav-ink-strong); }
.fcnav-brand[b-kcntnjcq4f] { font-weight: 700; font-size: 16px; color: var(--fs-nav-ink-strong); white-space: nowrap; }

.fcnav-scroll[b-kcntnjcq4f] { flex: 1; overflow-y: auto; padding-bottom: 16px; }

.fcnav-section[b-kcntnjcq4f] {
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--fs-nav-muted); padding: 14px 18px 4px; white-space: nowrap;
}

.fcnav-scroll[b-kcntnjcq4f]  .fcnav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; color: var(--fs-nav-ink); text-decoration: none;
    font-size: 14px; white-space: nowrap;
    border-left: 3px solid transparent;
}
.fcnav-scroll[b-kcntnjcq4f]  .fcnav-link:hover { background: var(--fs-nav-hover); color: var(--fs-nav-ink-strong); }
.fcnav-scroll[b-kcntnjcq4f]  .fcnav-link.active { background: var(--fs-nav-hover); color: var(--fs-nav-ink-strong); border-left-color: var(--fs-nav-accent); }
.fcnav-scroll[b-kcntnjcq4f]  .fcnav-link .fs-ico { width: 22px; font-size: 16px; flex-shrink: 0; }

/* From 960px up the menu sits beside the page and folds to the 64px icon rail on request. These rules
   come after the link rules on purpose: the folded link rule ties them on specificity and wins on order. */
@media (min-width: 960px) {
    .fcnav-scrim[b-kcntnjcq4f] { display: none; }
    .fcnav-collapsed[b-kcntnjcq4f] { width: 64px; }
    .fcnav-collapsed .fcnav-brand[b-kcntnjcq4f],
    .fcnav-collapsed .fcnav-label[b-kcntnjcq4f],
    .fcnav-collapsed .fcnav-section[b-kcntnjcq4f] { display: none; }
    .fcnav-collapsed .fcnav-head[b-kcntnjcq4f] { justify-content: center; }
    .fcnav-collapsed[b-kcntnjcq4f]  .fcnav-link { justify-content: center; padding: 12px 0; gap: 0; }
}

/* Under 960px the menu is off the page until opened, then over it: full width with its labels whatever
   the fold choice says, above the site drawers (1200s) and below every dialog (1400 up). Hidden while
   closed, so its links also leave the tab order. */
@media (max-width: 959.98px) {
    .fcnav[b-kcntnjcq4f] {
        position: fixed; top: 0; bottom: 0; left: 0; height: auto; z-index: 1250;
        transform: translateX(-100%); visibility: hidden;
        transition: transform .2s ease, visibility 0s linear .2s;
    }
    .fcnav.fcnav-open[b-kcntnjcq4f] { transform: none; visibility: visible; transition: transform .2s ease; }
    .fcnav-scrim[b-kcntnjcq4f] { position: fixed; inset: 0; z-index: 1240; background: var(--fs-scrim); }
}

/* fitview 10/26 (R. Nugent; Gate 1 signed off 10/26): from 960 to 1440px the menu opens as the icon rail (NavMenu.razor, FoldBelow).
   fcnav-auto is the first draw, before the width is read: the rail's look in that band and the full menu above it, so nothing
   moves when the read settles it. The rules are the folded ones above, for that class, and come after the link rules for the
   same reason those do. */
@media (min-width: 960px) and (max-width: 1439.98px) {
    .fcnav-auto[b-kcntnjcq4f] { width: 64px; }
    .fcnav-auto .fcnav-brand[b-kcntnjcq4f],
    .fcnav-auto .fcnav-label[b-kcntnjcq4f],
    .fcnav-auto .fcnav-section[b-kcntnjcq4f] { display: none; }
    .fcnav-auto .fcnav-head[b-kcntnjcq4f] { justify-content: center; }
    .fcnav-auto[b-kcntnjcq4f]  .fcnav-link { justify-content: center; padding: 12px 0; gap: 0; }
}
/* /Shared/ServiceTrackerMapCanvas.razor.rz.scp.css */
/* ServiceTrackerMapCanvas scoped styles (svyland 9/15). The page's chrome still lives in its inline <style>
   block, which is pre existing debt (UI Standard rule 2 notes that inline blocks are global). New rules start
   here instead, tokens only (rule 1). */

/* Right column of a rail row: the status pill with the survey chip under it. */
.stm-rail-right[b-cqdypzou94] { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }

/* /Shared/SnowClientSiteCard.razor.rz.scp.css */
/* SnowClientSiteCard (snowclient 9/8). Rail row metrics follow the staff rail (8/10px padding,
   1px dividers); the header is a real button so the row is keyboard reachable. Tokens only. */
.scs[b-u34ddn3wwz] { border-bottom: 1px solid var(--fs-tl-line); background: var(--mud-palette-surface); }
.scs-focused[b-u34ddn3wwz] { background: var(--fs-focus-row); }
.scs-head[b-u34ddn3wwz] { display: block; width: 100%; text-align: left; padding: 10px 12px; margin: 0; border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; }
.scs-head:focus-visible[b-u34ddn3wwz] { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.scs-row[b-u34ddn3wwz] { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.scs-title[b-u34ddn3wwz] { font-size: 13px; font-weight: 700; color: var(--mud-palette-text-primary); line-height: 1.35; }
.scs-caret[b-u34ddn3wwz] { flex: none; display: inline-flex; color: var(--fs-text-muted); }
.scs-caret[b-u34ddn3wwz]  .mud-icon-root { font-size: 18px; width: 18px; height: 18px; }
.scs-sub[b-u34ddn3wwz] { font-size: 12px; color: var(--fs-text-muted); margin-top: 1px; }
.scs-chips[b-u34ddn3wwz] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
/* svyrow 9/14: .scs-survey moved to the global .fas-svy-badge (FasSurveyBadge). */
.scs-body[b-u34ddn3wwz] { padding: 0 12px 12px; }
.scs-tl-head[b-u34ddn3wwz] { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 2px 0 8px; }
.scs-tl-title[b-u34ddn3wwz] { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--fs-text-secondary); }
.scs-counts[b-u34ddn3wwz] { font-size: 11px; color: var(--fs-text-muted); white-space: nowrap; }
.scs-loading[b-u34ddn3wwz] { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fs-text-muted); padding: 6px 0; }
.scs-ai[b-u34ddn3wwz] { background: var(--fs-ai-bg); border: 1px solid var(--fs-ai-border); border-radius: 6px; padding: 7px 9px; margin: 2px 0 10px; }
.scs-ai-head[b-u34ddn3wwz] { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--fs-ai-fg); }
.scs-ai-head[b-u34ddn3wwz]  .mud-icon-root { font-size: 15px; width: 15px; height: 15px; }
.scs-ai-flag[b-u34ddn3wwz] { display: inline-block; background: var(--fs-ai-warn-bg); color: var(--fs-ai-warn-fg); border: 1px solid var(--fs-ai-warn-border); border-radius: 10px; padding: 1px 8px; font-size: 10px; font-weight: 700; margin: 5px 0 0; }
.scs-ai-body[b-u34ddn3wwz] { font-size: 12px; line-height: 1.5; color: var(--mud-palette-text-primary); margin-top: 4px; }
.scs-ai-label[b-u34ddn3wwz] { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--fs-text-secondary); margin-top: 7px; }
.scs-ai-list[b-u34ddn3wwz] { margin: 2px 0 0; padding-left: 16px; }
.scs-ai-list li[b-u34ddn3wwz] { font-size: 11px; line-height: 1.45; color: var(--mud-palette-text-primary); }
.scs-ai-foot[b-u34ddn3wwz] { font-size: 11px; line-height: 1.45; color: var(--fs-text-secondary); margin-top: 6px; }
/* Staff detail block and staff tooling slot (opsparity 9/11): the ops rail's inline markup moved in
   when the two site cards merged, rehoused on tokens. Clients never render any of this. */
.scs-det[b-u34ddn3wwz] { font-size: 12px; line-height: 1.55; color: var(--mud-palette-text-primary); margin: 2px 0 8px; }
.scs-det-strong[b-u34ddn3wwz] { font-weight: 600; }
.scs-det-label[b-u34ddn3wwz] { color: var(--fs-text-muted); }
.scs-cert[b-u34ddn3wwz] { background: var(--fs-cert-bg); border: 1px solid var(--fs-cert-border); border-radius: 6px; padding: 6px 8px; margin: 0 0 10px; font-size: 12px; line-height: 1.5; }
.scs-cert-head[b-u34ddn3wwz] { font-weight: 700; color: var(--fs-cert-fg); margin-bottom: 2px; }
.scs-cert-total[b-u34ddn3wwz] { font-weight: 700; font-size: 14px; color: var(--mud-palette-text-primary); margin-right: 4px; }
.scs-cert-src[b-u34ddn3wwz] { color: var(--fs-text-muted); font-size: 11px; }
.scs-cert-narr[b-u34ddn3wwz] { margin-top: 3px; color: var(--fs-text-secondary); font-size: 11px; max-height: 80px; overflow: auto; }
.scs-empty[b-u34ddn3wwz] { font-size: 12px; color: var(--fs-text-muted); padding: 4px 0 6px; }
.scs-staff[b-u34ddn3wwz] { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--fs-tl-line); font-size: 12px; line-height: 1.55; color: var(--mud-palette-text-primary); }
/* /Shared/SnowMapsCanvas.razor.rz.scp.css */
/* SnowMapsCanvas scoped styles: the 1G client Storm Status presentation (snowclient 9/8, R. Nugent), and
   since pagebar 9/23 the map row's sizes and its tablet and phone layout. The top bar is FasPageBar (its rules
   in site.css) and the photo viewer is FasPhotoLightbox (oneviewer 9/30). Every colour is a token
   (standing rule 1); no hex here. */

/* app bar badge (FasPageBar's Badges slot; written in this page, so this scoped rule reaches it) */
.scv-live[b-qgsix7s46i]    { background: var(--fs-live-bg); color: var(--fs-live-fg); font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 3px 9px; border-radius: 4px; }

/* event header */
.scv-head[b-qgsix7s46i]    { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fs-gap-md); }
.scv-title[b-qgsix7s46i]   { margin: 0; font-size: 1.75rem; line-height: 1.2; font-weight: 700; color: var(--mud-palette-text-primary); }
.scv-sub[b-qgsix7s46i]     { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--fs-text-muted); }
.scv-updated[b-qgsix7s46i] { flex: none; font-size: 12px; color: var(--fs-text-muted); padding-top: 8px; }

/* view toggle + legend row */
.scv-viewrow[b-qgsix7s46i] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px 2px; }
.scv-eyebrow[b-qgsix7s46i] { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--fs-text-muted); }
.scv-legend-label[b-qgsix7s46i] { margin-left: 14px; }
.scv-seg[b-qgsix7s46i] { border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: var(--fs-text-secondary); font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--fs-radius-md); cursor: pointer; }
.scv-seg + .scv-seg[b-qgsix7s46i] { margin-left: -6px; }
.scv-seg-on[b-qgsix7s46i] { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.scv-seg:focus-visible[b-qgsix7s46i] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.scv-legend[b-qgsix7s46i] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fs-text-secondary); }
.scv-dot[b-qgsix7s46i] { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.scv-dot-completed[b-qgsix7s46i] { background: var(--fs-tl-green); }
.scv-dot-followup[b-qgsix7s46i]  { background: var(--fs-tl-amber); }
.scv-dot-required[b-qgsix7s46i]  { background: var(--fs-tl-blue); }
.scv-dot-problem[b-qgsix7s46i]   { background: var(--fs-tl-red); }
.scv-dot-none[b-qgsix7s46i]      { background: var(--fs-tl-neutral); }
/* mapsix 10/6 (R. Nugent): the staff legend's dots, drawn as azmap.js draws the bubbles from the same tokens: the two
   greys of No Service Required, Neither's white with its grey ring, and the red ring an open problem wears round its
   status colour. Blue, green and amber are the ladder's own dots above, which keep the client legend unchanged. */
.scv-dot-nsr-open[b-qgsix7s46i]  { background: var(--fs-map-nsr-open); }
.scv-dot-nsr-done[b-qgsix7s46i]  { background: var(--fs-map-nsr-done); }
.scv-dot-clear[b-qgsix7s46i]     { background: var(--fs-map-ring); box-shadow: inset 0 0 0 1.5px var(--fs-map-clear-ring); }   /* mapedge 10/14: the bubble's ring */
.scv-dot-ring[b-qgsix7s46i]      { background: var(--fs-map-ring); box-shadow: inset 0 0 0 2.5px var(--fs-tl-red); }
.scv-note[b-qgsix7s46i] { margin-left: auto; font-size: 11px; color: var(--fs-text-muted); }
/* addsite 9/29: the Add sites layer's note line under the filter bar. Its legend entry moved onto the map as the
   Add sites key on 10/5 (mapkey). */
.scv-addnote[b-qgsix7s46i] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--mud-palette-primary); padding: 0 4px 8px; }
.scv-addhint[b-qgsix7s46i] { font-size: 11px; font-weight: 500; color: var(--fs-text-muted); }

/* site rail */
.scv-rail[b-qgsix7s46i] { width: 360px; flex: none; border-left: 1px solid var(--fs-tl-line); max-height: 600px; overflow: auto; background: var(--mud-palette-surface); }
.scv-rail-head[b-qgsix7s46i] { position: sticky; top: 0; z-index: 1; padding: 8px 12px; font-size: 13px; font-weight: 700; background: var(--fs-rail-head-bg); border-bottom: 1px solid var(--fs-tl-line);
                 display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scv-railbtn[b-qgsix7s46i] { font-size: 11px; padding: 2px 9px; }
/* viewall 9/28: greyed out the way MudBlazor 9.5 greys an outlined button, from the same palette tokens. */
.scv-railbtn:disabled[b-qgsix7s46i] { color: var(--mud-palette-action-disabled); border-color: var(--mud-palette-action-disabled-background); cursor: default; }
.scv-center[b-qgsix7s46i] { padding: 24px; text-align: center; }
.scv-empty[b-qgsix7s46i]  { padding: 16px 12px; font-size: 13px; color: var(--fs-text-muted); }

/* event summary card */
.scv-summary[b-qgsix7s46i] { margin-top: 12px; padding: 14px 16px 12px; border-radius: var(--fs-radius-md); background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); box-shadow: var(--fs-shadow-card); }
.scv-summary-eyebrow[b-qgsix7s46i] { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .12em; opacity: .85; }
.scv-summary-icon[b-qgsix7s46i] { display: inline-flex; }
.scv-summary-icon[b-qgsix7s46i]  .mud-icon-root { font-size: 14px; width: 14px; height: 14px; }
.scv-summary-title[b-qgsix7s46i] { margin-top: 6px; font-size: 15px; font-weight: 700; line-height: 1.35; }
.scv-summary-body[b-qgsix7s46i]  { margin-top: 8px; font-size: 13px; line-height: 1.55; }
.scv-summary-foot[b-qgsix7s46i]  { margin-top: 10px; font-size: 11px; opacity: .8; }
/* Legend dots are filter buttons (9/11). The dot already carries the status colour, so the pressed
   state only has to read as pressed: a rule, a surface and bolder text. Tokens only. */
.scv-legend-btn[b-qgsix7s46i] { border: 1px solid transparent; background: transparent; font: inherit; font-size: 12px; color: var(--fs-text-secondary); padding: 2px 9px; border-radius: 999px; cursor: pointer; }
.scv-legend-btn:hover[b-qgsix7s46i] { border-color: var(--fs-tl-line); background: var(--mud-palette-surface); }
.scv-legend-btn:focus-visible[b-qgsix7s46i] { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.scv-legend-on[b-qgsix7s46i] { border-color: var(--mud-palette-primary); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font-weight: 700; }
.scv-legend-n[b-qgsix7s46i] { font-weight: 700; color: var(--fs-text-muted); margin-left: 3px; }
.scv-legend-on .scv-legend-n[b-qgsix7s46i] { color: var(--mud-palette-primary); }
.scv-legend-clear[b-qgsix7s46i] { font-size: 11px; padding: 2px 9px; }

/* The survey rating chips (9/11) moved to Components/Fas/FasSurveyLegend.razor.css on 9/15, when the Service
   Tracker Map became the second map to carry them. */

/* The map row (pagebar 9/23, R. Nugent). From 960px up the vendor panel (staff, with the vendor layer on), the
   map and the site rail sit side by side exactly as before; the sizes moved here from inline styles unchanged.
   Under 960px there is no room beside, so the three stack at full width. The panel and the rail scroll inside
   a cap, and the map keeps most of the screen height while leaving room around it to scroll the page past it
   on a touch screen. 960 is where the side menu leaves the row (Shared/NavMenu). */
.scv-maprow[b-qgsix7s46i] { display: flex; align-items: stretch; }
.scv-vendor[b-qgsix7s46i] { width: 300px; flex: none; height: 600px; border-right: 1px solid var(--fs-tl-line); }
.scv-map[b-qgsix7s46i] { flex: 1; height: 600px; }
@media (max-width: 959.98px) {
    .scv-maprow[b-qgsix7s46i] { flex-direction: column; }
    .scv-vendor[b-qgsix7s46i] { width: auto; height: auto; max-height: 45vh; border-right: 0; border-bottom: 1px solid var(--fs-tl-line); }
    .scv-map[b-qgsix7s46i] { flex: none; height: 60vh; min-height: 240px; }
    .scv-rail[b-qgsix7s46i] { width: auto; max-height: 70vh; border-left: 0; border-top: 1px solid var(--fs-tl-line); }
}
/* fitview 10/26 (R. Nugent; Gate 1 signed off 10/26): from 960px up the map takes the height the window has left, so the event
   summary sits on the window's last line and nothing is left white under it; the map was a fixed 600px at every zoom. The
   page's column is .scv-fill (this component's div) inside the shell's (site.css). The map's MudPaper (scv-mappaper, a child
   component root, hence ::deep) flexes in it; the row, the map, the vendor panel and the rail stretch to the paper, and the
   rail scrolls inside. A short window keeps a floor of 420px and the page scrolls past it. The map redraws to its box as the
   box changes (azmap.js). */
@media (min-width: 960px) and (min-height: 500.02px) {
    .scv-fill[b-qgsix7s46i] { flex: 1 0 auto; display: flex; flex-direction: column; }
    .scv-fill[b-qgsix7s46i]  .scv-mappaper { flex: 1 1 0; min-height: 420px; display: flex; flex-direction: column; }
    .scv-maprow[b-qgsix7s46i] { flex: 1 1 0; min-height: 0; }
    .scv-maprow .scv-map[b-qgsix7s46i], .scv-maprow .scv-vendor[b-qgsix7s46i] { height: auto; }
    .scv-maprow .scv-rail[b-qgsix7s46i] { max-height: none; }
}

/* kpiwo 10/23: the staff header's weights and the subtitle's grey, which were inline styles (standing rule 1), as classes.
   Both are MudText roots, reached with ::deep from this component's own div. */
[b-qgsix7s46i] .stm-title { font-weight: 700; }
[b-qgsix7s46i] .stm-subtitle { color: var(--fs-text-muted); font-weight: 600; }
/* skew 10/26 (R. Nugent): the title box may be narrower than its content, so on a narrow phone the follow-up meter's bar gives way
   (SnowFollowUpMeter.razor.css) rather than the title box pushing the page past the screen's edge. */
.stm-titlebox[b-qgsix7s46i] { min-width: 0; }

/* prodtype 10/27 (R. Nugent; Gate 1 signed off 10/27): the 80% look that stood here is retired; site.css part 4 says why. */

/* maphide 10/27 (R. Nugent; Gate 1 signed off 10/27): the client header's right side, Updated and then Hide summary and Hide
   filters (FasSectionToggle), as on the grid. The header wraps, so on a phone the side drops under the title, at the right. */
.scv-head[b-qgsix7s46i] { flex-wrap: wrap; }
.scv-headside[b-qgsix7s46i] { flex: none; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }