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

/* frontend/Components/Layout/AppShell.razor.rz.scp.css */
.ui-shell-gate[b-zvt243ubuw] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    background: var(--page);
    z-index: var(--z-lightbox);
}

.ui-shell-gate-line[b-zvt243ubuw] {
    width: var(--gate-progress-w);
    height: var(--gate-progress-h);
    background: var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}

.ui-shell-gate-line[b-zvt243ubuw]::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: var(--brand);
    animation: ui-shell-gate-indet-b-zvt243ubuw var(--indet-dur) var(--ease) infinite;
}

.ui-shell-gate-text[b-zvt243ubuw] {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    margin: 0;
}

@keyframes ui-shell-gate-indet-b-zvt243ubuw {
    0% {
        left: -40%;
    }

    100% {
        left: 100%;
    }
}

/* FPL-001/REQ-004 FR-2/FR-5, phase 2c — the bar and the page frame. Every value is var(--token)
   (UI-LAYER.md §6). References no MudBlazor/Radzen supplier type or variable (FR-12) -- plain
   HTML/CSS/SVG only. Module dropdowns and the user menu are absent (see the .razor file's own
   header comment for why); their eventual markup is not drawn here at all yet, so there is nothing
   in this file that anticipates their shape. */

.ui-shell[b-zvt243ubuw] {
    display: flex;
    flex-direction: column;
    /* FPL-001/REQ-028 (item 64, post-fix diagnostic pass): was 100vh -- a raw viewport unit that
       doesn't shrink when an unrelated horizontal scrollbar already eats some of the viewport's
       height, so the shell's own floor could overshoot the ACTUAL available space and force a
       self-inflicted vertical scrollbar on short-content routes. `100%` resolves against the real
       rendered box instead; shell-frame.css's own `html:has(.ui-shell), body:has(.ui-shell) { height:
       100% }` completes the chain a percentage height needs. Still a MIN, not a fixed height, and
       nothing here sets overflow:hidden -- a page taller than the viewport still grows past it and
       scrolls normally (see shell-frame.css's own comment for how this was proved). The "every route
       fills the viewport" decision itself (REQ-004/phase-2c) is unchanged -- only its unit. */
    min-height: 100%;
}

.ui-shell-bar[b-zvt243ubuw] {
    position: sticky;
    top: 0;
    z-index: var(--z-menu);
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    height: var(--topbar-h);
    padding: 0 var(--space-16);
    background: var(--topbar-bg);
    color: var(--topbar-text);
    font-size: var(--fs-body);
}

.ui-shell-logo[b-zvt243ubuw] {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    height: var(--topbar-h);
    color: inherit;
    text-decoration: none;
    margin-right: calc(var(--logo-gap) - var(--space-8));
}

.ui-shell-logo-text[b-zvt243ubuw] {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--topbar-text-active);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-shell-cluster[b-zvt243ubuw] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-left: auto;
}

.ui-shell-bar-btn[b-zvt243ubuw] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h-lg);
    height: var(--control-h-lg);
    border-radius: var(--radius);
    background: none;
    border: none;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--motion-micro) var(--ease);
}

.ui-shell-bar-btn:hover[b-zvt243ubuw] {
    background: var(--topbar-fill);
}

/* Item 47 (FPL-001/REQ-017 FR-12): every plain <a>/<button> in the bar drew the browser's own
   default outline (measured live: "auto 1px rgb(16, 16, 16)" on the logo link and every bar-btn) --
   this file had no :focus-visible rule at all. The sheet's own rule (01-shell.html, its universal
   `:focus-visible,.is-focused{outline:var(--focus-w) solid var(--accent);outline-offset:var(--focus-offset)}`,
   drawn on "Policies" against the SAME navy bar) is the layer-wide ring, not a dark-bar-specific
   variant -- applied here verbatim, covering every interactive element the bar itself renders. */
.ui-shell-logo:focus-visible[b-zvt243ubuw],
.ui-shell-bar-btn:focus-visible[b-zvt243ubuw],
.ui-shell-mod:focus-visible[b-zvt243ubuw],
.ui-shell-userbtn:focus-visible[b-zvt243ubuw],
.ui-shell-login-link:focus-visible[b-zvt243ubuw],
.ui-shell-no-tenant-btn:focus-visible[b-zvt243ubuw],
.ui-shell-seam-dismiss:focus-visible[b-zvt243ubuw] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-shell-ic[b-zvt243ubuw] {
    width: var(--icon-lg);
    height: var(--icon-lg);
    flex: none;
}

.ui-shell-badge[b-zvt243ubuw] {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    min-width: var(--badge);
    height: var(--badge);
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--fs-caption);
    line-height: var(--badge);
    font-weight: var(--fw-medium);
    text-align: center;
}

.ui-shell-login-link[b-zvt243ubuw] {
    margin-left: auto;
    color: var(--topbar-text-active);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    text-decoration: none;
}

.ui-shell-seam[b-zvt243ubuw] {
    padding: var(--space-8) var(--space-16);
    background: var(--fill-1);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

/* FPL-001/REQ-010 FR-3 -- LEGACY_PILOT_ISLAND_MISSING is an error, not a note: it must read as one. Body text stays --text on --error-bg (--error on --error-bg is ~4.2:1, under AA); the error colour is the edge. */
.ui-shell-seam-error[b-zvt243ubuw] {
    background: var(--error-bg);
    color: var(--text);
    border-left: var(--space-4) solid var(--error);
}

.ui-shell-seam-dismiss[b-zvt243ubuw] {
    margin-left: var(--space-8);
    background: none;
    border: none;
    color: var(--accent);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    cursor: pointer;
    text-decoration: underline;
}

.ui-shell-content[b-zvt243ubuw] {
    flex: 1;
    padding: var(--content-pad);
    background: var(--page);
    /* FR-5's own scoped plumbing property (same shape as Grid's --ui-grid-sticky-top, DEC-015 §2's
       precedent): published from the real bar's height token, not a literal, so it is correct by
       construction whatever the bar's own content turns out to be. No page ever knows the bar's
       height (REQ-004 Amended (2)). */
    --ui-grid-sticky-top: var(--topbar-h);
}

/* TENANT_NONE_ASSIGNED's frame rendering -- the authenticated-but-no-tenant-selected dead end. */

.ui-shell-no-tenant[b-zvt243ubuw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    padding: var(--panel-pad);
    text-align: center;
    color: var(--text-secondary);
}

.ui-shell-no-tenant code[b-zvt243ubuw] {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
}

.ui-shell-no-tenant-btn[b-zvt243ubuw] {
    padding: var(--space-8) var(--space-16);
    background: var(--brand);
    color: var(--surface);
    border: none;
    border-radius: var(--radius);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    cursor: pointer;
}

/* Module nav (FR-3), consuming row 9/Menu -- swap merge, phase 2c. */

.ui-shell-modules[b-zvt243ubuw] {
    display: flex;
    align-items: stretch;
    height: var(--topbar-h);
    gap: var(--mod-gap);
}

.ui-shell-mod-wrap[b-zvt243ubuw] {
    position: relative;
    display: flex;
}

.ui-shell-mod[b-zvt243ubuw] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--topbar-h);
    padding: 0 var(--mod-pad-x);
    white-space: nowrap;
    text-decoration: none; /* a lone-link module (Documents) is an <a> */
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    border-bottom: var(--topbar-underline) solid transparent;
    cursor: pointer;
    transition: color var(--motion-micro) var(--ease);
}

.ui-shell-mod-active[b-zvt243ubuw] {
    color: var(--topbar-text-active);
    font-weight: var(--fw-medium);
    border-bottom-color: var(--topbar-text-active);
}

.ui-shell-ic-caret[b-zvt243ubuw] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
}

/* bar-fold (UI-LAYER.md §15): below 1024px the individual module labels hide and the single
   "Modules ▾" button takes over; above it, the reverse. */
.ui-shell-mod-fold[b-zvt243ubuw] {
    display: none;
}

.ui-shell-mod-fold-ic[b-zvt243ubuw] {
    display: none;
}

@media (max-width: 1024px) {
    .ui-shell-modules[b-zvt243ubuw] {
        display: none;
    }

    .ui-shell-mod-fold[b-zvt243ubuw] {
        display: flex;
    }

    /* 01-shell.html state c's own drawn cluster: only tenant/search/bell/user remain at this width --
       add/tracker/AI move into the fold menu instead (AppShell.razor's BuildFoldItems). */
    .ui-shell-hide-narrow[b-zvt243ubuw] {
        display: none;
    }
}

/* The sheet draws no phone-width bar, and below this width the bar's parts no longer fit: the
   Modules fold keeps only its icon (the same 400px breakpoint PageHeader uses, UI-LAYER.md §15). */
@media (max-width: 400px) {
    .ui-shell-mod-fold[b-zvt243ubuw] {
        padding: 0 var(--space-8);
    }

    .ui-shell-mod-fold-label[b-zvt243ubuw],
    .ui-shell-mod-fold .ui-shell-ic-caret[b-zvt243ubuw] {
        display: none;
    }

    .ui-shell-mod-fold-ic[b-zvt243ubuw] {
        display: block;
    }
}

/* User menu (avatar + caret), consuming row 9/Menu -- swap merge, phase 2c. */

.ui-shell-userbtn[b-zvt243ubuw] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--control-h-lg);
    padding: 0 var(--space-4);
    border-radius: var(--radius);
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    transition: background var(--motion-micro) var(--ease);
}

.ui-shell-userbtn:hover[b-zvt243ubuw] {
    background: var(--topbar-fill);
}

.ui-shell-avatar[b-zvt243ubuw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar);
    height: var(--avatar);
    border-radius: var(--radius-pill);
    background: var(--topbar-fill);
    color: var(--topbar-text-active);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    flex: none;
}

/* The bar's dropdown rows are 30% taller than Menu's shared default (32px -> 41.6px): the owner found them too
   short to hit comfortably. Scoped to the bar here, not in Menu.razor.css -- Menu is also the page-header, tab,
   tree and toolbar menu, and those keep the layer's own row height. */
.ui-shell-bar[b-zvt243ubuw]  .ui-mi {
    min-height: calc(var(--control-h) * 1.3);
    font-family: inherit;   /* <button class="ui-mi"> would take the browser button font while <a class="ui-mi"> inherits; one menu mixes both */
}

/* A two-column menu (HR) shows six of the taller rows before a column scrolls: Menu's own cap is six unscaled rows
   (calc(var(--control-h) * 6)), which with the 1.3x rows above would show only 4.6. Six rows measure 249.56px and
   report a 250px scrollHeight, so the cap carries --space-2 of slack instead of sitting on that edge. Scoped to the
   submenu columns: the flat module menus, the Modules fold and the user menu keep Menu's own cap, as before. */
.ui-shell-bar[b-zvt243ubuw]  .ui-menu-cols > .ui-menu-scroll,
.ui-shell-bar[b-zvt243ubuw]  .ui-menu-sub {
    max-height: calc(var(--control-h) * 1.3 * 6 + var(--space-2));
}
/* frontend/Components/Layout/Legacy/LegacyIsland.razor.rz.scp.css */
/* FPL-001/REQ-016 (item 46) — the legacy island's frame. It is a plain block at its HOST's width (a drawer body, a page column) and never a scroll container of its own: the host's
   scroller scrolls it (a wheel over the island moves the drawer body, never the document). Everything that makes the content look legacy comes from the `.legacy-scope` class the root
   also carries (the scoped legacy stylesheets) — this rule deliberately restyles nothing. */
.ui-legacy-island[b-g2e3dck5is] {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/* frontend/Components/Layout/Legacy/LegacyIslandSpecimen.razor.rz.scp.css */
.legacy-island-specimen[b-gymoerol0d] { display: flex; flex-direction: column; gap: 12px; }
.legacy-island-specimen-note[b-gymoerol0d] { margin: 0; }
.legacy-island-specimen-actions[b-gymoerol0d] { display: flex; gap: 8px; flex-wrap: wrap; }
.legacy-island-specimen-filler[b-gymoerol0d] { height: 900px; border: 1px dashed currentColor; opacity: 0.5; padding: 8px; }
/* frontend/Components/Layout/Legacy/LegacyMudLayout.razor.rz.scp.css */
.page[b-o6g588k838] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

.content[b-o6g588k838] {
    /* Phase 2c swap merge: no longer redeclared here. AppShell now publishes
       --ui-grid-sticky-top: var(--topbar-h) on its own .ui-shell-content ancestor (a real element
       every page, legacy included, now renders inside) -- a legacy page's Grid inherits that value
       through ordinary CSS custom-property inheritance. Redeclaring a stale literal here (this used
       to read 52px, the OLD legacy-only bar's height) would silently shadow the real one. */
}

.sidebar[b-o6g588k838] {
    background-image: linear-gradient(317deg, rgb(0 0 0) 0%, #003d69 70%);
}

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

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

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

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

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

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

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

    article[b-o6g588k838] {
        padding-left: var(--page-gutter, 16px) !important;
        padding-right: var(--page-gutter, 16px) !important;
    }
}

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

#blazor-error-ui .dismiss[b-o6g588k838] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}


.opc-nav[b-o6g588k838] {
    padding: 8px;
    border-radius: 12px;
    border: 1px solid rgba(127, 127, 127, 0.18);
    background: linear-gradient(317deg, rgb(0 0 0) 0%, #003d69 70%);
    backdrop-filter: blur(6px);
    color: #eeeeeee3; /* default text color for the entire menu */
}

/* Links */
.opc-nav[b-o6g588k838]  .mud-nav-link {
    border-radius: 10px;
    padding: 8px 12px;
    margin: 2px 4px;
    transition: background-color .15s ease, color .15s ease, transform .05s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #eeeeeee3; /* ensure nav link text uses requested color */
}

/* Hover state */
.opc-nav[b-o6g588k838]  .mud-nav-link:hover {
    background-color: rgba(127, 127, 127, 0.12);
}

/* Ensure icons adopt the same color by default */
.opc-nav[b-o6g588k838]  .mud-icon-root,
.opc-nav[b-o6g588k838]  .mud-nav-link .mud-icon-root {
    color: #eeeeeee3;
}

/* Active state (works for both class-based and aria-current) */
.opc-nav[b-o6g588k838]  .mud-nav-link.mud-nav-link-active,
.opc-nav[b-o6g588k838]  .mud-nav-link[aria-current="page"] {
    background-color: var(--mud-palette-primary);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Group containers subtle separation */
.opc-nav[b-o6g588k838]  .mud-nav-group {
    margin: 6px 0;
    padding: 4px 2px;
    border-radius: 10px;
}

/* Divider spacing refinement */
.opc-nav[b-o6g588k838]  .mud-divider {
    opacity: .5;
}

/* Small helper spacing tweaks for nested links */
.opc-nav[b-o6g588k838]  .ml-6 {
    margin-left: 1.25rem;
}

.opc-nav[b-o6g588k838]  .my-1 {
    margin-top: .25rem;
    margin-bottom: .25rem;
}

/* Make icon buttons in Auth area blend nicely */
.opc-nav[b-o6g588k838]  .mud-icon-button {
    border-radius: 8px;
}

.opc-nav[b-o6g588k838]  .mud-icon-button:hover {
    background-color: rgba(127, 127, 127, 0.12);
}

/* frontend/Components/Layout/ShellTenantDrawerContent.razor.rz.scp.css */
/* FPL-001/REQ-004 FR-4 — the tenant drawer's own content. Every value is var(--token)
   (UI-LAYER.md §6), matching 01-shell.html's .drawer-search/.drawer-list/.t-row/.t-cap. The
   drawer's own frame (400px width, header/✕, close-gate, focus-return) is QuickDrawer/row 80's
   own chrome, composed standalone; only what's inside its ChildContent is styled here. */

.ui-tenant-search[b-a9t0anqsrg] {
    padding: var(--space-12) 0;
}

.ui-tenant-list[b-a9t0anqsrg] {
    display: flex;
    flex-direction: column;
}

.ui-tenant-row[b-a9t0anqsrg] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    height: var(--row-h);
    padding: 0 var(--space-16);
    font: inherit;
    font-size: var(--fs-body);
    color: var(--text);
    background: none;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--motion-micro) var(--ease);
}

.ui-tenant-row:hover[b-a9t0anqsrg] {
    background: var(--fill-1);
}

.ui-tenant-row-current[b-a9t0anqsrg] {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: var(--fw-medium);
}

.ui-tenant-name[b-a9t0anqsrg] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-tenant-check[b-a9t0anqsrg] {
    margin-left: auto;
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.ui-tenant-empty[b-a9t0anqsrg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--panel-pad);
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ui-tenant-empty code[b-a9t0anqsrg] {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
}
/* frontend/Components/Pages/admin/registry/Registry.razor.rz.scp.css */
/* W:hr-registry-foundation/T-02 — the Registry page. Tokens only; every measure the sheet ruled (row 40 / header 36, hairlines, hover) is the Grid's own and never restated here. */

.reg-page[b-37an2ghx46] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.reg-page[b-37an2ghx46]  .ui-pageheader-band {
    margin-bottom: calc(var(--content-pad) - var(--page-gap));
}

.reg-none[b-37an2ghx46] {
    margin: 0;
    padding: var(--empty-pad-y) 0;
    max-width: var(--empty-max-w);
    color: var(--text-secondary);
}

.reg-entry[b-37an2ghx46] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-8) 0;
    min-width: 0;
}

.reg-name[b-37an2ghx46] {
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.reg-key[b-37an2ghx46] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.reg-key code[b-37an2ghx46] {
    font-family: var(--font-mono);
}

.reg-meaning[b-37an2ghx46],
.reg-onchange[b-37an2ghx46] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.reg-value[b-37an2ghx46] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    min-width: 0;
}

/* The Grid's cells inherit white-space: nowrap and are drawn 40 px high on a fixed grid row (Grid.md): this page's cells hold several lines (an entry's four, a person list's wrapping chips, the strip), so on this page
   alone the row grows to its content, from the Grid's 40 px minimum, and its text wraps inside its column. The Grid's own rules are !important, so only these two are too: TD-20, a departure from STD:frontend/css r1
   (W:grid-rows-grow-to-content). */
.reg-page[b-37an2ghx46]  tr.fluent-data-grid-row {
    grid-template-rows: none !important; /* TD-20, W:grid-rows-grow-to-content: beats the supplier's fixed 40px track */
    height: auto !important; /* TD-20, W:grid-rows-grow-to-content */
}

.reg-page[b-37an2ghx46]  table.ui-grid td {
    height: auto !important; /* TD-20, W:grid-rows-grow-to-content: beats the Grid's own `height: var(--row-h) !important` */
    min-height: var(--row-h);
    overflow: visible !important; /* TD-20, W:grid-rows-grow-to-content: the cell's ellipsis clip would hide the chips and the strip */
    align-items: flex-start;
}

.reg-entry[b-37an2ghx46],
.reg-value[b-37an2ghx46] {
    white-space: normal;
    overflow-wrap: anywhere;
}

.reg-strip[b-37an2ghx46] {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
}

/* Sticky under the app's top bar (the Grid's own header is offset by the same --topbar-h), above the Grid's header, on the shell's page ground so rows do not show through. */
.reg-verdict[b-37an2ghx46] {
    position: sticky;
    top: var(--topbar-h);
    z-index: 5;
    background: var(--page);
}

.reg-search[b-37an2ghx46] {
    max-width: var(--combo-w);
}

.reg-last[b-37an2ghx46] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    white-space: normal;
    overflow-wrap: anywhere;
}

.reg-history[b-37an2ghx46] {
    padding: var(--space-8) 0 var(--space-12);
}

.reg-history-loading[b-37an2ghx46] {
    margin: 0;
    color: var(--text-secondary);
}

/* W:hr-registry-person-lists/TD-21 (as amended 2026-10-13): the verdict sits at the top bar's height, and every Grid's column header stacks right under it: the Grid's own scoped offset is the top bar plus the verdict's measured
   height, which registry.js sets on this element as --reg-verdict-h (0 until it is measured). Two recorded departures: that one inline value (STD:frontend/css r1) and overriding the layer's offset from a page (Grid.md's planner
   ruling of 2026-09-19). */
.reg-page[b-37an2ghx46] {
    --ui-grid-sticky-top: calc(var(--topbar-h) + var(--reg-verdict-h, 0px));
}

/* W:hr-registry-named-lists/TD-16: the module Toolbar's trailing count, "<n> entries · <k> required, not set": a page span, because the layer's FilterStateRow can say only "<n>" or "<m> of <n>". The unset part is in the error colour. */
.reg-count[b-37an2ghx46] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
    white-space: nowrap;
}

.reg-count-unset[b-37an2ghx46] {
    color: var(--error);
}

/* An entry that declares its own view right says so under its description. */
.reg-viewright[b-37an2ghx46] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.reg-viewright code[b-37an2ghx46] {
    font-family: var(--font-mono);
}
/* frontend/Components/Pages/admin/registry/RegistryNamedList.razor.rz.scp.css */
/* W:hr-registry-named-lists/T-04 — the named-list item table. Tokens only; every measure of the table is the Grid's own. */

.reg-items-region[b-sl5znpb9i5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-8) 0 var(--space-12);
    min-width: 0;
}

/* TD-17: the table scrolls inside the entry up to the cap, under a header that stays (REQ-003's Depth; screen 52). Inside this box the box is the header's scroll parent, so the page's own offset for a page-level
   Grid (the top bar plus the verdict, TD-21) must not apply: it would move the header down the box over the first rows. This is the shape of the Grid's own scroller (Grid.razor.css, .ui-grid-wrap.ui-grid-scroll). */
.reg-items[b-sl5znpb9i5] {
    max-height: var(--grid-scroll-h);
    overflow: auto;
    --ui-grid-sticky-top: 0px;
}

/* The Grid's `table.ui-grid tbody tr.fluent-data-grid-row { display: grid }` (the row-as-subgrid focus ring) is a descendant selector, and this table sits inside the page Grid's detail row, so it also reaches this
   table's own header row: a 36px grid box that holds the sticky th inside it, and the header scrolls away with the rows (found live, 2026-10-14). The header row goes back to the supplier's `display: contents`, so
   the th sticks to this box. One more class than the Grid's rule, so it wins on specificity with no !important. */
.reg-items[b-sl5znpb9i5]  table.ui-grid > thead > tr.fluent-data-grid-row {
    display: contents;
}

/* A deactivated item is struck through and stays: restoring is switching it on again (AC-40, no undo). */
.reg-items[b-sl5znpb9i5]  tr.reg-item-inactive td {
    text-decoration: line-through;
}

/* The strike covers the name's text alone, not the "seeded" tag beside it (screen 52: tr.is-off .nm-t). The wrapper is inline-flex, an atomic inline that takes no inherited decoration, so the td's strike stops at it and
   the tag is never struck; the text is the layer's read text (.ui-ie-vtxt, a block inside the editor), which carries its own, in the placeholder colour (W:hr-registry-named-lists/T-05). */
.reg-items[b-sl5znpb9i5]  tr.reg-item-inactive .reg-item-name .ui-ie-vtxt {
    text-decoration: line-through;
    color: var(--placeholder);
}

.reg-item-order[b-sl5znpb9i5] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}

/* The name's wrapper is capped by its cell and lets the text shrink, so at a narrow window the name ends in an ellipsis and the tag stays whole beside it inside the Name column (screen 52: .nm, .nm-t). */
.reg-item-name[b-sl5znpb9i5] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
    max-width: 100%;
}

.reg-item-name[b-sl5znpb9i5]  .ui-ie {
    min-width: 0;
}

.reg-item-name[b-sl5znpb9i5]  .ui-ie-vtxt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reg-item-name[b-sl5znpb9i5]  .ui-tag {
    flex: none;
}

/* The Code's text truncates inside its column, like the name's (W:hr-registry-named-lists/T-05 item 3); the column's rem minimum is in the markup. */
.reg-item-code[b-sl5znpb9i5] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reg-add[b-sl5znpb9i5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.reg-add-note[b-sl5znpb9i5] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}
/* frontend/Components/Pages/admin/registry/RegistryPersonList.razor.rz.scp.css */
/* W:hr-registry-person-lists/T-02 — the person-list editor's chips (screen 40's .pchip). Tokens only; the buttons, the Combobox and the shell are the layer's own. */

.reg-people-edit[b-z55duywax1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
    max-width: 100%;
    white-space: normal;
}

.reg-people[b-z55duywax1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    min-width: 0;
    white-space: normal;
}

.reg-person[b-z55duywax1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    max-width: 100%;
    padding: var(--space-4) var(--space-8) var(--space-4) var(--space-12);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
}

.reg-person-text[b-z55duywax1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.reg-person-n[b-z55duywax1] {
    font-weight: var(--fw-semibold);
}

.reg-person-hint[b-z55duywax1] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.reg-person--inactive[b-z55duywax1],
.reg-person--inactive .reg-person-n[b-z55duywax1],
.reg-person--inactive .reg-person-hint[b-z55duywax1] {
    border-color: var(--error);
    color: var(--error);
}

.reg-person--inactive[b-z55duywax1] {
    background: var(--error-bg);
}

.reg-person-code[b-z55duywax1] {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--error);
}

.reg-primary-note[b-z55duywax1] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}
/* frontend/Components/Pages/ats/AtsActionCenter.razor.rz.scp.css */
.ats-ac-page[b-s3vl3or0h4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-ac-caption[b-s3vl3or0h4] {
    margin: 0 0 var(--space-8);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-ac-state[b-s3vl3or0h4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-top: var(--space-12);
}

.ats-ac-pageact[b-s3vl3or0h4] {
    display: flex;
}

.ats-ac-email[b-s3vl3or0h4] {
    color: var(--text-secondary);
}

.ats-ac-menu[b-s3vl3or0h4] {
    /* W:ats-core-fixes/TD-2: the placed Menu needs a positioned host (MENU_ANCHOR_MISSING). */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
}

.ats-ac-copied[b-s3vl3or0h4] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-ac-opener[b-s3vl3or0h4] {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--accent, inherit);
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
}

.ats-ac-opener:focus-visible[b-s3vl3or0h4] {
    outline: 2px solid var(--focus-ring, currentColor);
    outline-offset: 2px;
}
/* frontend/Components/Pages/ats/AtsApplicantDetail.razor.rz.scp.css */
.ats-ap[b-p0o003cyqy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.ats-ap-title[b-p0o003cyqy] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-16);
}

.ats-ap-names[b-p0o003cyqy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* W:ats-core-fixes/T-06 (#40): the first and last name sit on one line, never wrapped under each other. */
.ats-ap-namerow[b-p0o003cyqy] {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: var(--space-8);
    min-width: 0;
}

/* #2 (TD-11): the editor and its "Press ✓ to move" hint sit side by side in the header. */
.ats-ap-stage[b-p0o003cyqy] {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-8);
}

.ats-ap-stage-hint[b-p0o003cyqy] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    white-space: nowrap;
}

.ats-ap-panel-loading[b-p0o003cyqy] {
    min-height: var(--row-h);
}

.ats-ap-grid[b-p0o003cyqy] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
}

@media (min-width: 1100px) {
    .ats-ap-grid[b-p0o003cyqy] {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }
}

.ats-ap-main[b-p0o003cyqy],
.ats-ap-side[b-p0o003cyqy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

.ats-ap-edits[b-p0o003cyqy] {
    display: flex;
    flex-direction: column;
}

.ats-ap-job[b-p0o003cyqy],
.ats-ap-readonly[b-p0o003cyqy],
.ats-ap-muted[b-p0o003cyqy] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-ap-appliedvia[b-p0o003cyqy] {
    margin: var(--space-4) 0 var(--space-12);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-ap-pills[b-p0o003cyqy] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.ats-ap-group[b-p0o003cyqy] {
    margin: var(--space-12) 0 var(--space-4);
    font-size: var(--fs-small);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.ats-ap-role[b-p0o003cyqy] {
    margin-bottom: var(--space-12);
}

.ats-ap-desc[b-p0o003cyqy],
.ats-ap-message[b-p0o003cyqy],
.ats-ap-summary[b-p0o003cyqy],
.ats-ap-cover[b-p0o003cyqy],
.ats-ap-notetext[b-p0o003cyqy] {
    white-space: pre-wrap;
    margin: var(--space-4) 0;
}

.ats-ap-list[b-p0o003cyqy] {
    margin: 0;
    padding-left: var(--space-16);
}

.ats-ap-url[b-p0o003cyqy] {
    word-break: break-all;
    font-size: var(--fs-small);
}

.ats-ap-actions[b-p0o003cyqy],
.ats-ap-addnote[b-p0o003cyqy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    align-items: flex-start;
}

.ats-ap-video[b-p0o003cyqy] {
    width: 100%;
    max-height: 220px;
    border-radius: 6px;
    background: #000;
    display: block;
}

.ats-ap-notelist[b-p0o003cyqy] {
    list-style: none;
    margin: var(--space-12) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}
/* frontend/Components/Pages/ats/AtsCalendar.razor.rz.scp.css */
.ats-cal[b-ocwbv8hfl6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-cal-caption[b-ocwbv8hfl6] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-cal-body[b-ocwbv8hfl6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
}

@media (min-width: 1100px) {
    .ats-cal-body[data-open="true"][b-ocwbv8hfl6] {
        grid-template-columns: minmax(0, 1fr) 420px;
        align-items: start;
    }
}

.ats-cal-sub[b-ocwbv8hfl6] {
    margin: var(--space-16) 0 var(--space-8);
    font-size: var(--fs-body);
}

.ats-cal-apps[b-ocwbv8hfl6] {
    list-style: none;
    margin: 0 0 var(--space-16);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-cal-apps li[b-ocwbv8hfl6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.ats-cal-stage[b-ocwbv8hfl6],
.ats-cal-none[b-ocwbv8hfl6],
.ats-cal-booked[b-ocwbv8hfl6] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

/* The scheduler is a legacy island: its buttons keep the layer's sentence case, not the supplier's upper case (W:ats-core-fixes/T-05 #28). */
.ats-cal-scheduler[b-ocwbv8hfl6]  .rz-button,
.ats-cal-scheduler[b-ocwbv8hfl6]  .rz-scheduler-nav-views .rz-button {
    text-transform: none;
}
/* frontend/Components/Pages/ats/AtsCandidateAddDrawer.razor.rz.scp.css */
.ats-cand-add[b-h66eqr2nau] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}
/* frontend/Components/Pages/ats/AtsCandidateDetail.razor.rz.scp.css */
.ats-cd[b-wcb96pkqag] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.ats-cd-grid[b-wcb96pkqag] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
}

@media (min-width: 1100px) {
    .ats-cd-grid[b-wcb96pkqag] {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }
}

.ats-cd-main[b-wcb96pkqag],
.ats-cd-side[b-wcb96pkqag] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

.ats-cd-edits[b-wcb96pkqag] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-cd-readonly[b-wcb96pkqag],
.ats-cd-muted[b-wcb96pkqag] {
    color: var(--text-secondary);
}

.ats-cd-summary[b-wcb96pkqag],
.ats-cd-desc[b-wcb96pkqag] {
    margin: 0;
    line-height: 1.6;
    white-space: pre-line;
}

.ats-cd-tags[b-wcb96pkqag] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.ats-cd-group[b-wcb96pkqag] {
    margin: var(--space-8) 0 var(--space-4);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.ats-cd-role[b-wcb96pkqag] {
    margin-bottom: var(--space-12);
}

.ats-cd-list[b-wcb96pkqag] {
    margin: 0;
    padding-left: var(--space-16);
}

.ats-cd-file[b-wcb96pkqag] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ats-cd-missing[b-wcb96pkqag] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-cd-filename[b-wcb96pkqag] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* O-4 / reference B gap G1: no catalogue row plays a video, so the element is page code, on tokens. */
.ats-cd-video[b-wcb96pkqag] {
    display: block;
    width: 100%;
    max-height: 280px;
    border-radius: var(--radius);
    background: var(--text);
}

.ats-cd-addnote[b-wcb96pkqag] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.ats-cd-note[b-wcb96pkqag] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
}

.ats-cd-notetext[b-wcb96pkqag] {
    margin: 0;
    white-space: pre-wrap;
}

.ats-cd-joblink[b-wcb96pkqag] {
    color: var(--brand);
}

/* W:ats-core-fixes/T-06 (#38): the reason a header act is disabled, as a short secondary line beside it. */
.ats-cd-run-reason[b-wcb96pkqag] {
    align-self: center;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/ats/AtsCandidateResume.razor.rz.scp.css */
.ats-resume[b-f1dfgkq9kg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}
/* frontend/Components/Pages/ats/AtsCandidateRowMenu.razor.rz.scp.css */
/* W:ats-core-fixes/TD-2: the Menu measures its room from its positioned ancestor and refuses to open without one (MENU_ANCHOR_MISSING). */
.ats-cand-rowmenu[b-hpjmhgnlk9] {
    position: relative;
    display: inline-flex;
}
/* frontend/Components/Pages/ats/AtsCandidates.razor.rz.scp.css */
.ats-cand[b-z2w3um9lx9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-cand-readonly[b-z2w3um9lx9] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-cand-name[b-z2w3um9lx9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}

.ats-cand-plain[b-z2w3um9lx9] {
    font-weight: var(--fw-semibold);
}

.ats-cand-sub[b-z2w3um9lx9] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ats-cand-tags[b-z2w3um9lx9] {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: var(--space-4);
}

.ats-cand-score[b-z2w3um9lx9] {
    font-weight: var(--fw-semibold);
    color: var(--accent);
}

.ats-cand-smclear[b-z2w3um9lx9] {
    margin-top: var(--space-8);
}

/* W:ats-core-fixes/T-07 #22/#23: every column is max-content (or a fixed px: Select, the row actions), never fr: inside the Grid's scroller an fr
   unit inflates every column to the widest one (a 10486 px table and GRID_STICKY_EDGES_TOO_WIDE). The Grid's own wrap scrolls sideways with its
   fixed edge columns (StickyEdges); this wrapper never overflows (its overflow-x stays declared, pinned by T-05's test) and carries --ui-grid-sticky-top: 0px so the header sticks to the table's
   own top and never covers row 1 (the Toolbar keeps the shared offset). */
.ats-cand-scroll[b-z2w3um9lx9] {
    overflow-x: auto;
    max-width: 100%;
    --ui-grid-sticky-top: 0px;
}

.ats-cand-count[b-z2w3um9lx9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    white-space: nowrap;
}

.ats-cand-countword[b-z2w3um9lx9] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-cand-plain-link[b-z2w3um9lx9] {
    overflow-wrap: anywhere;
}
/* frontend/Components/Pages/ats/AtsCareerPortalEmbed.razor.rz.scp.css */
.ats-career[b-rbeh5gvrg2] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.ats-career-sec[b-rbeh5gvrg2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-career-h[b-rbeh5gvrg2] {
    margin: 0;
    font-size: var(--fs-heading-md);
    line-height: var(--lh-heading-md);
    font-weight: var(--fw-semibold);
}

.ats-career-caption[b-rbeh5gvrg2],
.ats-career-readonly[b-rbeh5gvrg2],
.ats-career-help[b-rbeh5gvrg2] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-career-url[b-rbeh5gvrg2],
.ats-career-copyrow[b-rbeh5gvrg2] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ats-career-url-field[b-rbeh5gvrg2] {
    flex: 1;
    min-width: 0;
}

.ats-career-copied[b-rbeh5gvrg2] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--ok);
}

.ats-career-height[b-rbeh5gvrg2] {
    width: 160px;
}

.ats-career-code[b-rbeh5gvrg2] {
    margin: 0;
    padding: var(--space-12);
    overflow-x: auto;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--fill-1);
    font-family: ui-monospace, monospace;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    white-space: pre-wrap;
}

/* The caption sits in the access line beside the as-of line: the same gap AtsInbox.razor.css gives its read-only note (W:ats-core-fixes/T-05 #26). */
.ats-career-caption[b-rbeh5gvrg2] {
    margin-right: var(--space-16);
}
/* frontend/Components/Pages/ats/AtsClarifyTemplateEdit.razor.rz.scp.css */
.ats-cte[b-6x7swdmsoa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-cte-readonly[b-6x7swdmsoa] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-cte-save[b-6x7swdmsoa] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-8);
}

.ats-cte-questions[b-6x7swdmsoa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-cte-q[b-6x7swdmsoa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ats-cte-qlabel[b-6x7swdmsoa] {
    font-weight: var(--fw-semibold);
}

.ats-cte-req[b-6x7swdmsoa],
.ats-cte-qtype[b-6x7swdmsoa],
.ats-cte-qdesc[b-6x7swdmsoa],
.ats-cte-empty[b-6x7swdmsoa] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-cte-opts[b-6x7swdmsoa] {
    margin: 0;
    padding-left: var(--space-16);
    font-size: var(--fs-small);
    color: var(--text-secondary);
}
/* frontend/Components/Pages/ats/AtsClarifyTemplates.razor.rz.scp.css */
.ats-ct[b-8hh67u8q2k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-ct-acts[b-8hh67u8q2k] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

.ats-ct-readonly[b-8hh67u8q2k] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

/* AppShell sets --ui-grid-sticky-top to the top bar's height; inside the line host the header sticks to the table's own top, so that offset would cover row 1 and take its clicks (W:ats-core-fixes/T-05 #27). Set on a wrapper of the grid only: the page's Toolbar keeps the shared offset. */
.ats-ct-grid[b-8hh67u8q2k] {
    --ui-grid-sticky-top: 0px;
}
/* frontend/Components/Pages/ats/AtsDashboard.razor.rz.scp.css */
.ats-dash[b-6b2u1j33o8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-dash-panel[b-6b2u1j33o8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
}

.ats-dash-pair[b-6b2u1j33o8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
}

@media (min-width: 960px) {
    .ats-dash-pair[b-6b2u1j33o8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* frontend/Components/Pages/ats/AtsDuplicates.razor.rz.scp.css */
.ats-dup[b-72lvih7h0p] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.ats-dup-caption[b-72lvih7h0p],
.ats-dup-note[b-72lvih7h0p],
.ats-dup-contact[b-72lvih7h0p] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-dup-count[b-72lvih7h0p] {
    margin: 0;
    font-weight: var(--fw-semibold);
}

.ats-dup-scan[b-72lvih7h0p] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-16);
}

.ats-dup-select[b-72lvih7h0p] {
    flex: 1;
    min-width: 0;
}

.ats-dup-card[b-72lvih7h0p] {
    display: block;
}

.ats-dup-head[b-72lvih7h0p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    margin-bottom: var(--space-12);
}

.ats-dup-who[b-72lvih7h0p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.ats-dup-name[b-72lvih7h0p] {
    font-weight: var(--fw-semibold);
}

.ats-dup-apps[b-72lvih7h0p] {
    list-style: none;
    margin: var(--space-12) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-dup-apps li[b-72lvih7h0p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.ats-dup-foot[b-72lvih7h0p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    margin-top: var(--space-12);
}

/* The caption sits in the access line beside the as-of line: the same gap AtsInbox.razor.css gives its read-only note (W:ats-core-fixes/T-05 #26). */
.ats-dup-caption[b-72lvih7h0p] {
    margin-right: var(--space-16);
}
/* frontend/Components/Pages/ats/AtsEmailAutomation.razor.rz.scp.css */
.ats-auto[b-lgwxydhxmk] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.ats-auto-caption[b-lgwxydhxmk],
.ats-auto-readonly[b-lgwxydhxmk],
.ats-auto-help[b-lgwxydhxmk] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-auto-changed[b-lgwxydhxmk] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    margin-inline-end: var(--space-2);
}

/* The caption sits in the access line beside the as-of line: the same gap AtsInbox.razor.css gives its read-only note (W:ats-core-fixes/T-05 #26). */
.ats-auto-caption[b-lgwxydhxmk] {
    margin-right: var(--space-16);
}
/* frontend/Components/Pages/ats/AtsEmailTemplateEdit.razor.rz.scp.css */
.ats-etp[b-rf75bs03g9] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.ats-etp-readonly[b-rf75bs03g9],
.ats-etp-preview-empty[b-rf75bs03g9],
.ats-etp-body-label[b-rf75bs03g9] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-etp-fields[b-rf75bs03g9] {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap-y);
}

.ats-etp-body[b-rf75bs03g9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-etp-field-error[b-rf75bs03g9] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--error);
}

.ats-etp-foot[b-rf75bs03g9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
    margin-top: var(--section-gap-y);
}

.ats-etp-read[b-rf75bs03g9] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-8) var(--space-16);
    margin: 0;
}

.ats-etp-read dt[b-rf75bs03g9] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-etp-read dd[b-rf75bs03g9] {
    margin: 0;
}

.ats-etp-preview[b-rf75bs03g9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-etp-preview-subject[b-rf75bs03g9] {
    margin: 0;
    font-weight: 600;
}
/* frontend/Components/Pages/ats/AtsEmailTemplates.razor.rz.scp.css */
.ats-etpl[b-fr9hpnumi3] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.ats-etpl-caption[b-fr9hpnumi3],
.ats-etpl-readonly[b-fr9hpnumi3],
.ats-etpl-none[b-fr9hpnumi3] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}
/* frontend/Components/Pages/ats/AtsInbox.razor.rz.scp.css */
/* AtsInbox — the three regions are page code on tokens (no catalogue row holds three panes; AtsInbox.md). */
.ats-inbox[b-un0owbgd9u] { display: flex; flex-direction: column; gap: var(--space-8); }
.ats-inbox-readonly[b-un0owbgd9u] { color: var(--text-secondary); margin-right: var(--space-16); }

.ats-inbox-regions[b-un0owbgd9u] { display: grid; grid-template-columns: minmax(160px, 200px) minmax(280px, 400px) minmax(0, 1fr); gap: var(--space-16); align-items: start; }
.ats-inbox-rail[b-un0owbgd9u], .ats-inbox-list[b-un0owbgd9u], .ats-inbox-pane[b-un0owbgd9u] { min-width: 0; }
.ats-inbox-list[b-un0owbgd9u], .ats-inbox-pane[b-un0owbgd9u] { border: var(--border-w) solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ats-inbox-pane[b-un0owbgd9u] { padding: var(--space-16); }

.ats-inbox-folder[b-un0owbgd9u] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); width: 100%; }
.ats-inbox-folder-sel[b-un0owbgd9u] { font-weight: 600; background: var(--fill-1); border-radius: var(--radius); }

.ats-inbox-row[b-un0owbgd9u] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ats-inbox-row-sel[b-un0owbgd9u] { background: var(--fill-1); border-radius: var(--radius); }
.ats-inbox-row-top[b-un0owbgd9u] { display: flex; justify-content: space-between; gap: var(--space-8); }
.ats-inbox-name[b-un0owbgd9u] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ats-inbox-name-unread[b-un0owbgd9u] { font-weight: 700; }
.ats-inbox-subject[b-un0owbgd9u] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ats-inbox-row-foot[b-un0owbgd9u] { display: flex; align-items: center; gap: var(--space-8); }
.ats-inbox-snippet[b-un0owbgd9u] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }

.ats-inbox-pane-head[b-un0owbgd9u] { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-16); }
.ats-inbox-dim[b-un0owbgd9u] { opacity: 0.6; }

@media (max-width: 900px) { .ats-inbox-regions[b-un0owbgd9u] { grid-template-columns: minmax(0, 1fr); } }

/* The count sits in the Toolbar's trailing slot with its noun (W:ats-core-fixes/T-05 #23). */
.ats-inbox-count[b-un0owbgd9u] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ats-inbox-countword[b-un0owbgd9u] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

/* From and To stay side by side: one wrapper that does not wrap (W:ats-core-fixes/T-05 #32). */
.ats-inbox-dates[b-un0owbgd9u] {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-8);
}

/* Folder buttons left-align their label: a short label ("All") sat centred in its fixed-width button (W:ats-core-fixes/T-05 #32). */
.ats-inbox-folder[b-un0owbgd9u]  fluent-button {
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    text-align: left;
}

.ats-inbox-folder[b-un0owbgd9u]  fluent-button::part(control) {
    justify-content: flex-start;
}
/* frontend/Components/Pages/ats/AtsInterviewSettings.razor.rz.scp.css */
.ats-isettings[b-ui64watxjw] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}
/* frontend/Components/Pages/ats/AtsJobDetail.razor.rz.scp.css */
.ats-job[b-9tpyjbh1xe] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-job-pills[b-9tpyjbh1xe],
.ats-job-acts[b-9tpyjbh1xe],
.ats-job-weightacts[b-9tpyjbh1xe],
.ats-job-weightacts-right[b-9tpyjbh1xe] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.ats-job-readonly[b-9tpyjbh1xe],
.ats-job-hint[b-9tpyjbh1xe] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-job-hint[b-9tpyjbh1xe] {
    margin: 0;
}

.ats-job-menuwrap[b-9tpyjbh1xe] {
    position: relative;
}

.ats-job-details[b-9tpyjbh1xe] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16, var(--space-12));
}

.ats-job-section[b-9tpyjbh1xe] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ats-job-section h2[b-9tpyjbh1xe] {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-body);
    font-weight: 600;
}

.ats-job-kv[b-9tpyjbh1xe] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-height: var(--row-h);
}

.ats-job-mono[b-9tpyjbh1xe] {
    font-family: monospace;
}

.ats-job-pair[b-9tpyjbh1xe],
.ats-job-interviewers[b-9tpyjbh1xe] {
    display: inline-flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.ats-job-weightgrid[b-9tpyjbh1xe] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-8);
}

.ats-job-weights[b-9tpyjbh1xe],
.ats-job-pipeline[b-9tpyjbh1xe] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-job-weightacts[b-9tpyjbh1xe] {
    justify-content: space-between;
}

.ats-ceipal[b-9tpyjbh1xe] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-ceipal-row[b-9tpyjbh1xe] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8);
    border-bottom: var(--border-w) solid var(--line);
}

.ats-ceipal-text[b-9tpyjbh1xe] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* W:ats-core-fixes/T-06 (#38): the reason a header act is disabled, as a short secondary line beside it. */
.ats-job-reason[b-9tpyjbh1xe] {
    align-self: center;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/ats/AtsJobGroups.razor.rz.scp.css */
.ats-groups[b-23a4afmjyl] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.ats-groups-caption[b-23a4afmjyl],
.ats-groups-readonly[b-23a4afmjyl],
.ats-groups-help[b-23a4afmjyl],
.ats-groups-none[b-23a4afmjyl] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-groups-links[b-23a4afmjyl] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.ats-groups-links a[b-23a4afmjyl] {
    color: var(--accent);
}
/* frontend/Components/Pages/ats/AtsJobs.razor.rz.scp.css */
.ats-jobs[b-inzezfskk3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-jobs-acts[b-inzezfskk3] {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-4);
    white-space: nowrap;
}

/* Every column is max-content (no value is cut off; never fr, which inflates the fixed edge columns past the wrap). The Grid's own wrap scrolls sideways with
   its fixed edge columns (Title and the actions); this wrapper never overflows (its overflow-x stays declared, pinned by T-05's test) and carries --ui-grid-sticky-top: 0px so the header never covers row 1
   (W:ats-core-fixes/T-05 #22, #29, #27; max-content and fixed edges: W:ats-core-fixes/T-07). */
.ats-jobs-scroll[b-inzezfskk3] {
    overflow-x: auto;
    max-width: 100%;
    /* No AppShell offset inside the grid, or the header covers row 1 (W:ats-core-fixes/T-05 #27's mechanism). */
    --ui-grid-sticky-top: 0px;
}

/* The count sits in the Toolbar's trailing slot with its noun, as AtsSmartMatch's does (W:ats-core-fixes/T-05 #23). */
.ats-jobs-count[b-inzezfskk3] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ats-jobs-countword[b-inzezfskk3] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/ats/AtsMasterData.razor.rz.scp.css */
.ats-md[b-d9mxi1k0k6] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.ats-md-caption[b-d9mxi1k0k6],
.ats-md-readonly[b-d9mxi1k0k6] {
    margin: 0 0 var(--space-12);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-md-readonly[b-d9mxi1k0k6] {
    margin: 0;
}

.ats-md-email[b-d9mxi1k0k6] {
    color: var(--text-secondary);
}

.ats-md-weights[b-d9mxi1k0k6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-16);
}

.ats-md-weights-foot[b-d9mxi1k0k6],
.ats-md-actions[b-d9mxi1k0k6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12);
    margin-top: var(--space-12);
}

.ats-md-organizer[b-d9mxi1k0k6] {
    margin: 0 0 var(--space-12);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}
/* frontend/Components/Pages/ats/AtsPipelineList.razor.rz.scp.css */
.ats-pipeline[b-mt71g8ms00] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-pl-readonly[b-mt71g8ms00] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-pl-missing[b-mt71g8ms00] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-pl-name[b-mt71g8ms00] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}

.ats-pl-two[b-mt71g8ms00] {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
}

.ats-pl-sub[b-mt71g8ms00] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ats-pl-pending[b-mt71g8ms00] {
    color: var(--warn);
    font-size: var(--fs-small);
}

.ats-pl-tags[b-mt71g8ms00] {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: var(--space-4);
}

.ats-pl-score[b-mt71g8ms00] {
    font-weight: var(--fw-semibold);
    color: var(--accent);
}

.ats-pl-selectfail[b-mt71g8ms00] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ats-pl-smclear[b-mt71g8ms00] {
    margin-top: var(--space-8);
}

/* W:ats-core-fixes/T-07 #22/#23: every column is max-content (or a fixed px: Select, the row actions), never fr: inside the Grid's scroller an fr
   unit inflates every column to the widest one (a 10486 px table and GRID_STICKY_EDGES_TOO_WIDE). The Grid's own wrap scrolls sideways with its
   fixed edge columns (StickyEdges); this wrapper never overflows (its overflow-x stays declared, pinned by T-05's test) and carries --ui-grid-sticky-top: 0px so the header sticks to the table's
   own top and never covers row 1 (the Toolbar keeps the shared offset). */
.ats-pl-scroll[b-mt71g8ms00] {
    overflow-x: auto;
    max-width: 100%;
    --ui-grid-sticky-top: 0px;
}

.ats-pl-count[b-mt71g8ms00] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    white-space: nowrap;
}

.ats-pl-countword[b-mt71g8ms00] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/ats/AtsPipelineRowMenu.razor.rz.scp.css */
/* W:ats-core-fixes/TD-2: the Menu measures its room from its positioned ancestor and refuses to open without one (MENU_ANCHOR_MISSING). */
.ats-pl-rowmenu[b-f4sjf6upln] {
    position: relative;
    display: inline-flex;
}
/* frontend/Components/Pages/ats/AtsQuestionBank.razor.rz.scp.css */
.ats-bank[b-zlmoc1fe1i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-bank-readonly[b-zlmoc1fe1i] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-bank-tags[b-zlmoc1fe1i] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.ats-bank-count[b-zlmoc1fe1i] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ats-bank-countword[b-zlmoc1fe1i],
.ats-bank-used[b-zlmoc1fe1i],
.ats-bank-empty[b-zlmoc1fe1i] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-bank-used[b-zlmoc1fe1i] {
    margin-right: var(--space-8);
}
/* frontend/Components/Pages/ats/AtsResume2ReadDrawer.razor.rz.scp.css */
/* W:ats-core-fixes/TD-6 (#4058): the line that holds "Open full page to download PDF", above the moved résumé body (whose own inline styles stay byte for byte, TD-7). Tokens only (UI-LAYER.md). */
.ats-r2-link[b-omvb6ocwls] {
    margin-bottom: var(--space-12);
}

/* W:ats-core-fixes/TD-16 (#4123): the drawer takes 35% of the window, the owner's "30-40%". The floor is the list drawer's token (400px), so a 900 to 1143px window is no narrower than before; no ceiling, or a 3840px screen would
   bring the narrow look back. Below the layer's 900px breakpoint the drawer stays full width. A wrapper that sets a drawer token is the layer's pattern for one wider drawer
   (Workflow's DefinitionDrawer.razor.css, .wf-def-drawer): the custom property is inherited by the native dialog, and display: contents keeps the wrapper out of layout. 35vw is the one literal. */
.ats-r2-drawer[b-omvb6ocwls] {
    --drawer-w: max(var(--drawer-w-list), 35vw);
    display: contents;
}
/* frontend/Components/Pages/ats/AtsSmartMatch.razor.rz.scp.css */
.ats-sm[b-b4819y2kjc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-sm-caption[b-b4819y2kjc] {
    font-weight: var(--fw-semibold);
}

.ats-sm-readonly[b-b4819y2kjc] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-sm-hint[b-b4819y2kjc] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ats-sm-weights[b-b4819y2kjc] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-8);
}

.ats-sm-count[b-b4819y2kjc] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ats-sm-countword[b-b4819y2kjc] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-sm-name[b-b4819y2kjc],
.ats-sm-role[b-b4819y2kjc] {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
}

.ats-sm-plain[b-b4819y2kjc] {
    font-weight: var(--fw-semibold);
}

.ats-sm-sub[b-b4819y2kjc] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ats-sm-detail[b-b4819y2kjc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
}

.ats-sm-bar[b-b4819y2kjc] {
    display: grid;
    grid-template-columns: 8rem 1fr;
    align-items: center;
    gap: var(--space-8);
}

.ats-sm-barlabel[b-b4819y2kjc] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-sm-narrative p[b-b4819y2kjc] {
    margin: var(--space-4) 0 0;
}

.ats-sm-rowmenu[b-b4819y2kjc] {
    display: inline-flex;
}

/* W:ats-core-fixes/T-07 #27: the grid's own wrapper drops the shared sticky offset, so the header sticks to the top of the table
   and never covers the first row; the Toolbar keeps the shared offset (as the Clarify page's .ats-ct-grid does). */
.ats-sm-grid[b-b4819y2kjc] {
    --ui-grid-sticky-top: 0px;
}
/* frontend/Components/Pages/ats/AtsSmartMatchPicker.razor.rz.scp.css */
.ats-smp[b-0vgpuno88f] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.ats-smp-caption[b-0vgpuno88f] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-smp-row[b-0vgpuno88f] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-16);
}

.ats-smp-field[b-0vgpuno88f] {
    flex: 1;
    min-width: 0;
    max-width: 32rem;
}
/* frontend/Components/Pages/ats/AtsSmartMatchRowMenu.razor.rz.scp.css */
/* W:ats-core-fixes/TD-2: the Menu measures its room from its positioned ancestor and refuses to open without one (MENU_ANCHOR_MISSING). */
.ats-sm-rowmenu[b-4i7b4yrdlp] {
    position: relative;
    display: inline-flex;
}
/* frontend/Components/Pages/ats/AtsSyncStatus.razor.rz.scp.css */
.ats-sync[b-bumnf1m1fs] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.ats-sync-caption[b-bumnf1m1fs],
.ats-sync-readonly[b-bumnf1m1fs] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-sync-cut[b-bumnf1m1fs] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ats-sync-error[b-bumnf1m1fs] {
    color: var(--error);
}

/* AppShell sets --ui-grid-sticky-top to the top bar's height; inside the line host the header sticks to the table's own top, so that offset would cover row 1 and take its clicks (W:ats-core-fixes/T-05 #27). Set on a wrapper of the grid only: the page's Toolbar keeps the shared offset. */
.ats-sync-grid[b-bumnf1m1fs] {
    --ui-grid-sticky-top: 0px;
}
/* frontend/Components/Pages/ats/AtsTestEdit.razor.rz.scp.css */
.ats-testpage[b-y0f1gzx0go] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-testpage-readonly[b-y0f1gzx0go] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/ats/AtsTests.razor.rz.scp.css */
.ats-tests[b-vkd7e1n5qj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-tests-acts[b-vkd7e1n5qj] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

/* The count sits in the Toolbar's trailing slot with its noun, as AtsSmartMatch's does (W:ats-core-fixes/T-05 #23). */
.ats-tests-count[b-vkd7e1n5qj] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ats-tests-countword[b-vkd7e1n5qj] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/ats/AtsWhatsApp.razor.rz.scp.css */
/* AtsWhatsApp (W:ats-pages-design-layer/T-19): the list and the pane are page code (no catalogue row holds a list-and-pane); tokens only — today's raw colours (#075e54 #ece5dd #25d366 #e7f3ef ...) are gone. */
.ats-wa-readonly[b-noz0nvuf9o] {
    color: var(--text-secondary);
    margin-inline-end: var(--space-8);
}

.ats-wa-body[b-noz0nvuf9o] {
    display: flex;
    height: 70vh;
    min-height: 480px;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.ats-wa-list[b-noz0nvuf9o] {
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-inline-end: var(--border-w) solid var(--line);
}

.ats-wa-search[b-noz0nvuf9o] {
    padding: var(--space-8) var(--space-12);
    border-bottom: var(--border-w) solid var(--line);
}

.ats-wa-rows[b-noz0nvuf9o] {
    flex: 1 1 auto;
    overflow-y: auto;
}

.ats-wa-pane[b-noz0nvuf9o] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--fill-1);
}

.ats-wa-row[b-noz0nvuf9o] {
    flex: 1;
    min-width: 0;
}

.ats-wa-row-sel .ats-wa-name[b-noz0nvuf9o] {
    font-weight: 600;
}

.ats-wa-row-top[b-noz0nvuf9o],
.ats-wa-row-foot[b-noz0nvuf9o] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.ats-wa-name[b-noz0nvuf9o] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ats-wa-stamp[b-noz0nvuf9o] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-wa-last[b-noz0nvuf9o] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/ats/AtsWhatsAppTemplateEdit.razor.rz.scp.css */
.ats-watpl-page[b-hujb1bg6d5] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.ats-watpl-page-readonly[b-hujb1bg6d5],
.ats-watpl-help[b-hujb1bg6d5],
.ats-watpl-preview-meta[b-hujb1bg6d5],
.ats-watpl-preview-empty[b-hujb1bg6d5] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-watpl-form[b-hujb1bg6d5] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.ats-watpl-fields[b-hujb1bg6d5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-watpl-savebar[b-hujb1bg6d5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12);
}

.ats-watpl-page-mono[b-hujb1bg6d5] {
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
}

.ats-watpl-page-body[b-hujb1bg6d5] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ats-watpl-preview[b-hujb1bg6d5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-watpl-preview-vars[b-hujb1bg6d5] {
    margin: 0;
    padding-left: 1.2em;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/Pages/ats/AtsWhatsAppTemplates.razor.rz.scp.css */
.ats-watpl[b-29hm6wiw3j] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.ats-watpl-readonly[b-29hm6wiw3j] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-watpl-name[b-29hm6wiw3j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.ats-watpl-desc[b-29hm6wiw3j] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.ats-watpl-sid[b-29hm6wiw3j] {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    overflow-wrap: anywhere;
}

/* AppShell sets --ui-grid-sticky-top to the top bar's height; inside the line host the header sticks to the table's own top, so that offset would cover row 1 and take its clicks (W:ats-core-fixes/T-05 #27). Set on a wrapper of the grid only: the page's Toolbar keeps the shared offset. */
.ats-watpl-grid[b-29hm6wiw3j] {
    --ui-grid-sticky-top: 0px;
}
/* frontend/Components/Pages/crm/conversations/ConversationFilterBar.razor.rz.scp.css */
/* The Filters button's wrapper, so the toolbar lays it out like the search. */
.conv-filter[b-qfz2awsigq] {
    position: relative;
    display: inline-flex;
}
/* frontend/Components/Pages/crm/conversations/ConversationFiltersDrawer.razor.rz.scp.css */
.conv-filters[b-l5wf9fo2k0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

.conv-filters-group[b-l5wf9fo2k0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.conv-filters-reason[b-l5wf9fo2k0] {
    margin: 0;
}
/* frontend/Components/Pages/crm/conversations/ConversationList.razor.rz.scp.css */
.conv-list[b-3if7it08cp] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.conv-list-rows[b-3if7it08cp] {
    margin: 0;
    padding: 0;
    overflow-y: auto;
}
/* frontend/Components/Pages/crm/conversations/ConversationRow.razor.rz.scp.css */
.conv-row[b-6vwqz37nmv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-12);
    border-bottom: 1px solid var(--line);
    list-style: none;
}

.conv-row[aria-current="true"][b-6vwqz37nmv] {
    background: var(--accent-soft);
}

.conv-row-head[b-6vwqz37nmv] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.conv-row-time[b-6vwqz37nmv] {
    margin-inline-start: auto;
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    white-space: nowrap;
}

.conv-row-meta[b-6vwqz37nmv] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.conv-row-direction[b-6vwqz37nmv] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

.conv-row-preview[b-6vwqz37nmv] {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-small);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conv-row-calldue[b-6vwqz37nmv],
.conv-row-callmark[b-6vwqz37nmv] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.conv-row-error[b-6vwqz37nmv] {
    margin: 0;
    color: var(--error);
    font-size: var(--fs-caption);
}
/* frontend/Components/Pages/crm/CrmCompanyDealsSection.razor.rz.scp.css */
.cdt-region[b-ugccl8cd6d] {
    margin-top: var(--space-16);
}

.cdt-head[b-ugccl8cd6d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8) var(--space-12);
    margin-bottom: var(--space-8);
}

.cdt-heading[b-ugccl8cd6d] {
    margin: 0;
    font-size: var(--fs-title);
    line-height: var(--lh-title);
}

.cdt-heading:focus-visible[b-ugccl8cd6d] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}
/* frontend/Components/Pages/crm/CrmConversations.razor.rz.scp.css */
.conv-page[b-74ngoubx2q] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.conv-page[b-74ngoubx2q]  .ui-pageheader-band {
    margin-bottom: calc(var(--content-pad) - var(--page-gap));
}

.conv-split[b-74ngoubx2q] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: var(--section-gap-y);
    align-items: start;
}

.conv-list-side[b-74ngoubx2q],
.conv-pane-side[b-74ngoubx2q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

/* The bar's rows may shrink to the list's width, and the search box (a fixed --search-w wide) stops at it: just above the breakpoint the list is about 228px wide, narrower than the box. */
.conv-list-side[b-74ngoubx2q]  .ui-toolbar-filters {
    min-width: 0;
    max-width: 100%;
}

.conv-list-side[b-74ngoubx2q]  .ui-tooltip-region,
.conv-list-side[b-74ngoubx2q]  .ui-srch {
    display: block;
    max-width: 100%;
}

/* Wide: the AI Assistant is one more pane on the right, beside the list and the pane's own narrow columns. */
.conv-split[data-agent="open"][b-74ngoubx2q] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) var(--drawer-w);
}

.conv-split[data-agent="closed"][b-74ngoubx2q] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) auto;
}

.conv-agent-side[b-74ngoubx2q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
    position: sticky;
    top: var(--ui-grid-sticky-top);
}

.conv-split[data-agent="open"] .conv-agent-side[b-74ngoubx2q] {
    height: calc(100dvh - var(--ui-grid-sticky-top) - 2 * var(--content-pad));
}

.conv-agent-head[b-74ngoubx2q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
}

.conv-agent-title[b-74ngoubx2q] {
    font-weight: var(--fw-medium);
}

/* Narrow: one pane at a time, so the grid is a single column. */
.conv-page[data-narrow] .conv-split[b-74ngoubx2q] {
    grid-template-columns: minmax(0, 1fr);
}
/* frontend/Components/Pages/crm/CrmPeople.razor.rz.scp.css */
/* The People page. Tokens only; the row measures belong to the layer's own components. */

.people-page[b-vyfl22l865] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.people-page[b-vyfl22l865]  .ui-pageheader-band {
    margin-bottom: calc(var(--content-pad) - var(--page-gap));
}

.people-description[b-vyfl22l865] {
    margin: 0;
    color: var(--text-secondary);
}

.people-more[b-vyfl22l865] {
    position: relative;
    display: inline-flex;
}
/* frontend/Components/Pages/crm/CrmPersonDetail.razor.rz.scp.css */
/* The person page's frame: one column, three from the wide breakpoint on (identity, the open tab, the role and sections). Tokens only. */
.pp-page[b-pohfh2e91c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.pp-body[b-pohfh2e91c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
}

.pp-left[b-pohfh2e91c],
.pp-middle[b-pohfh2e91c],
.pp-right[b-pohfh2e91c],
.pp-right-stack[b-pohfh2e91c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

@media (min-width: 1100px) {
    .pp-body[b-pohfh2e91c] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }
}
/* frontend/Components/Pages/crm/CrmPostComposer.razor.rz.scp.css */
/* W:posts-on-design-layer/T-06 — the post page. Tokens only; every measure the sheet ruled belongs to the layer's own rows. */
.posts-composer[b-9z9mzq2v5w] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.posts-composer-form[b-9z9mzq2v5w] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

/* a read-only body keeps its line breaks */
.posts-composer-form[b-9z9mzq2v5w]  .ui-ffld-ro {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.posts-viewer-links[b-9z9mzq2v5w] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.posts-banners[b-9z9mzq2v5w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.posts-actions[b-9z9mzq2v5w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}
/* frontend/Components/Pages/crm/CrmPosts.razor.rz.scp.css */
/* W:posts-on-design-layer/T-03 — the posts list page. Tokens only; every measure the sheet ruled (row 40 / header 36, hairlines, hover) is the Grid's own and is never restated here. */

.posts-page[b-u9ouh1wgnr] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

/* The band and the toolbar each carry their own margin; the page's flex gap already gives the between-blocks step (the representatives page measured 48 and 32 stacked). */
.posts-page[b-u9ouh1wgnr]  .ui-pageheader-band {
    margin-bottom: calc(var(--content-pad) - var(--page-gap));
}

.posts-page[b-u9ouh1wgnr]  .ui-toolbar {
    margin-bottom: 0;
}

.posts-description[b-u9ouh1wgnr] {
    margin: 0;
    color: var(--text-secondary);
}

/* AC 18 – 20: the eleven columns are wider than a laptop; the grid scrolls sideways inside its own card (Post column fixed at the left edge), never the page. */
.posts-grid-scroll[b-u9ouh1wgnr] {
    overflow-x: auto;
    max-width: 100%;
}

.posts-list-region[b-u9ouh1wgnr] {
    min-width: 0;
}

.posts-cell[b-u9ouh1wgnr] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.posts-number[b-u9ouh1wgnr] {
    font-variant-numeric: tabular-nums;
}

.posts-muted[b-u9ouh1wgnr] {
    color: var(--text-secondary);
}

.posts-status[b-u9ouh1wgnr],
.posts-published[b-u9ouh1wgnr] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
    white-space: nowrap;
}

/* Print is a state (REQ-005 FR-32): on the calendar the page around it (header, switch, notices) gives way to the paper sheet the calendar draws, whose head states what was printed. */
@media print {
    .posts-page-calendar > :not(.cal-page)[b-u9ouh1wgnr] {
        display: none;
    }
}

/* T-05 (Amended (5) (i); AC 152, 213 – 215): the row's acts are hidden by opacity ONLY — never visibility or display — so they stay Tab stops; shown by row hover, by focus within the row, and always on a
   coarse pointer (hover-revealed, persistent on touch). */
.posts-grid-scroll[b-u9ouh1wgnr]  .posts-row-acts {
    opacity: 0;
}

.posts-grid-scroll[b-u9ouh1wgnr]  tr:hover .posts-row-acts,
.posts-grid-scroll[b-u9ouh1wgnr]  tr:focus-within .posts-row-acts {
    opacity: 1;
}

@media (pointer: coarse) {
    .posts-grid-scroll[b-u9ouh1wgnr]  .posts-row-acts {
        opacity: 1;
    }
}
/* frontend/Components/Pages/crm/leads/CrmLeadsList.razor.rz.scp.css */
.leads-page[b-jdfzdtc5mq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    min-width: 0;
}

.leads-description[b-jdfzdtc5mq] {
    margin: 0;
    color: var(--text-muted, inherit);
}

/* The Person column stays fixed while the table scrolls sideways inside its own frame; the page never scrolls sideways. */
.leads-grid-scroll[b-jdfzdtc5mq] {
    overflow-x: auto;
    max-width: 100%;
}

.lead-actions[b-jdfzdtc5mq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

/* A refused or failed stage move, under the stage select of its row. */
.lead-move-error[b-jdfzdtc5mq] {
    color: var(--error);
    font-size: var(--fs-small);
}

/* The tag that names an active Due date filter, with its remove. */
.lead-due-tag[b-jdfzdtc5mq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--fs-small);
}

/* A Kanban card's overdue day: the danger text token, as the List's Due date cell. */
.lead-kanban-overdue[b-jdfzdtc5mq] {
    color: var(--error);
}
/* frontend/Components/Pages/crm/leads/LeadFilterBar.razor.rz.scp.css */
/* Each filter shares a positioned wrapper so its menu opens under its own control. */
.lead-filter[b-24tt40dacb] {
    position: relative;
    display: inline-flex;
}
/* frontend/Components/Pages/crm/leads/LeadGroupedList.razor.rz.scp.css */
.lead-groups[b-ygxnv8yj2t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16, 16px);
    min-width: 0;
}
/* frontend/Components/Pages/crm/leads/LeadGroupSection.razor.rz.scp.css */
.lead-group[b-kbmborpgsg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.lead-group-title[b-kbmborpgsg] {
    margin: 0;
    font: inherit;
}

/* The heading is a real full-width button, so the whole row is the hit target. */
.lead-group-heading[b-kbmborpgsg] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    min-height: var(--row-h, 40px);
    padding: 0 var(--cell-pad-x, 12px);
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.lead-group-heading[aria-disabled="true"][b-kbmborpgsg] {
    color: var(--text-muted, inherit);
    cursor: not-allowed;
}

.lead-group-caret[b-kbmborpgsg] {
    display: inline-flex;
    transform: rotate(-90deg);
}

.lead-group-caret-open[b-kbmborpgsg] {
    transform: none;
}

.lead-group-name[b-kbmborpgsg] {
    flex: 0 1 auto;
}

.lead-group-count[b-kbmborpgsg] {
    margin-left: auto;
    color: var(--text-muted, inherit);
    font-weight: 400;
}

.lead-group-error[b-kbmborpgsg] {
    color: var(--error);
    font-size: var(--fs-small);
}

/* Each table scrolls sideways inside its own frame, with the Person column fixed; the page never scrolls sideways. */
.lead-group-scroll[b-kbmborpgsg] {
    overflow-x: auto;
    max-width: 100%;
}
/* frontend/Components/Pages/crm/leads/LeadKanban.razor.rz.scp.css */
/* The board scrolls sideways inside its own frame; the page never does. */
.lead-kanban[b-gksobiscj9] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-12);
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: var(--space-8);
}

.lead-kanban-loading[b-gksobiscj9] {
    min-height: var(--space-48);
}
/* frontend/Components/Pages/crm/leads/LeadKanbanCard.razor.rz.scp.css */
.lead-kanban-card[b-hhuajuklx2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

.lead-kanban-card[draggable="true"][b-hhuajuklx2] {
    cursor: grab;
}

/* The card being dragged. */
.lead-kanban-card--lifted[b-hhuajuklx2] {
    opacity: 0.6;
    border-color: var(--accent);
}

.lead-kanban-line[b-hhuajuklx2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.lead-kanban-notes[b-hhuajuklx2] {
    margin: 0;
    font-size: var(--fs-small);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A move that did not happen, on the card that was moved. */
.lead-kanban-error[b-hhuajuklx2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    color: var(--error);
    font-size: var(--fs-small);
}

.lead-kanban-error-actions[b-hhuajuklx2] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
/* frontend/Components/Pages/crm/leads/LeadKanbanColumn.razor.rz.scp.css */
.lead-kanban-column[b-fyuvd0ajgq] {
    flex: 0 0 18rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-8);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

/* The stage a dragged card would go to. */
.lead-kanban-column--over[b-fyuvd0ajgq] {
    border-color: var(--drop-line);
    background: var(--accent-soft);
}

.lead-kanban-head[b-fyuvd0ajgq] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
}

.lead-kanban-name[b-fyuvd0ajgq] {
    margin: 0;
    font-size: var(--fs-heading-sm);
}

.lead-kanban-count[b-fyuvd0ajgq] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.lead-kanban-cards[b-fyuvd0ajgq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-height: var(--space-48);
}

.lead-kanban-empty[b-fyuvd0ajgq] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.lead-kanban-column-error[b-fyuvd0ajgq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    color: var(--error);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/crm/leads/LeadMoreFiltersDrawer.razor.rz.scp.css */
.lead-more[b-yixmeuvyf7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

.lead-more-group[b-yixmeuvyf7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}
/* frontend/Components/Pages/crm/leads/LeadNotesCell.razor.rz.scp.css */
.lead-notes-first[b-wieiy6n8on] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* frontend/Components/Pages/crm/leads/LeadPersonCell.razor.rz.scp.css */
.lead-person[b-skyow6gsyi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.lead-person-line[b-skyow6gsyi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.lead-person-unavailable[b-skyow6gsyi] {
    color: var(--error);
}
/* frontend/Components/Pages/crm/leads/LeadStatusCell.razor.rz.scp.css */
.lead-status[b-amruy9csjo] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.lead-closed[b-amruy9csjo] {
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/crm/people/CrmAddPersonByLinkedInDrawer.razor.rz.scp.css */
.apl-form[b-aamf9wfnty] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.apl-links[b-aamf9wfnty] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.apl-heading[b-aamf9wfnty] {
    margin: 0;
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}

.apl-row[b-aamf9wfnty] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
}

.apl-row > :first-child[b-aamf9wfnty] {
    flex: 1 1 auto;
    min-width: 0;
}

.apl-summary[b-aamf9wfnty],
.apl-workflow[b-aamf9wfnty] {
    margin: 0;
}

.apl-workflow[b-aamf9wfnty],
.apl-note[b-aamf9wfnty] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.apl-results[b-aamf9wfnty] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.apl-result[b-aamf9wfnty] {
    padding: var(--space-8);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

.apl-result-head[b-aamf9wfnty] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.apl-result-url[b-aamf9wfnty] {
    overflow-wrap: anywhere;
}

.apl-empty[b-aamf9wfnty] {
    margin: 0;
    color: var(--text-secondary);
}
/* frontend/Components/Pages/crm/people/CrmAddToWorkflowDrawer.razor.rz.scp.css */
.atw-form[b-i87k0s4p11] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.atw-selected[b-i87k0s4p11],
.atw-skip[b-i87k0s4p11] {
    margin: 0;
    color: var(--text-secondary);
}

.atw-empty[b-i87k0s4p11] {
    margin: 0;
    color: var(--text-secondary);
}

.atw-summary[b-i87k0s4p11] {
    margin: 0;
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

.atw-list[b-i87k0s4p11] {
    margin: 0;
    padding-left: var(--space-16);
    color: var(--text-secondary);
}
/* frontend/Components/Pages/crm/people/CrmBulkFieldEditDrawer.razor.rz.scp.css */
.cbf-form[b-tc02a22nh4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.cbf-empty[b-tc02a22nh4] {
    margin: 0;
    color: var(--text-secondary);
}

.cbf-summary[b-tc02a22nh4] {
    margin: 0;
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

.cbf-failures[b-tc02a22nh4] {
    margin: 0;
    padding-left: var(--space-16);
    color: var(--text-secondary);
}
/* frontend/Components/Pages/crm/people/CrmImportFromLinkedInListDrawer.razor.rz.scp.css */
.imp-form[b-rsuwv87aj2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.imp-pages[b-rsuwv87aj2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-16);
}

.imp-result[b-rsuwv87aj2] {
    margin: 0;
}

.imp-empty[b-rsuwv87aj2] {
    margin: 0;
    color: var(--text-secondary);
}
/* frontend/Components/Pages/crm/people/CrmPeopleFilterBar.razor.rz.scp.css */
.people-filter-fields[b-pt5pmgpsxs] {
    display: contents;
}

.people-filter-saved[b-pt5pmgpsxs] {
    display: inline-flex;
    align-items: flex-end;
}

.people-filter-drawer[b-pt5pmgpsxs] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

.people-filter-save[b-pt5pmgpsxs] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2, 8px);
}
/* frontend/Components/Pages/crm/people/CrmPeopleTable.razor.rz.scp.css */
.people-table[b-fswobnc82v] {
    min-width: 0;
}

.people-table-scroll[b-fswobnc82v] {
    overflow-x: auto;
    max-width: 100%;
}

.people-cell[b-fswobnc82v] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
    max-width: 100%;
}

.people-text[b-fswobnc82v] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* frontend/Components/Pages/crm/people/CrmPersonCreateDrawer.razor.rz.scp.css */
.cpc-form[b-74s8snk4qr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.cpc-names[b-74s8snk4qr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-16);
}

.cpc-heading[b-74s8snk4qr] {
    margin: 0;
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}

.cpc-matches[b-74s8snk4qr] {
    margin: var(--space-8) 0 0;
    padding-left: var(--space-16);
}

.cpc-matched[b-74s8snk4qr] {
    margin-left: var(--space-8);
    color: var(--text-secondary);
}
/* frontend/Components/Pages/crm/person/CrmPersonCompanyRole.razor.rz.scp.css */
.cpr[b-zq2odbutlh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.cpr-heading[b-zq2odbutlh] {
    margin: 0;
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}

.cpr-block[b-zq2odbutlh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.cpr-block + .cpr-block[b-zq2odbutlh] {
    border-top: var(--border-w) solid var(--line);
    padding-top: var(--space-12);
}

.cpr-add[b-zq2odbutlh] {
    border-top: var(--border-w) solid var(--line);
    padding-top: var(--space-8);
}

.cpr-end-sentence[b-zq2odbutlh] {
    margin: 0;
}

.cpr-form-heading[b-zq2odbutlh] {
    margin: 0;
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}

.cpr-company[b-zq2odbutlh] {
    font-weight: var(--fw-semibold);
}

.cpr-rows[b-zq2odbutlh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.cpr-none[b-zq2odbutlh] {
    margin: 0;
    color: var(--text-secondary);
}

.cpr-acts[b-zq2odbutlh] {
    display: flex;
    gap: var(--space-8);
}

.cpr-form[b-zq2odbutlh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}
/* frontend/Components/Pages/crm/person/CrmPersonDealItem.razor.rz.scp.css */
/* The item's own words: the Tasks slot under the Kv list. Every colour and space is a token. */
.pi-root[b-ahk4omwrey] {
    min-width: 0;
    margin: var(--space-8) 0;
}

.pi-slot[b-ahk4omwrey] {
    margin-top: var(--space-8);
}
/* frontend/Components/Pages/crm/person/CrmPersonDealsSection.razor.rz.scp.css */
/* A row: the pipeline, stage, status and amount on one line, then the owner, the company, the day and Details. Every colour and space is a token. */
.pd-root[b-miiert7zqe] {
    min-width: 0;
}

.pd-body[b-miiert7zqe] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-8) 0;
}

.pd-head[b-miiert7zqe],
.pd-meta[b-miiert7zqe] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.pd-meta[b-miiert7zqe] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

/* a count not read yet or not readable: dashes in the muted colour, never a number */
.pd-count-none[b-miiert7zqe] {
    color: var(--text-secondary);
}
/* frontend/Components/Pages/crm/person/CrmPersonFieldRows.razor.rz.scp.css */
.crm-person-section[b-4l8zyii8pp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.crm-person-none[b-4l8zyii8pp] {
    color: var(--text-secondary);
}

.crm-note-help[b-4l8zyii8pp] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/crm/person/CrmPersonIdentityCard.razor.rz.scp.css */
.crm-person-card[b-q9vrsonkx9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

.crm-person-head[b-q9vrsonkx9] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}

.crm-person-id[b-q9vrsonkx9] {
    flex: 1 1 auto;
    min-width: 0;
}

.crm-person-namerow[b-q9vrsonkx9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.crm-person-name[b-q9vrsonkx9] {
    font-size: var(--fs-heading-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.crm-person-name-edit[b-q9vrsonkx9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.crm-person-name-box[b-q9vrsonkx9] {
    flex: 1 1 8rem;
    min-width: 0;
}

.crm-person-namerow[b-q9vrsonkx9]  .ui-ie {
    min-width: 0;
    max-width: 100%;
}

.crm-person-role[b-q9vrsonkx9] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.crm-person-acts[b-q9vrsonkx9] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.crm-person-menu[b-q9vrsonkx9] {
    position: relative;
}

.crm-person-section[b-q9vrsonkx9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.crm-person-none[b-q9vrsonkx9] {
    color: var(--text-secondary);
}

.crm-note-help[b-q9vrsonkx9] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.crm-person-card a[b-q9vrsonkx9] {
    color: var(--accent);
    overflow-wrap: anywhere;
}
/* frontend/Components/Pages/crm/person/CrmPersonLeadItem.razor.rz.scp.css */
/* The item's own words: the slot and the seam sentence under the Kv list. Every colour and space is a token. */
.pi-root[b-uwwmvkjha1] {
    min-width: 0;
    margin: var(--space-8) 0;
}

.pi-slot[b-uwwmvkjha1],
.pi-seam[b-uwwmvkjha1] {
    margin-top: var(--space-8);
}

.pi-seam[b-uwwmvkjha1] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/crm/person/CrmPersonLeadsSection.razor.rz.scp.css */
/* A row: the pipeline, status and stage on one line, then the owner, the day and Details, then the notes; a refused move is a line under the first. Every colour and space is a token. */
.pl-root[b-4lr9mi4dy9] {
    min-width: 0;
}

.pl-body[b-4lr9mi4dy9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-8) 0;
}

.pl-head[b-4lr9mi4dy9],
.pl-meta[b-4lr9mi4dy9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.pl-meta[b-4lr9mi4dy9] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.pl-move-error[b-4lr9mi4dy9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    color: var(--error);
    font-size: var(--fs-small);
}

.pl-notes[b-4lr9mi4dy9] {
    min-width: 0;
}
/* frontend/Components/Pages/crm/person/CrmPersonLongTextEdit.razor.rz.scp.css */
.crm-about-text[b-8zp4keogmj] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.crm-about-toggle[b-8zp4keogmj] {
    display: inline-block;
    margin-inline-start: var(--space-4);
}
/* frontend/Components/Pages/crm/person/CrmPersonMergeDrawer.razor.rz.scp.css */
.cpm-body[b-9ie4dxx08e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

.cpm-explain[b-9ie4dxx08e],
.cpm-note[b-9ie4dxx08e] {
    margin: 0;
    color: var(--text-secondary);
}

.cpm-candidates[b-9ie4dxx08e] {
    max-height: calc(var(--space-48) * 5);
    overflow-y: auto;
    min-width: 0;
}

.cpm-acts[b-9ie4dxx08e] {
    display: flex;
    justify-content: flex-end;
}
/* frontend/Components/Pages/crm/person/CrmPersonNoteDialog.razor.rz.scp.css */
.cpn-form[b-fy3iys2i3t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}
/* frontend/Components/Pages/crm/person/CrmPersonPropertiesDrawer.razor.rz.scp.css */
.cpd-body[b-5a6zqok5nd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    min-width: 0;
}

.cpd-section[b-5a6zqok5nd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.cpd-heading[b-5a6zqok5nd] {
    margin: 0;
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}

.cpd-row[b-5a6zqok5nd] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-8);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

.cpd-row-text[b-5a6zqok5nd] {
    flex: 1;
    min-width: 0;
}

.cpd-row-title[b-5a6zqok5nd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    overflow-wrap: anywhere;
}

.cpd-row-sub[b-5a6zqok5nd],
.cpd-row-note[b-5a6zqok5nd],
.cpd-none[b-5a6zqok5nd] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    overflow-wrap: anywhere;
}

.cpd-none[b-5a6zqok5nd] {
    margin: 0;
}

.cpd-chips[b-5a6zqok5nd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.cpd-skill-add[b-5a6zqok5nd] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
}

.cpd-skill-input[b-5a6zqok5nd] {
    flex: 1;
    min-width: 0;
}

.cpd-acts[b-5a6zqok5nd] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.cpd-saved[b-5a6zqok5nd] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.cpd-form[b-5a6zqok5nd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}
/* frontend/Components/Pages/crm/person/CrmPersonSections.razor.rz.scp.css */
/* The right column: the sections one under another, a space between. Every colour and space is a token. */
.pn-root[b-ppks4cx0xf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}
/* frontend/Components/Pages/crm/person/CrmPersonSequencesSection.razor.rz.scp.css */
/* A row: the sequence's name and its state pill, the step line under them, then the date and the representative. Every colour and space is a token. */
.ps-root[b-d7yvtwli8o] {
    min-width: 0;
}

.ps-body[b-d7yvtwli8o] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-8) 0;
}

.ps-head[b-d7yvtwli8o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.ps-line[b-d7yvtwli8o],
.ps-meta[b-d7yvtwli8o] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    overflow-wrap: anywhere;
}

.ps-meta[b-d7yvtwli8o] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}
/* frontend/Components/Pages/crm/person/CrmPersonTimeline.razor.rz.scp.css */
/* One activity inside ListRow: the icon, then the title line, the snippet, the sequence link or its named line, and the time. Every colour and space is a token. */
.pt-root[b-ru5zvrfjbg] {
    min-width: 0;
}

.pt-icon[b-ru5zvrfjbg] {
    flex: none;
    color: var(--text-secondary);
}

.pt-body[b-ru5zvrfjbg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-8) 0;
}

.pt-head[b-ru5zvrfjbg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.pt-snippet[b-ru5zvrfjbg] {
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.pt-sequence-link[b-ru5zvrfjbg] {
    font-size: var(--fs-small);
    color: var(--accent);
}

.pt-sequence-invalid[b-ru5zvrfjbg] {
    font-size: var(--fs-small);
    color: var(--error);
}

.pt-when[b-ru5zvrfjbg] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}
/* frontend/Components/Pages/crm/person/CrmPersonWorkflows.razor.rz.scp.css */
/* The grid sits in its own scrolling frame; the divider is a rule above the first past row. Every colour and space is a token. */
.pw-root[b-975ng92q0s] {
    min-width: 0;
}

.pw-scroll[b-975ng92q0s] {
    overflow-x: auto;
    max-width: 100%;
}

.pw-workflow[b-975ng92q0s] {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.pw-text[b-975ng92q0s] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pw-root[b-975ng92q0s]  .pw-first-past {
    box-shadow: inset 0 2px 0 var(--line-hover);
}
/* frontend/Components/Pages/crm/posts/calendar/CalendarChip.razor.rz.scp.css */
/* W:posts-calendar/T-03 (F-027/REQ-005 FR-16, codeperts #3900) — the chip, on the layer's tokens only. One line, ellipsized; the tone pair of the matching StatusPill; the Warn token for the outline. */
.cal-chip-wrap[b-ryijs8jcb5] {
    display: flex;
    min-width: 0;
    max-width: 100%;
    border-radius: var(--radius);
    border: var(--border-w) solid transparent;
    background: var(--cal-chip-bg);
    color: var(--cal-chip-fg);
}

.cal-tone-info[b-ryijs8jcb5] { --cal-chip-bg: var(--info-bg); --cal-chip-fg: var(--info); }
.cal-tone-neutral[b-ryijs8jcb5] { --cal-chip-bg: var(--neutral-bg); --cal-chip-fg: var(--neutral); }
.cal-tone-ok[b-ryijs8jcb5] { --cal-chip-bg: var(--ok-bg); --cal-chip-fg: var(--ok); }
.cal-tone-error[b-ryijs8jcb5] { --cal-chip-bg: var(--error-bg); --cal-chip-fg: var(--error); }
.cal-tone-warn[b-ryijs8jcb5] { --cal-chip-bg: var(--warn-bg); --cal-chip-fg: var(--warn); }

/* The orange outline: a warning flag, drawn around the chip in the Warn token. */
.cal-outline[b-ryijs8jcb5] {
    border-color: var(--warn);
}

.cal-chip-btn[b-ryijs8jcb5],
.cal-chip-wrap[b-ryijs8jcb5]  a {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    width: 100%;
    padding: var(--space-2) var(--space-4);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius);
}

.cal-chip-btn:focus-visible[b-ryijs8jcb5],
.cal-chip-wrap[b-ryijs8jcb5]  a:focus-visible {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.cal-chip-icon[b-ryijs8jcb5] {
    display: inline-flex;
    flex: none;
}

.cal-chip-rep[b-ryijs8jcb5] {
    flex: none;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--fw-semibold);
}

.cal-chip-excerpt[b-ryijs8jcb5] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Below 1024 px a chip shows the icon and the representative's name only (Amended (4) (c)); the tooltip and the accessible name keep the excerpt. */
@media (max-width: 1024px) {
    .cal-chip-excerpt[b-ryijs8jcb5] {
        display: none;
    }
}

/* Print (REQ-005 FR-32): the chip prints its status as a WORD — colour is never load-bearing on paper. The word is not drawn on screen (the name and the tooltip carry it there). Paper is narrower than 1024px, so the
   narrow rule above must not hide the excerpt on it; a chip wraps instead of ellipsizing, so nothing printed is cut. */
.cal-chip-print[b-ryijs8jcb5] {
    display: none;
}

@media print {
    .cal-chip-print[b-ryijs8jcb5] {
        display: inline;
        font-weight: var(--fw-semibold);
    }

    .cal-chip-excerpt[b-ryijs8jcb5] {
        display: inline;
        white-space: normal;
        overflow: visible;
    }

    .cal-chip-rep[b-ryijs8jcb5],
    .cal-chip-btn[b-ryijs8jcb5],
    .cal-chip-wrap[b-ryijs8jcb5]  a {
        white-space: normal;
        max-width: none;
    }
}
/* frontend/Components/Pages/crm/posts/calendar/CalendarDayCell.razor.rz.scp.css */
/* W:posts-calendar/T-03 (F-027/REQ-005 FR-12, FR-23, Amended (4) (b), codeperts #3900) — a day cell on the layer's tokens. */
.cal-cell[b-gyf1donuax] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    min-height: calc(var(--row-h) * 2);
    padding: var(--space-4);
    background: var(--surface);
    border-inline-end: var(--border-w) solid var(--line);
    border-block-end: var(--border-w) solid var(--line);
}

.cal-cell-today[b-gyf1donuax] {
    box-shadow: inset 0 0 0 var(--focus-w) var(--accent);
}

.cal-cell-outside[b-gyf1donuax] {
    background: var(--fill-1);
    color: var(--text-secondary);
}

.cal-cell-head[b-gyf1donuax] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--control-h-sm);
}

.cal-daynum[b-gyf1donuax] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
}

.cal-cell-today .cal-daynum[b-gyf1donuax] {
    color: var(--accent);
    font-weight: var(--fw-semibold);
}

.cal-chips[b-gyf1donuax] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

/* The '+': always a Tab stop — hidden by opacity, never visibility or display. Shown on hover, on keyboard focus within the cell and on a coarse pointer. */
.cal-add[b-gyf1donuax] {
    opacity: 0;
}

.cal-cell:hover .cal-add[b-gyf1donuax],
.cal-cell:focus-within .cal-add[b-gyf1donuax],
.cal-add:focus-within[b-gyf1donuax] {
    opacity: 1;
}

@media (pointer: coarse) {
    .cal-add[b-gyf1donuax] {
        opacity: 1;
    }
}

/* Print (REQ-005 FR-32): the posts beyond the cap print as text; the '+' does not print. */
.cal-print-overflow[b-gyf1donuax] {
    display: none;
}

@media print {
    .cal-print-overflow[b-gyf1donuax] {
        display: block;
    }

    .cal-add[b-gyf1donuax] {
        display: none;
    }
}

.cal-print-chip[b-gyf1donuax] {
    display: block;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/Pages/crm/posts/calendar/CalendarMonthGrid.razor.rz.scp.css */
.cal-month[b-zmmg8uf9ex] {
    border-inline-start: var(--border-w) solid var(--line);
    border-block-start: var(--border-w) solid var(--line);
}

.cal-weekdays[b-zmmg8uf9ex],
.cal-days[b-zmmg8uf9ex] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-weekday[b-zmmg8uf9ex] {
    padding: var(--space-8);
    background: var(--fill-1);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-semibold);
    border-inline-end: var(--border-w) solid var(--line);
    border-block-end: var(--border-w) solid var(--line);
}
/* frontend/Components/Pages/crm/posts/calendar/CalendarMorePopover.razor.rz.scp.css */
.cal-more[b-ga8mkc823v] {
    border: 0;
    background: transparent;
    padding: var(--space-2) var(--space-4);
    color: var(--accent);
    font: inherit;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    cursor: pointer;
    border-radius: var(--radius);
}

.cal-more:hover[b-ga8mkc823v] {
    background: var(--accent-soft);
}

.cal-more:focus-visible[b-ga8mkc823v] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

[b-ga8mkc823v] .cal-pop {
    min-width: calc(var(--row-h) * 6);
    max-width: calc(var(--row-h) * 8);
}

.cal-pop-list[b-ga8mkc823v] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: calc(var(--row-h) * 8);
    overflow-y: auto;
    padding: var(--space-4);
}

/* "+N more" does not print: the day's posts beyond the cap print as text (CalendarDayCell). */
@media print {
    .cal-more[b-ga8mkc823v] {
        display: none;
    }
}
/* frontend/Components/Pages/crm/posts/calendar/CalendarWeekGrid.razor.rz.scp.css */
.cal-week[b-8shmvl85cu] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-inline-start: var(--border-w) solid var(--line);
    border-block-start: var(--border-w) solid var(--line);
}

.cal-weekcol[b-8shmvl85cu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cal-weekhead[b-8shmvl85cu] {
    padding: var(--space-8);
    background: var(--fill-1);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-semibold);
    border-inline-end: var(--border-w) solid var(--line);
    border-block-end: var(--border-w) solid var(--line);
}

/* A column has a fixed height (from a token) and scrolls inside itself when its chips do not fit: the page does not grow and the other days do not move. */
.cal-week[b-8shmvl85cu]  .cal-chips {
    block-size: calc(var(--row-h) * 8);
    overflow-y: auto;
}
/* frontend/Components/Pages/crm/posts/calendar/PostCalendar.razor.rz.scp.css */
/* W:posts-calendar/T-03 (F-027/REQ-005 FR-10, FR-17, FR-25, codeperts #3900) — the calendar's frame on the layer's tokens. */
.cal-page[b-u4czcjdg54] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.cal-head[b-u4czcjdg54] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.cal-drafts[b-u4czcjdg54] {
    margin-inline-start: auto;
}

/* A refresh keeps the previous grid on screen, dimmed and inert, under the busy line. */
.cal-dimmed[b-u4czcjdg54] {
    opacity: var(--busy-opacity);
    pointer-events: none;
}

.cal-legend[b-u4czcjdg54] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.cal-outline-sample[b-u4czcjdg54] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-8);
    border: var(--border-w) solid var(--warn);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

/* Print is a state (REQ-005 FR-32): the calendar prints itself. The paper head is not shown on screen; in print it shows, and every affordance of the screen view gives way — the head (‹ › Today, the mode select, the drafts
   counter), the filter bar, the notices' buttons and the drawer and dialog. The grid, its chips (each with a status word) and the key stay. */
.cal-print[b-u4czcjdg54] {
    display: none;
}

@media print {
    .cal-print[b-u4czcjdg54] {
        display: block;
    }

    .cal-head[b-u4czcjdg54],
    .cal-filterbar[b-u4czcjdg54],
    .cal-overlays[b-u4czcjdg54] {
        display: none;
    }

    .cal-notices[b-u4czcjdg54]  .ui-banner button,
    .cal-notices[b-u4czcjdg54]  .ui-banner fluent-button,
    .cal-notices[b-u4czcjdg54]  .ui-banner a {
        display: none;
    }

    .cal-dimmed[b-u4czcjdg54] {
        opacity: 1;
    }
}

.cal-print-note[b-u4czcjdg54] {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}
/* frontend/Components/Pages/crm/posts/calendar/PostPreviewDrawer.razor.rz.scp.css */
/* W:posts-calendar/T-04 (F-027/REQ-005 FR-19, codeperts #3907) — the preview drawer's content, on the layer's tokens. */
.cal-pv[b-busi767m45] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

/* The post text exactly as stored: line breaks kept, nothing parsed or truncated; it scrolls inside the drawer. */
.cal-pv-body[b-busi767m45] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
}

.cal-pv-img img[b-busi767m45] {
    display: block;
    max-width: 100%;
    border-radius: var(--radius);
}

.cal-pv-imgfail[b-busi767m45] {
    padding: var(--space-8);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.cal-pv-warn[b-busi767m45] {
    margin-block-start: var(--space-4);
    color: var(--warn);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.cal-pv-actions[b-busi767m45] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.cal-pv-more[b-busi767m45] {
    position: relative;
}
/* frontend/Components/Pages/crm/posts/PostActionRow.razor.rz.scp.css */
/* W:posts-on-design-layer/T-07 — the ⋯ menu's anchor in the composer's action row. */
.posts-actions-menu[b-ufvfrf3627] {
    position: relative;
    display: inline-flex;
}
/* frontend/Components/Pages/crm/posts/PostBodyCounter.razor.rz.scp.css */
/* W:posts-on-design-layer/T-06 — the counter and the fold bar. Tokens only. */
.posts-counter[b-7ry3j0zdfb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.posts-counter-n[b-7ry3j0zdfb] {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.posts-counter-over[b-7ry3j0zdfb] {
    color: var(--warn);
    font-weight: 600;
}

.posts-fold[b-7ry3j0zdfb] {
    position: relative;
    height: 30px;
}

.posts-fold-bar[b-7ry3j0zdfb] {
    position: relative;
    height: 6px;
    background: var(--line);
    border-radius: 3px;
}

.posts-fold-tick[b-7ry3j0zdfb] {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 14px;
    background: var(--error);
}

.posts-fold-tick-140[b-7ry3j0zdfb] {
    left: var(--tick-140);
}

.posts-fold-tick-210[b-7ry3j0zdfb] {
    left: var(--tick-210);
}

.posts-fold-label[b-7ry3j0zdfb] {
    position: absolute;
    top: 12px;
    font-size: var(--fs-caption);
    color: var(--text-secondary);
}

/* the 140 label ends at its tick, the 210 label starts at its tick: the two never overlap */
.posts-fold-label-140[b-7ry3j0zdfb] {
    right: calc(100% - var(--tick-140));
}

.posts-fold-label-210[b-7ry3j0zdfb] {
    left: var(--tick-210);
}

.posts-fold-caption[b-7ry3j0zdfb] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}
/* frontend/Components/Pages/crm/posts/PostEmojiPicker.razor.rz.scp.css */
/* W:posts-on-design-layer/T-06 — the emoji popover's body. */
.posts-emoji[b-667izojx60] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    width: 320px;
    max-height: 360px;
    overflow-y: auto;
}

.posts-emoji-entries[b-667izojx60],
.posts-emoji-recent[b-667izojx60] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.posts-emoji-cell[b-667izojx60] {
    position: relative;
    display: inline-flex;
}

/* the skin-tone row is a sibling of the entry's button, shown on hover or focus within the cell */
.posts-emoji-variants[b-667izojx60] {
    display: none;
    gap: var(--space-4);
}

.posts-emoji-cell:hover .posts-emoji-variants[b-667izojx60],
.posts-emoji-cell:focus-within .posts-emoji-variants[b-667izojx60] {
    display: inline-flex;
}

.posts-emoji-note[b-667izojx60] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}
/* frontend/Components/Pages/crm/posts/PostFilterBar.razor.rz.scp.css */
/* W:posts-on-design-layer/T-03 — a filter button and its menu share a positioned wrapper so the menu opens under its own button. */
.posts-filter[b-wonlpu5fbs] {
    position: relative;
    display: inline-flex;
}
/* frontend/Components/Pages/crm/posts/PostImages.razor.rz.scp.css */
/* W:posts-on-design-layer/T-06 — the images and their per-image rows. */
.posts-images[b-o8vfj3kpu3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.posts-images-hint[b-o8vfj3kpu3] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.posts-image-row[b-o8vfj3kpu3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.posts-image-name[b-o8vfj3kpu3] {
    font-weight: 600;
}

.posts-image-meta[b-o8vfj3kpu3],
.posts-image-count[b-o8vfj3kpu3] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    font-variant-numeric: tabular-nums;
}
/* frontend/Components/Pages/crm/posts/PostMetricsPanel.razor.rz.scp.css */
/* W:posts-on-design-layer/T-07 — the metrics panel's layout; the rows own their measures. */
.posts-metrics[b-0pgt17slbr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.posts-metrics-header[b-0pgt17slbr] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.posts-metrics-tiles[b-0pgt17slbr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.posts-metrics-series[b-0pgt17slbr] {
    overflow-x: auto;
    max-width: 100%;
}

.posts-metrics-series[b-0pgt17slbr]  .posts-metrics-gap {
    color: var(--text-secondary);
}
/* frontend/Components/Pages/crm/posts/PostPreview.razor.rz.scp.css */
/* W:posts-on-design-layer/T-06 — the LinkedIn card on tokens. Inert: no control, nothing focusable. The legacy card's look, restyled; classes are the page's own (li-*). */
.li-card[b-4rks1i8nvn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-16);
    border: var(--border-w) solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
}

.li-header[b-4rks1i8nvn] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.li-avatar[b-4rks1i8nvn] {
    display: grid;
    place-items: center;
    width: var(--avatar-md);
    height: var(--avatar-md);
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-dark);
    font-weight: 600;
}

.li-name[b-4rks1i8nvn] {
    font-weight: 600;
}

.li-empty[b-4rks1i8nvn] {
    margin: 0;
    color: var(--text-secondary);
}

.li-body[b-4rks1i8nvn] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.li-mention[b-4rks1i8nvn] {
    padding: 0 var(--space-4);
    border-radius: 4px;
    background: var(--neutral);
    color: var(--accent);
}

.li-hashtag[b-4rks1i8nvn] {
    color: var(--accent);
}

.li-fold[b-4rks1i8nvn] {
    margin: var(--space-4) 0;
    border-top: var(--border-w) dashed var(--line);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.li-fold-emphasised[b-4rks1i8nvn] {
    border-top-color: var(--error);
    color: var(--error);
}

.li-image-grid[b-4rks1i8nvn] {
    display: grid;
    gap: var(--space-4);
}

.li-image-grid.grid-1[b-4rks1i8nvn] { grid-template-columns: 1fr; }
.li-image-grid.grid-2[b-4rks1i8nvn] { grid-template-columns: 1fr 1fr; }
.li-image-grid.grid-3[b-4rks1i8nvn] { grid-template-columns: 1fr 1fr; }
.li-image-grid.grid-3 .li-image-cell:first-child[b-4rks1i8nvn] { grid-column: 1 / -1; }
.li-image-grid.grid-4[b-4rks1i8nvn] { grid-template-columns: 1fr 1fr; }

.li-image-cell[b-4rks1i8nvn] {
    width: 100%;
    height: var(--prev-img-h);
    object-fit: cover;
    border-radius: 4px;
}

.li-image-overflow[b-4rks1i8nvn] {
    display: grid;
    place-items: center;
    height: var(--prev-img-h);
    border-radius: 4px;
    background: var(--neutral);
    color: var(--text-secondary);
    font-weight: 600;
}

.li-link-card[b-4rks1i8nvn] {
    padding: var(--space-8);
    border: var(--border-w) solid var(--line);
    border-radius: 4px;
}

.li-link-card-host[b-4rks1i8nvn] {
    font-weight: 600;
}

.li-link-card-url[b-4rks1i8nvn] {
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}
/* frontend/Components/Pages/crm/posts/PostQualityPanel.razor.rz.scp.css */
/* W:posts-on-design-layer/T-06 — the quality panel. */
.posts-stars[b-hi1fqmi6tj] {
    display: flex;
    gap: var(--space-4);
}

.posts-quality-note[b-hi1fqmi6tj] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}
/* frontend/Components/Pages/crm/posts/PostRowActs.razor.rz.scp.css */
/* W:posts-on-design-layer/T-05 — the Actions cell's own layout. Showing and hiding it is the page's (CrmPosts.razor.css), by opacity only. */
.posts-row-acts[b-zyvwrvtsb4] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    white-space: nowrap;
}

.posts-row-menu[b-zyvwrvtsb4] {
    position: relative;
    display: inline-flex;
}
/* frontend/Components/Pages/crm/posts/PostStatusLine.razor.rz.scp.css */
/* W:posts-on-design-layer/T-06 — the status line under the composer header. */
.posts-status-line[b-u4cgz2wfh4] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.posts-autosave[b-u4cgz2wfh4] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}
/* frontend/Components/Pages/crm/posts/PostStyleToolbar.razor.rz.scp.css */
/* W:posts-on-design-layer/T-06 — the style row under the body. */
.posts-style-toolbar[b-mcvdi81scu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.posts-style-row[b-mcvdi81scu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.posts-style-note[b-mcvdi81scu] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}
/* frontend/Components/Pages/crm/posts/PostTypeCountsStrip.razor.rz.scp.css */
/* W:posts-on-design-layer/T-03 (FR-53) — the counts strip: its own line under the toolbar, chips wrap, tokens only. */
.posts-counts[b-xzeqv8m8kl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.posts-counts-label[b-xzeqv8m8kl] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}
/* frontend/Components/Pages/crm/sequences/AddPeopleToSequenceDrawer.razor.rz.scp.css */
/* FCRM-001/REQ-002 FR-5 … FR-8: layout only, tokens only — every surface, pill, row and banner is its catalogue row's own. */

.seq-add[b-sx6qm22txc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.seq-add-hint[b-sx6qm22txc],
.seq-add-muted[b-sx6qm22txc] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

/* FR-6: more than eight sequences scroll inside an eight-row height — the drawer never grows. */
.seq-picker[b-sx6qm22txc] {
    max-height: calc(var(--row-h) * 8);
    overflow-y: auto;
}

/* FR-6: the pick is composed inside row 20's content — a native button filling the row (ui-lrow-txt gives it flex:1 and the ellipsis). */
.seq-picker-row[b-sx6qm22txc] {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    min-height: var(--row-h);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--text);
    text-align: start;
    cursor: pointer;
}

.seq-picker-row:disabled[b-sx6qm22txc] {
    cursor: default;
}

.seq-picker-name[b-sx6qm22txc] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* FR-6: a Draft/Off row's reason — plain text, always visible, never only on hover. */
.seq-picker-reason[b-sx6qm22txc] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.seq-add-fixed[b-sx6qm22txc] {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.seq-preview[b-sx6qm22txc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.seq-preview p[b-sx6qm22txc] {
    margin: 0;
}

.seq-preview-norep[b-sx6qm22txc] {
    margin: 0;
    padding-inline-start: var(--space-16);
}

/* FR-7 line 5: italic secondary text. */
.seq-preview-note[b-sx6qm22txc] {
    font-style: italic;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/crm/sequences/page/SequenceConfigColumn.razor.rz.scp.css */
/* FCRM-001/REQ-001 FR-39 (Task 23) — the configure column's own sheet. Tokens only (DesignLayerLint does not scan Pages/; the column's own test pins it).
   The column scrolls inside the page's slot (.seq-bp-config, overflow-y: auto, SequenceBlueprint.razor.css); a Select menu may clip against that scroll box — R-C S4, a live-check item.
   An empty required field and an unwired output are drawn in the error colour (FR-39). */

.seq-cfg[b-u2mc6yrczt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.seq-cfg-empty[b-u2mc6yrczt] {
    margin: 0;
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.seq-cfg-type[b-u2mc6yrczt] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.seq-cfg-badges[b-u2mc6yrczt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.seq-cfg-typehint[b-u2mc6yrczt],
.seq-cfg-inside[b-u2mc6yrczt] {
    margin: 0;
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.seq-cfg-field[b-u2mc6yrczt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.seq-cfg-label[b-u2mc6yrczt] {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

.seq-cfg-notset[b-u2mc6yrczt] {
    font-size: var(--fs-small);
    color: var(--error);
}

.seq-cfg-bad[b-u2mc6yrczt] {
    font-size: var(--fs-small);
    color: var(--error);
}

.seq-cfg-outputs[b-u2mc6yrczt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.seq-cfg-outputs-title[b-u2mc6yrczt] {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

/* An unwired output's line reads "→ not connected" in the error colour (the Select draws its own border in the error colour through Invalid). */
.seq-cfg-unwired[b-u2mc6yrczt]  .ui-sel-v {
    color: var(--error);
}

.seq-cfg-replied[b-u2mc6yrczt] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.seq-cfg-foot[b-u2mc6yrczt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding-top: var(--space-8);
    border-top: var(--border-w) solid var(--line);
}
/* frontend/Components/Pages/crm/sequences/page/SequencePalette.razor.rz.scp.css */
/* FCRM-001/REQ-001 FR-38 (Task 22) — the palette's own sheet. Tokens only (DesignLayerLint does not scan Pages/; the sequences folder's CSS scanner does).
   The palette scrolls within its card (the Depth section: "the card scrolls within itself"); a handle takes touch drags itself (touch-action: none —
   otherwise a touch drag becomes a scroll and the script sees pointercancel). */

.seq-palette[b-x20mmk6qgl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
}

.seq-palette-group[b-x20mmk6qgl] {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    padding: var(--space-8) var(--space-4) var(--space-4);
}

/* The Tooltip region is inline by default; the handle fills the row. */
.seq-palette[b-x20mmk6qgl]  .ui-tooltip-region {
    display: flex;
    flex: 1;
    min-width: 0;
}

.seq-palette-handle[b-x20mmk6qgl] {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.seq-palette-handle[aria-disabled="true"][b-x20mmk6qgl] {
    cursor: not-allowed;
    color: var(--text-secondary);
}

.seq-palette-handle:focus-visible[b-x20mmk6qgl] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.seq-palette-label[b-x20mmk6qgl] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seq-palette-foot[b-x20mmk6qgl] {
    margin: var(--space-8) 0 0;
    font-size: var(--fs-small);
    color: var(--text-secondary);
}
/* frontend/Components/Pages/crm/sequences/SequenceActivityTab.razor.rz.scp.css */
/* FCRM-001/REQ-004 FR-20 — SequenceActivityTab. Tokens only. */

.seq-act-date[b-995c877tzk] {
    margin: var(--space-16) 0 var(--space-8);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
}

.seq-act-time[b-995c877tzk] {
    flex: none;
    font-variant-numeric: tabular-nums;
}

.seq-act-empty[b-995c877tzk] {
    color: var(--text-secondary);
}
/* frontend/Components/Pages/crm/sequences/SequenceArchiveConfirmDialog.razor.rz.scp.css */
/* FCRM-001/REQ-001 FR-51 — the archive confirmation's body. Tokens only (a page-source scan pins it: DesignLayerLint does not scan Pages/). The dialog's shell, footer and width are row 17's. */
.seq-dlg[b-tq5cuefisn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.seq-dlg-text[b-tq5cuefisn] {
    margin: 0;
}
/* frontend/Components/Pages/crm/sequences/SequenceBlueprint.razor.rz.scp.css */
/* FCRM-001/REQ-001 FR-37 (Task 22; spec §4.8, R-C §4) — the blueprint page's own sheet. Tokens only (DesignLayerLint does not scan Pages/; the sequences folder's CSS scanner does).
   The board is R-C §4's "220px | 1fr | 300px" (03:195): the palette column is the rail's own width token (--rail-w, 220px); the configure column's 300px has no token and is this page's
   stated value. The board has a fixed height so each card's body scrolls within itself (FR-38 palette, FR-39 column) and the canvas fills its card. */

.seq-bp-page[b-epn8g2hanz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.seq-bp-meta[b-epn8g2hanz] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.seq-bp-saved[b-epn8g2hanz] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.seq-bp-zoomrow[b-epn8g2hanz] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.seq-bp-zoom[b-epn8g2hanz] {
    min-width: calc(var(--space-24) * 2);
    text-align: center;
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
}

.seq-bp-board[b-epn8g2hanz] {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr) 300px;
    gap: var(--space-16);
    height: calc(var(--row-h) * 17);
    min-height: 0;
}

.seq-bp-board[b-epn8g2hanz]  .ui-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.seq-bp-board[b-epn8g2hanz]  .ui-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.seq-bp-canvas[b-epn8g2hanz] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.seq-bp-config[b-epn8g2hanz] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Task 24 (FR-37 §2, FR-40): the validation banner's groups and a refused save's issues — one line per group; the action names are native buttons drawn as links (never bare # anchors,
   UI-LAYER §19). The links are built in C# (GroupContent), so they carry no scope attribute: reached through the page-authored wrappers with ::deep. */
.seq-bp-issues[b-epn8g2hanz],
.seq-bp-held-issues[b-epn8g2hanz] {
    margin: var(--space-4) 0 0;
    padding-left: var(--space-16);
}

.seq-bp-validation[b-epn8g2hanz]  .seq-bp-issue-link {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}

.seq-bp-validation[b-epn8g2hanz]  .seq-bp-issue-link:focus-visible {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

/* Task 25 (Q22): the edge menu's anchor — fixed at the edge click's window position (ClientX/ClientY, Amended (5)), mounted at the page root so no transformed ancestor (the canvas layer's
   scale) re-parents it. Zero-size: row 9's Menu hangs below it (its own top: 100%, left-aligned) on the menu layer. The left/top are the click's, set inline. */
.seq-bp-edge-menu[b-epn8g2hanz] {
    position: fixed;
    width: 0;
    height: 0;
    z-index: var(--z-menu);
}

/* Task 25: the page's own dialog bodies (save first, delete, discard) — the shell, footer and width are rows 17/58's. */
.seq-bp-dlg-text[b-epn8g2hanz] {
    margin: 0;
}
/* frontend/Components/Pages/crm/sequences/SequenceBlueprintTab.razor.rz.scp.css */
/* FCRM-001/REQ-004 FR-9/FR-11/FR-12/FR-13 — SequenceBlueprintTab. Tokens only; nothing here has a fixed width (AC-152/153: no horizontal page scroll —
   the canvas scrolls inside its own frame, the table wraps its text). */

.seq-bp-tab[b-nlixn2cu7z] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.seq-bp-intro[b-nlixn2cu7z] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.seq-bp-caption[b-nlixn2cu7z] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

/* The canvas keeps a definite height so its own viewport (both axes) scrolls inside this frame, never the page. */
.seq-bp-canvas-frame[b-nlixn2cu7z] {
    display: flex;
    flex-direction: column;
    height: calc(var(--row-h) * 18);
    min-width: 0;
}

.seq-bp-table-region[b-nlixn2cu7z],
.seq-bp-canvas-region[b-nlixn2cu7z],
.seq-bp-replies-region[b-nlixn2cu7z] {
    min-width: 0;
}

.seq-bp-cut[b-nlixn2cu7z] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Outputs so far" can name several outputs and a loop target — it wraps rather than clipping a figure. */
.seq-bp-wrap[b-nlixn2cu7z] {
    white-space: normal;
    overflow-wrap: anywhere;
}

.seq-bp-formula[b-nlixn2cu7z],
.seq-bp-empty[b-nlixn2cu7z] {
    margin: var(--space-8) 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/Pages/crm/sequences/SequenceCanvas.razor.rz.scp.css */
/* FCRM-001/REQ-001 FR-36/FR-52 (Task 20) — SequenceCanvas. Tokens only (a page-source scan pins it: DesignLayerLint does not scan Pages/); every length and
   colour is a token, the geometry (left/top/width/height/transform) is inline from SequenceCanvasGeometry. The node child (SequenceCanvasNodeView) and the
   library rows it composes carry their own scope, so their elements are reached with ::deep under .seq-layer, an element of this component's own markup.
   Colour mapping (R-C §2.4, spec §4.6): tone per executor as screen 03 draws it (workflow = accent, external tool = ok, you = neutral, control = warn,
   unknown = error); edges neutral, loops accent dashed; unwired = error; Start border ok; minimap nodes accent-soft / error-bg, viewport accent;
   the path (ReadOnly, Task 21): visited and taken = ok, current = the accent ring, a ghost connector dashed ok, a removed action a dashed ghost; a selected
   edge (SelectedEdge, Amended (5)/Task 25) = the same accent convention as the current node's ring, and a node's own selected outline.
   Thumbnail (Task 21): one button of the row's size (overflow hidden — never a scrollbar), hairline edges, current = the accent FILL (it wins over visited),
   visited/taken = ok, muted, removed dashed, unknown type the error tone. */

.seq-canvas[b-q6zh8s0l3p] {
    position: relative;
    height: 100%;
    min-height: calc(var(--row-h) * 15);
    min-width: 0;
    background: var(--surface);
}

.seq-viewport[b-q6zh8s0l3p] {
    position: absolute;
    inset: 0;
    overflow: auto;
    overscroll-behavior: contain;
    background:
        repeating-linear-gradient(0deg, var(--fill-1) 0 var(--border-w), transparent var(--border-w) var(--space-24)),
        repeating-linear-gradient(90deg, var(--fill-1) 0 var(--border-w), transparent var(--border-w) var(--space-24));
}

.seq-sizer[b-q6zh8s0l3p] {
    position: relative;
}

.seq-layer[b-q6zh8s0l3p] {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
}

/* ---- edges (this component's own SVG) ---- */

.seq-edges[b-q6zh8s0l3p] {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    pointer-events: none;
}

.seq-edge[b-q6zh8s0l3p] {
    fill: none;
    stroke: var(--neutral);
    stroke-width: calc(var(--border-w) * 1.5);
}

.seq-edge-loop[b-q6zh8s0l3p],
.seq-edge-self[b-q6zh8s0l3p] {
    stroke: var(--accent);
    stroke-dasharray: var(--space-4) var(--space-4);
}

.seq-edge-taken[b-q6zh8s0l3p] {
    stroke: var(--ok);
}

.seq-edge-muted[b-q6zh8s0l3p] {
    stroke: var(--line-hover);
}

/* A taken edge the current version no longer has (FR-52.3): "the path as taken" — dashed green, after the route and taken rules so it wins. */
.seq-edge-ghost[b-q6zh8s0l3p] {
    stroke: var(--ok);
    stroke-dasharray: var(--space-4) var(--space-2);
}

.seq-edge-dragging[b-q6zh8s0l3p] {
    opacity: .3;
}

/* Amended (5)/Task 25: the edge Task 25's context menu is open on (SelectedEdge) — the edge counterpart of a node's .seq-node-selected outline. After the
   route rules, so it wins ties on an accent-coloured loop/self edge too. */
.seq-edge-selected[b-q6zh8s0l3p] {
    stroke: var(--accent);
    stroke-width: calc(var(--border-w) * 3);
    stroke-dasharray: none;
}

.seq-arrow[b-q6zh8s0l3p] {
    fill: var(--neutral);
}

.seq-edge-hit[b-q6zh8s0l3p] {
    fill: none;
    stroke: transparent;
    stroke-width: var(--space-12);
    pointer-events: stroke;
    cursor: pointer;
}

.seq-locked .seq-edge-hit[b-q6zh8s0l3p] {
    cursor: default;
}

.seq-wire-preview[b-q6zh8s0l3p] {
    fill: none;
    stroke: var(--accent);
    stroke-width: calc(var(--border-w) * 1.5);
    stroke-dasharray: var(--space-4) var(--space-2);
}

/* ---- nodes (SequenceCanvasNodeView) ---- */

.seq-layer[b-q6zh8s0l3p]  .seq-node {
    position: absolute;
    box-sizing: border-box;
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-left: var(--inset-edge-w) solid var(--neutral);
    border-radius: var(--radius);
    color: var(--text);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.seq-locked[b-q6zh8s0l3p]  .seq-node {
    cursor: pointer;
}

.seq-layer[b-q6zh8s0l3p]  .seq-node:focus-visible {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.seq-layer[b-q6zh8s0l3p]  .seq-node-selected {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--border-w);
}

.seq-layer[b-q6zh8s0l3p]  .seq-node-unwired {
    box-shadow: 0 0 0 var(--border-w) var(--error-bg);
}

.seq-layer[b-q6zh8s0l3p]  .seq-node.seq-dragging {
    opacity: .85;
    box-shadow: var(--shadow-overlay);
    cursor: grabbing;
}

.seq-layer[b-q6zh8s0l3p]  .seq-tone-workflow { border-left-color: var(--accent); }
.seq-layer[b-q6zh8s0l3p]  .seq-tone-externaltool { border-left-color: var(--ok); }
.seq-layer[b-q6zh8s0l3p]  .seq-tone-you { border-left-color: var(--neutral); }
.seq-layer[b-q6zh8s0l3p]  .seq-tone-control { border-left-color: var(--warn); }

.seq-layer[b-q6zh8s0l3p]  .seq-tone-unknown {
    border-color: var(--error);
    background: var(--error-bg);
}

.seq-layer[b-q6zh8s0l3p]  .seq-node-body {
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.seq-layer[b-q6zh8s0l3p]  .seq-node-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-semibold);
}

.seq-layer[b-q6zh8s0l3p]  .seq-node-line {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
    font-style: italic;
}

.seq-layer[b-q6zh8s0l3p]  .seq-node-line-error {
    color: var(--error);
    font-style: normal;
    font-weight: var(--fw-medium);
}

.seq-layer[b-q6zh8s0l3p]  .seq-node-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    max-width: 100%;
}

/* Start / End pills (100 × 44). */
.seq-layer[b-q6zh8s0l3p]  .seq-node-pill {
    border-radius: var(--radius-pill);
    border-left-width: var(--border-w);
}

.seq-layer[b-q6zh8s0l3p]  .seq-node-pill .seq-node-body {
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-8);
}

.seq-layer[b-q6zh8s0l3p]  .seq-node-start {
    background: var(--ok-bg);
    color: var(--ok);
    border-color: var(--ok);
}

.seq-layer[b-q6zh8s0l3p]  .seq-node-end {
    background: var(--neutral-bg);
    color: var(--neutral);
    border-color: var(--line);
}

/* The path (ReadOnly + HighlightedPath — Task 21 draws these classes; the mapping is pinned now). */
.seq-layer[b-q6zh8s0l3p]  .seq-node-visited {
    border-color: var(--ok);
    background: var(--ok-bg);
}

.seq-layer[b-q6zh8s0l3p]  .seq-node-current {
    box-shadow: 0 0 0 var(--focus-w) var(--accent);
}

.seq-layer[b-q6zh8s0l3p]  .seq-node-muted {
    opacity: .55;
}

/* AC-111: a removed action a path visited — a dashed ghost at its last saved position. */
.seq-layer[b-q6zh8s0l3p]  .seq-node-removed {
    border-style: dashed;
    border-left-width: var(--border-w);
    background: transparent;
}

/* The executor tag and the figure lines (ReadOnly, FR-52.2). */
.seq-layer[b-q6zh8s0l3p]  .seq-node-tag {
    display: flex;
    max-width: 100%;
}

.seq-layer[b-q6zh8s0l3p]  .seq-node-figure {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* With a path, the whole node is the config line's tooltip region: it fills the node (the body inside it keeps overflow hidden; the bubble is outside that). */
.seq-layer[b-q6zh8s0l3p]  .seq-node > .ui-tooltip-region {
    width: 100%;
    height: 100%;
}

.seq-layer[b-q6zh8s0l3p]  .seq-node > .ui-tooltip-region > .seq-node-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* The ×{n} badge on an edge taken more than once (AC-104), centred on the edge's label point. */
.seq-edge-count[b-q6zh8s0l3p] {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--ok-bg);
    border: var(--border-w) solid var(--ok);
    color: var(--ok);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    pointer-events: none;
}

/* Rename. */
.seq-layer[b-q6zh8s0l3p]  .seq-rename {
    box-sizing: border-box;
    width: 100%;
    font: inherit;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    padding: 0 var(--space-4);
    border: var(--border-w) solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}

.seq-layer[b-q6zh8s0l3p]  .seq-rename[aria-invalid="true"] {
    border-color: var(--error);
}

.seq-layer[b-q6zh8s0l3p]  .seq-rename-error {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--error);
}

/* Output dots and labels: centred on the geometry's port, whatever the dot token's size. */
.seq-layer[b-q6zh8s0l3p]  .seq-dot {
    position: absolute;
    width: var(--dot);
    height: var(--dot);
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    background: var(--ok);
    border: var(--border-w) solid var(--surface);
    box-shadow: 0 0 0 var(--border-w) var(--ok);
    transform: translate(-50%, -50%);
    cursor: crosshair;
    touch-action: none;
}

.seq-layer[b-q6zh8s0l3p]  .seq-dot::before {
    content: "";
    position: absolute;
    inset: calc(var(--space-4) * -1);
}

.seq-layer[b-q6zh8s0l3p]  .seq-dot-unwired {
    background: var(--error);
    box-shadow: 0 0 0 var(--border-w) var(--error);
}

.seq-locked[b-q6zh8s0l3p]  .seq-dot {
    cursor: default;
}

.seq-layer[b-q6zh8s0l3p]  .seq-out-label {
    position: absolute;
    display: block;
    white-space: nowrap;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    padding: 0 var(--space-4);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-secondary);
    pointer-events: none;
}

.seq-layer[b-q6zh8s0l3p]  .seq-out-label-unwired {
    color: var(--error);
}

/* FR-36: output labels hide below 60 % and show on hover (and on keyboard focus of their node). After the base rule: same specificity, later wins. */
.seq-labels-hidden[b-q6zh8s0l3p]  .seq-out-label {
    display: none;
}

.seq-labels-hidden[b-q6zh8s0l3p]  .seq-node:hover .seq-out-label,
.seq-labels-hidden[b-q6zh8s0l3p]  .seq-node:focus-visible .seq-out-label {
    display: block;
}

/* ---- ReadOnly (Task 21): nothing to drag — the default arrow, and touch pans the frame. After the base rules: same specificity, later wins. ---- */

.seq-readonly[b-q6zh8s0l3p]  .seq-node {
    cursor: default;
    touch-action: auto;
}

.seq-readonly[b-q6zh8s0l3p]  .seq-dot {
    cursor: default;
    touch-action: auto;
}

/* The frame is the one tab stop (FR-53). */
.seq-readonly .seq-viewport:focus-visible[b-q6zh8s0l3p] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: calc(var(--focus-w) * -1);
}

/* ---- overlays in the unscrolled, untransformed frame ---- */

.seq-empty[b-q6zh8s0l3p] {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-secondary);
}

.seq-minimap[b-q6zh8s0l3p] {
    position: absolute;
    right: var(--space-8);
    bottom: var(--space-8);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-overlay);
    overflow: hidden;
    cursor: pointer;
    line-height: 0;
}

.seq-mm-node[b-q6zh8s0l3p] {
    fill: var(--accent-soft);
}

.seq-mm-node-unwired[b-q6zh8s0l3p] {
    fill: var(--error-bg);
}

.seq-mm-view[b-q6zh8s0l3p] {
    fill: var(--accent-soft);
    fill-opacity: .5;
    stroke: var(--accent);
    stroke-width: var(--border-w);
}

.seq-drag-token[b-q6zh8s0l3p] {
    position: fixed;
    z-index: var(--z-menu);
    pointer-events: none;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius);
    background: var(--surface);
    border: var(--border-w) solid var(--accent);
    box-shadow: var(--shadow-overlay);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text);
    white-space: nowrap;
}

.seq-drag-token[hidden][b-q6zh8s0l3p] {
    display: none;
}

/* ---- Thumbnail (Task 21; SequenceCanvasThumbnail's markup, reached from this component's .seq-thumb-frame) ---- */

.seq-thumb-frame[b-q6zh8s0l3p] {
    display: inline-flex;
    line-height: 0;
}

.seq-thumb-frame[b-q6zh8s0l3p]  .seq-thumb {
    display: block;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    overflow: hidden;
    cursor: pointer;
    line-height: 0;
}

.seq-thumb-frame[b-q6zh8s0l3p]  .seq-thumb:focus-visible {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.seq-thumb-frame[b-q6zh8s0l3p]  .seq-thumb-error {
    background: var(--error-bg);
    border: var(--border-w) solid var(--error);
}

.seq-thumb-frame[b-q6zh8s0l3p]  .seq-thumb-edge {
    fill: none;
    stroke: var(--neutral);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.seq-thumb-frame[b-q6zh8s0l3p]  .seq-thumb-edge-taken {
    stroke: var(--ok);
}

.seq-thumb-frame[b-q6zh8s0l3p]  .seq-thumb-edge-ghost {
    stroke-dasharray: 2 2;
}

.seq-thumb-frame[b-q6zh8s0l3p]  .seq-thumb-edge-muted {
    stroke: var(--line-hover);
}

.seq-thumb-frame[b-q6zh8s0l3p]  .seq-thumb-node {
    fill: var(--neutral-bg);
    stroke: var(--neutral);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.seq-thumb-frame[b-q6zh8s0l3p]  .seq-thumb-pill {
    fill: var(--neutral);
}

.seq-thumb-frame[b-q6zh8s0l3p]  .seq-thumb-unknown {
    fill: var(--error-bg);
    stroke: var(--error);
}

.seq-thumb-frame[b-q6zh8s0l3p]  .seq-thumb-muted {
    opacity: .45;
}

.seq-thumb-frame[b-q6zh8s0l3p]  .seq-thumb-removed {
    fill: none;
    stroke-dasharray: 2 2;
}

/* One mark per node: the markup gives a node either current or visited, never both (current wins). */
.seq-thumb-frame[b-q6zh8s0l3p]  .seq-thumb-visited {
    fill: var(--ok);
    stroke: var(--ok);
}

.seq-thumb-frame[b-q6zh8s0l3p]  .seq-thumb-current {
    fill: var(--accent);
    stroke: var(--accent);
}
/* frontend/Components/Pages/crm/sequences/SequenceDueFigureView.razor.rz.scp.css */
/* FCRM-001/REQ-001 FR-29 — SequenceDueFigureView. Tokens only (a page-source scan pins it: DesignLayerLint does not scan Pages/). */
.seq-due[b-x5t1merwvw] {
    font-variant-numeric: tabular-nums;
}

.seq-due-loading[b-x5t1merwvw] {
    color: var(--text-secondary);
}
/* frontend/Components/Pages/crm/sequences/SequenceEnrolledPage.razor.rz.scp.css */
/* FCRM-001/REQ-002 FR-22–FR-26 — the Enrolled page (screen 06). Tokens only. The layout recipe is SequencesList.razor.css's (itself CrmRepresentatives'):
   a column with the page gap. The band's own bottom margin is left alone: in SequencePageHeader it separates the band from the tab strip INSIDE the
   header (the list page's band → tabs distance), not the band from this column's next item. */

.seq-enrolled-page[b-9pe4l4pzna] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

/* One text run (not flex), so the space before the parenthesis is real text — read aloud and copied, not a gap. */
.seq-enrolled-meta[b-9pe4l4pzna] {
    display: inline;
}

.seq-enrolled-batch[b-9pe4l4pzna] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.seq-enrolled-lines[b-9pe4l4pzna] {
    margin: 0;
    padding-left: var(--space-16);
}

/* Task 4: the body column (banners, toolbar, table / state) with the page gap. */
.seq-enrolled-body[b-9pe4l4pzna] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

/* A filter menu hangs from its trigger (Menu.md: positioning is the host's). */
.seq-enrolled-filter[b-9pe4l4pzna] {
    position: relative;
    display: inline-flex;
}

.seq-enrolled-rounds[b-9pe4l4pzna] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

.seq-enrolled-rounds-label[b-9pe4l4pzna] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    white-space: nowrap;
}

.seq-enrolled-grid[b-9pe4l4pzna] {
    display: flex;
    flex-direction: column;
}

/* Two-line cells (screen 06's .who / .statesub): the name or pill, then a secondary sub-line, inside the row's own 40px. */
.seq-enrolled-person[b-9pe4l4pzna] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}

.seq-enrolled-two[b-9pe4l4pzna] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.seq-enrolled-name[b-9pe4l4pzna] {
    display: block;
    line-height: var(--lh-small);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.seq-enrolled-sub[b-9pe4l4pzna] {
    display: block;
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.seq-enrolled-action[b-9pe4l4pzna] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.seq-enrolled-cut[b-9pe4l4pzna] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.seq-enrolled-few[b-9pe4l4pzna] {
    margin: 0;
    padding: var(--space-8) 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    text-align: right;
}

.seq-enrolled-selected[b-9pe4l4pzna] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/crm/sequences/SequenceEnrolledPreviewTab.razor.rz.scp.css */
/* FCRM-001/REQ-004 FR-19 — SequenceEnrolledPreviewTab. Tokens only. */

.seq-enp-person[b-u7iui99dor] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    flex: 1 1 auto;
    min-width: 0;
}

.seq-enp-action[b-u7iui99dor] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seq-enp-entered[b-u7iui99dor] {
    flex: none;
}

.seq-enp-seeall[b-u7iui99dor] {
    display: inline-block;
    margin-top: var(--space-8);
    color: var(--text-secondary);
    text-decoration: underline;
}
/* frontend/Components/Pages/crm/sequences/SequenceMarkEndDialog.razor.rz.scp.css */
/* FCRM-001/REQ-002 FR-33 — the Mark completed / rejected dialog's body. Tokens only. The shell, footer and width are row 17's. */
.seq-dlg[b-sz6vf8dapw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.seq-dlg-text[b-sz6vf8dapw] {
    margin: 0;
}
/* frontend/Components/Pages/crm/sequences/SequenceMoveDialog.razor.rz.scp.css */
/* FCRM-001/REQ-002 FR-27 — the Move dialog's Target sequence trigger: the row 9 popup anchors to this wrapper (the layer's Menu is position: absolute under it — Menu.md's host duty). */
.seq-move-target[b-7j75byjwaa] {
    position: relative;
    display: inline-flex;
}
/* frontend/Components/Pages/crm/sequences/SequencePage.razor.rz.scp.css */
/* FCRM-001/REQ-004 FR-1…FR-6 — SequencePage. Tokens only. */

.seq-page[b-x40nuwzs8v] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.seq-page-more[b-x40nuwzs8v] {
    position: relative;
    display: inline-flex;
}

.seq-page-meta[b-x40nuwzs8v] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--page-access-gap);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.seq-page-desc[b-x40nuwzs8v] {
    max-width: var(--trunc-w);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seq-page-warn[b-x40nuwzs8v] {
    color: var(--warn);
}

.seq-page-ghostlink[b-x40nuwzs8v] {
    color: var(--text-secondary);
    text-decoration: underline;
}

/* FR-4: the twelve tiles — never scrolls horizontally; wraps into as many rows as the viewport needs. */
.seq-tiles[b-x40nuwzs8v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-8);
}

.seq-tile-warning .ui-tile-num[b-x40nuwzs8v] {
    color: var(--warn);
}

.seq-tile-error .ui-tile-num[b-x40nuwzs8v] {
    color: var(--error);
}

.seq-tile-success .ui-tile-num[b-x40nuwzs8v] {
    color: var(--ok);
}
/* frontend/Components/Pages/crm/sequences/SequencePageHeader.razor.rz.scp.css */
/* FCRM-001/REQ-002 FR-23 — SequencePageHeader. Tokens only. The meta line is the sheet's .page-meta (mockup 06, "FAMILY 7"): flex, centred, wrapping,
   --page-access-gap between items, secondary 12/16 text; the status pill leads it (see the component's named STOP on the title line). */

.seq-ph[b-qhfhjmkhih] {
    display: flex;
    flex-direction: column;
}

.seq-ph-meta[b-qhfhjmkhih] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--page-access-gap);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/Pages/crm/sequences/SequencePersonMenu.razor.rz.scp.css */
/* FCRM-001/REQ-002 FR-33 — the ⋯ trigger's wrapper: the row 9 popup anchors to it (the layer's Menu is position: absolute under it — Menu.md's host duty). */
.seq-person-menu[b-lnvyykb2ox] {
    position: relative;
    display: inline-flex;
}
/* frontend/Components/Pages/crm/sequences/SequencePersonPage.razor.rz.scp.css */
/* FCRM-001/REQ-004 FR-21…FR-25 — the person-in-sequence page frame (screen 07). Tokens only. */

.seq-pp[b-m6irdr6szw] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.seq-pp-top[b-m6irdr6szw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    flex-wrap: wrap;
}

.seq-pp-nav[b-m6irdr6szw] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.seq-pp-navigator[b-m6irdr6szw] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

.seq-pp-pos[b-m6irdr6szw] {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 5ch;
    text-align: center;
}

.seq-pp-facts[b-m6irdr6szw] {
    display: flex;
    gap: var(--space-16);
    align-items: flex-start;
}

.seq-pp-facts-main[b-m6irdr6szw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.seq-pp-role[b-m6irdr6szw] {
    margin: 0;
}

.seq-pp-role-missing[b-m6irdr6szw] {
    color: var(--text-secondary);
}

.seq-pp-warn[b-m6irdr6szw] {
    color: var(--warn);
}

.seq-pp-current[b-m6irdr6szw] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.seq-pp-trail[b-m6irdr6szw] {
    color: var(--text-secondary);
}

.seq-pp-ghostlink[b-m6irdr6szw] {
    align-self: flex-start;
    color: var(--accent);
    text-decoration: none;
}

.seq-pp-ghostlink:hover[b-m6irdr6szw] {
    text-decoration: underline;
}

.seq-pp-code[b-m6irdr6szw] {
    margin-left: var(--space-8);
    font-family: var(--font-mono);
}

/* FR-25: the path region. */
.seq-pp-path[b-m6irdr6szw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.seq-pp-path-title[b-m6irdr6szw] {
    margin: 0;
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
}

.seq-pp-path-frame[b-m6irdr6szw] {
    height: calc(var(--row-h) * 12);
    min-height: 0;
}

.seq-pp-outputs[b-m6irdr6szw] {
    margin: 0;
    color: var(--text-secondary);
}

/* FR-26…FR-28: the log region. */
.seq-pp-log[b-m6irdr6szw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.seq-pp-log-title[b-m6irdr6szw] {
    margin: 0;
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
}

.seq-pp-log-controls[b-m6irdr6szw] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-16);
    flex-wrap: wrap;
}

.seq-pp-log-day[b-m6irdr6szw] {
    margin: var(--space-16) 0 var(--space-8);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
}

.seq-pp-log-empty[b-m6irdr6szw] {
    margin: 0;
    color: var(--text-secondary);
}

.seq-pp-log-time[b-m6irdr6szw] {
    font-variant-numeric: tabular-nums;
}

.seq-pp-log-raw[b-m6irdr6szw],
.seq-pp-log-code[b-m6irdr6szw] {
    margin-left: var(--space-8);
    font-family: var(--font-mono);
}

/* FR-29: the Actions-now card. */
.seq-pp-card[b-m6irdr6szw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.seq-pp-card-row[b-m6irdr6szw] {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.seq-pp-card-ended[b-m6irdr6szw],
.seq-pp-card-note[b-m6irdr6szw] {
    margin: 0;
    color: var(--text-secondary);
}

.seq-pp-card-quote[b-m6irdr6szw] {
    margin: 0;
    padding-left: var(--space-12);
    border-left: var(--space-2) solid var(--line);
    font-style: italic;
}

/* FR-30: the Messages panel. */
.seq-pp-msgs[b-m6irdr6szw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.seq-pp-msgs-title[b-m6irdr6szw] {
    margin: 0;
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
}

.seq-pp-msgs-group-title[b-m6irdr6szw] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin: var(--space-8) 0 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
}

.seq-pp-msgs-system[b-m6irdr6szw] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.seq-pp-msgs-day[b-m6irdr6szw] {
    margin: var(--space-8) 0 0;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
}

.seq-pp-msgs-day-list[b-m6irdr6szw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.seq-pp-msgs-empty[b-m6irdr6szw] {
    margin: 0;
    color: var(--text-secondary);
}

.seq-pp-msg[b-m6irdr6szw] {
    display: flex;
    flex-direction: column;
    max-width: 70%;
    padding: var(--space-8) var(--space-12);
    border-radius: var(--radius);
    background: var(--fill-1);
}

.seq-pp-msg-in[b-m6irdr6szw] {
    align-self: flex-start;
}

.seq-pp-msg-out[b-m6irdr6szw] {
    align-self: flex-end;
}

.seq-pp-msg-meta[b-m6irdr6szw] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.seq-pp-msg-synced[b-m6irdr6szw] {
    margin-left: var(--space-8);
}

.seq-pp-msgs-touch[b-m6irdr6szw] {
    margin: var(--space-8) 0 0;
}

.seq-pp-msgs-touch figcaption[b-m6irdr6szw] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/crm/sequences/SequenceRemoveDialog.razor.rz.scp.css */
/* FCRM-001/REQ-002 FR-27 — the Remove dialog's body. Tokens only. The shell, footer and width are row 17's. */
.seq-dlg[b-t4o1khuk6x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.seq-dlg-text[b-t4o1khuk6x] {
    margin: 0;
}
/* frontend/Components/Pages/crm/sequences/SequenceSettingsTab.razor.rz.scp.css */
/* FCRM-001/REQ-004 FR-18 — SequenceSettingsTab. Tokens only. */

.seq-settings[b-251snnwekq] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.seq-settings-error[b-251snnwekq] {
    color: var(--error);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.seq-settings-current-target[b-251snnwekq] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.seq-settings-danger-row[b-251snnwekq] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}
/* frontend/Components/Pages/crm/sequences/SequencesList.razor.rz.scp.css */
/* FCRM-001/REQ-001 FR-26…FR-31 (Task 16) — the sequences list page. Tokens only (a page-source scan pins it: DesignLayerLint does not scan Pages/); every Grid measure (40 px rows, header,
   hairlines, hover) is the Grid's own, never restated here. The layout recipe is CrmRepresentatives.razor.css's. */

.seq-page[b-jvyfguo1de] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

/* The band and the toolbar carry their own bottom margins, which would stack on the page's flex gap (the Representatives measurement). */
.seq-page[b-jvyfguo1de]  .ui-pageheader-band {
    margin-bottom: calc(var(--content-pad) - var(--page-gap));
}

.seq-page[b-jvyfguo1de]  .ui-toolbar {
    margin-bottom: 0;
}

.seq-meta[b-jvyfguo1de] {
    color: var(--text-secondary);
    margin-right: var(--space-8);
}

/* FR-26.4: the Status and Created-by tag groups. */
.seq-tags[b-jvyfguo1de] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.seq-tags-label[b-jvyfguo1de] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    margin-right: var(--space-4);
}

.seq-more[b-jvyfguo1de] {
    position: relative;
    display: inline-flex;
}

.seq-list-region[b-jvyfguo1de] {
    display: flex;
    flex-direction: column;
}

/* Q2: the Sequence cell is ONE line — the bold name, then one secondary segment, cut with an ellipsis (the tooltip carries everything). */
.seq-cell-seq[b-jvyfguo1de] {
    display: flex;
    min-width: 0;
    width: 100%;
}

.seq-cell-seq[b-jvyfguo1de]  .ui-tooltip-region {
    min-width: 0;
    flex: 0 1 auto;
}

/* One line: the name (the in-cell link, which truncates itself) and the secondary line side by side. The link and the secondary line each sit in a block tooltip region, so the line is a flex row. */
.seq-line[b-jvyfguo1de] {
    display: flex;
    align-items: baseline;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.seq-name[b-jvyfguo1de] {
    min-width: 0;
    flex: 0 1 auto;
    font-weight: var(--fw-semibold);
}

/* The secondary line's own tooltip region gives way first and ends in an ellipsis, as the unsplit line did, but keeps a third of the line: a long name truncates instead of pushing the secondary line out. */
.seq-line[b-jvyfguo1de] >  .ui-tooltip-region {
    flex: 0 100 auto;
    min-width: 30%;
}

.seq-secondary[b-jvyfguo1de] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary);
    margin-left: var(--space-8);
}

.seq-num[b-jvyfguo1de] {
    font-variant-numeric: tabular-nums;
}

.seq-muted[b-jvyfguo1de] {
    color: var(--text-secondary);
}

.seq-cut[b-jvyfguo1de] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* FR-27 (Depth): archived rows are dimmed. */
.seq-page[b-jvyfguo1de]  tr.seq-row-archived td {
    color: var(--text-secondary);
}

/* The row ⋯: revealed on row hover / focus, persistent on touch (the Representatives recipe). */
.seq-page[b-jvyfguo1de]  .seq-rowmenu {
    opacity: 0;
}

.seq-page[b-jvyfguo1de]  tr.fluent-data-grid-row:hover .seq-rowmenu,
.seq-page[b-jvyfguo1de]  tr.fluent-data-grid-row:focus-within .seq-rowmenu,
.seq-page[b-jvyfguo1de]  .seq-rowmenu:focus-within {
    opacity: 1;
}

@media (hover: none) {
    .seq-page[b-jvyfguo1de]  .seq-rowmenu {
        opacity: 1;
    }
}

/* The cells that hold a popup — the Sequence tooltip (1), the Due today tooltip (8) and the row menu (10) — must let it out: Fluent's cells are overflow: hidden, which cuts a popup to a sliver
   (the Representatives live finding). The Sequence cell's own text is already cut by .seq-line. */
.seq-page[b-jvyfguo1de]  td[col-index="1"],
.seq-page[b-jvyfguo1de]  td[col-index="8"],
.seq-page[b-jvyfguo1de]  td[col-index="10"] {
    overflow: visible;
    text-overflow: clip;
}
/* frontend/Components/Pages/crm/sequences/SequenceSwitchOffDialog.razor.rz.scp.css */
/* FCRM-001/REQ-001 FR-33 — the switch-off confirmation's body. Tokens only (a page-source scan pins it: DesignLayerLint does not scan Pages/). The dialog's shell, footer and width are row 17's. */
.seq-dlg[b-7jm9qy76li] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.seq-dlg-text[b-7jm9qy76li] {
    margin: 0;
}
/* frontend/Components/Pages/crm/sequences/SequenceSwitchOnConfirmDialog.razor.rz.scp.css */
/* FCRM-001/REQ-001 FR-40 — the canvas page's switch-on confirmation's body. Tokens only (a page-source scan pins it: DesignLayerLint does not scan Pages/). The dialog's shell, footer and width are row 58's (composing row 17). */
.seq-dlg[b-0kllvwvafo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.seq-dlg-text[b-0kllvwvafo] {
    margin: 0;
}
/* frontend/Components/Pages/crm/sequences/SequenceSwitchOnRefusedDialog.razor.rz.scp.css */
/* FCRM-001/REQ-001 FR-34 — the refused switch-on's body. Tokens only (a page-source scan pins it: DesignLayerLint does not scan Pages/). The dialog's shell, footer and width are row 17's. */
.seq-dlg[b-mrzuwkgpey] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.seq-dlg-text[b-mrzuwkgpey] {
    margin: 0;
}

.seq-dlg-lead[b-mrzuwkgpey] {
    font-weight: var(--fw-semibold);
}

/* The issues: small text, wrapping inside the 440 px dialog, never cut — every sentence is read whole. */
.seq-dlg-list[b-mrzuwkgpey] {
    margin: 0;
    padding-left: var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    overflow-wrap: anywhere;
}
/* frontend/Components/Pages/crm/settings/CrmEmailAccounts.razor.rz.scp.css */
/* The Email accounts list page. Tokens only; every measure the layer ruled (row height, header, hairlines, hover, the selected-row edge) is the Grid's own, never restated here. */

.ea-page[b-gf3x6dwt9l] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

/* Vertical rhythm = the layer's: the page's flex gap is the between-blocks step, so the two components that also carry their own bottom margin are trimmed to what the gap does not already give. */
.ea-page[b-gf3x6dwt9l]  .ui-pageheader-band {
    margin-bottom: calc(var(--content-pad) - var(--page-gap));
}

.ea-page[b-gf3x6dwt9l]  .ui-toolbar {
    margin-bottom: 0;
}

.ea-list-region[b-gf3x6dwt9l] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
    min-width: 0;
}

/* The Account cell: the opener, with the display name under it. */
.ea-account[b-gf3x6dwt9l] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}

.ea-sub[b-gf3x6dwt9l] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* The Addresses cell: the main address, then up to three alias tags, then "+N more". */
.ea-addr-tags[b-gf3x6dwt9l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.ea-main[b-gf3x6dwt9l] {
    overflow-wrap: anywhere;
}

.ea-tag[b-gf3x6dwt9l] {
    display: inline-flex;
    min-width: 0;
}

/* The Used by cell: up to three names, then "+N more". */
.ea-used-by[b-gf3x6dwt9l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.ea-used-name[b-gf3x6dwt9l] {
    overflow-wrap: anywhere;
}

/* A code an account's row carries (aliases unreadable, an address on two accounts, an alias check that failed): its sentence is in the tooltip and in the drawer. */
.ea-alias-sending[b-gf3x6dwt9l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.ea-code[b-gf3x6dwt9l] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--error);
    overflow-wrap: anywhere;
}
/* frontend/Components/Pages/crm/settings/CrmRepresentatives.razor.rz.scp.css */
/* Item 33 — the representatives list page. Tokens only; every measure the sheet ruled (row 40 / header 36, hairlines, hover, the
   selected-row edge) is the Grid's own, never restated here. */

.rep-page[b-zlaeg1bwg7] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

/* Vertical rhythm = the sheet's (measured on mockup 09): head band → verdict 32, verdict → toolbar 16, toolbar → table 16, table → pager 16. The page's flex gap (--page-gap, 16) is the between-blocks
   step; the two components that ALSO carry their own bottom margin (the band's --content-pad, the toolbar's 16) would stack on it (48 and 32 measured live), so the page trims them to what the gap
   does not already give. */
.rep-page[b-zlaeg1bwg7]  .ui-pageheader-band {
    margin-bottom: calc(var(--content-pad) - var(--page-gap));
}

.rep-page[b-zlaeg1bwg7]  .ui-toolbar {
    margin-bottom: 0;
}

/* Item 63 (FPL-001/REQ-005 Amended (7), defect c1): PageHeader's own actions-wrap rule only fires
   below 400px (item 58's own phone-width fix) -- at 600px this page's own two header actions
   ("Activity-cap defaults" + "New representative", ~356px combined, `flex:none` so they never
   shrink) still share the header row with the title block, squeezing the composed AsOfLine's own
   text (needs ~161px unwrapped: "as of HH:mm · <age>" plus its own refresh icon) into less room
   than that once a real dataset's own vertical scrollbar (~10px, .live-check/rig's own README
   figure) is subtracted too -- live-measured: wraps across three lines at 600px with 15 seeded
   rows (screenshot in .live-check/item63, git-excluded). A page-scoped override, not a change to
   PageHeader's own shared 400px breakpoint (DEC-011: no sheet page draws a 600px header at all, so
   this is authored for THIS page's own measured need, never a sheet requirement, and a shared-
   component change risks a consumer this page's own reviewer never looked at).
   Threshold: 356 (actions) + 16 (gap) + 161 (as-of's own unwrapped width) + 64 (the page's own left
   + right content-pad) + 10 (a real dataset's vertical scrollbar) ~= 607px -- 640px gives real
   headroom; verified live at 600/700/800px (CrmRepresentatives.md's own deviations table). */
@media (max-width: 640px) {
    .rep-page[b-zlaeg1bwg7]  .ui-pageheader-main {
        flex-wrap: wrap;
    }

    .rep-page[b-zlaeg1bwg7]  .ui-pageheader-actions {
        flex-basis: 100%;
        margin-left: 0;
    }
}

/* The name cell: avatar + the name, CUT ONLY WHEN THE CELL IS FULL (the text takes the room the cell has; the full text is in the tooltip, which itself shows only when the text is cut). Built before
   with a fixed --trunc-w (160px) inside a ~320px cell: a name was cut with ~100px to spare (item 33's second review). */
.rep-name[b-zlaeg1bwg7] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
    width: 100%;
}

.rep-name[b-zlaeg1bwg7]  .ui-tooltip-region {
    min-width: 0;
    flex: 0 1 auto;
}

/* The name is row B1's in-cell Open action, which is the one box that ellipsises and carries its own truncation tooltip; this wrapper only lets it shrink inside the flex cell. */
.rep-name-open[b-zlaeg1bwg7] {
    display: block;
    min-width: 0;
    flex: 0 1 auto;
}

/* An inactive representative's label is struck through (the deactivated treatment), at rest and on hover (where the link look's underline joins it). The action is a child component's element, so it is reached with ::deep. */
.rep-name-open[data-state="inactive"][b-zlaeg1bwg7]  .ui-link-incell {
    text-decoration-line: line-through;
}

.rep-name-open[data-state="inactive"][b-zlaeg1bwg7]  .ui-link-incell:hover {
    text-decoration-line: line-through underline;
}

.rep-muted[b-zlaeg1bwg7] {
    color: var(--text-secondary);
}

.rep-showmenu[b-zlaeg1bwg7] {
    position: relative;
    display: inline-flex;
}

/* Revealed on row hover / focus, persistent on touch (P5). */
.rep-page[b-zlaeg1bwg7]  .rep-rowmenu {
    opacity: 0;
}

.rep-page[b-zlaeg1bwg7]  tr.fluent-data-grid-row:hover .rep-rowmenu,
.rep-page[b-zlaeg1bwg7]  tr.ui-grid-row-selected .rep-rowmenu,
.rep-page[b-zlaeg1bwg7]  tr.fluent-data-grid-row:focus-within .rep-rowmenu,
.rep-page[b-zlaeg1bwg7]  .rep-rowmenu:focus-within {
    opacity: 1;
}

@media (hover: none) {
    .rep-page[b-zlaeg1bwg7]  .rep-rowmenu {
        opacity: 1;
    }
}

.rep-list-region[b-zlaeg1bwg7] {
    display: flex;
    flex-direction: column;
}

/* The row a create just added: briefly tinted (P5: "a new row appears first and is briefly tinted") — the tint starts at --accent-soft and fades to nothing, so
   "briefly" needs no timer and no state to clear. */
.rep-page[b-zlaeg1bwg7]  tr.rep-row-new td {
    animation: rep-new-fade-b-zlaeg1bwg7 4s ease-out forwards;
}

@keyframes rep-new-fade-b-zlaeg1bwg7 {
    from { background: var(--accent-soft); }
    to { background: transparent; }
}

/* The three cells that hold a popup — the name's truncation tooltip, the identities column's "+N more" popover and the row menu — must let it out: Fluent's cells are
   `overflow: hidden` (so long text ellipsizes), which cut the ⋯ popup to a sliver (measured live) — and the name's tooltip to a 6px dark bar above the row, the "black something" the owner saw on hover
   (item 33's live check, screenshot 02-…-BEFORE). The long text in THIS table is already truncated by the name's own action, so nothing else relies on the cell clipping. */
.rep-page[b-zlaeg1bwg7]  td[col-index="1"],
.rep-page[b-zlaeg1bwg7]  td[col-index="3"],
.rep-page[b-zlaeg1bwg7]  td[col-index="5"] {
    overflow: visible;
    text-overflow: clip;
}

/* FPL-001/REQ-045 (#3675) FR-2: the New button's HELD PLACE while the permission is unknown -- empty, at the button's own measured box (tools/legacy-sweep/new-button-first-paint.mjs: 182 x 32 px at 1280 x 900), so
   when the button appears nothing in the header moves. Draws nothing: no fill, no border, no text. */
.rep-new-place[b-zlaeg1bwg7] {
    display: inline-block;
    flex: none;
    width: 182px;
    height: 32px;
}
/* frontend/Components/Pages/crm/settings/emailaccounts/EmailAccountDrawer.razor.rz.scp.css */
/* The Email account read drawer's page-local rules. Tokens only: no colour literal and no inline style. The drawer's own chrome (width, head, body padding) is QuickDrawer's. */
.ea-drawer[b-ll5s87e3r5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

.ea-drawer-section[b-ll5s87e3r5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.ea-drawer-label[b-ll5s87e3r5] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
}

.ea-drawer-text[b-ll5s87e3r5] {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    overflow-wrap: anywhere;
}

.ea-drawer-note[b-ll5s87e3r5] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.ea-drawer-error[b-ll5s87e3r5] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--error);
    overflow-wrap: anywhere;
}

.ea-drawer-addresses[b-ll5s87e3r5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ea-drawer-address[b-ll5s87e3r5] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-8);
    min-width: 0;
}

.ea-drawer-acts[b-ll5s87e3r5] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}
/* frontend/Components/Pages/crm/settings/emailaccounts/EmailAccountRowActs.razor.rz.scp.css */
/* The acts cell of an Email account's row. Tokens only: no colour literal and no inline style. */
.ea-rowacts[b-v41vtvfq7c] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-8);
    min-width: 0;
}
/* frontend/Components/Pages/crm/settings/representatives/ActivityCapDefaultsDrawer.razor.rz.scp.css */
.rep-defaults[b-4d609yce0z] {
    display: flex;
    flex-direction: column;
    gap: var(--field-gap-y);
}

.rep-cap-help[b-4d609yce0z] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.rep-foot[b-4d609yce0z] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    padding-top: var(--space-4);
}

/* One heading per channel above that channel's cap rows */
.rep-cap-set[b-4d609yce0z] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.rep-cap-group[b-4d609yce0z] {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading-sm);
}
/* frontend/Components/Pages/crm/settings/representatives/ChannelsToMapPanel.razor.rz.scp.css */
/* The Channels to map panel, tokens only. The surface is the layer's Card; this file lays out its rows. */
.map-panel[b-io9f93nyeh] {
    margin-bottom: var(--space-16);
}

.map-body[b-io9f93nyeh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.map-count[b-io9f93nyeh] {
    margin: 0;
    color: var(--text-secondary);
}

.map-hint[b-io9f93nyeh] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.map-row[b-io9f93nyeh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8) var(--space-16);
    padding: var(--space-8) 0;
    border-bottom: var(--border-w) solid var(--line);
}

.map-who[b-io9f93nyeh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1 1 240px;
    min-width: 0;
}

.map-old[b-io9f93nyeh],
.map-reason[b-io9f93nyeh] {
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.map-input[b-io9f93nyeh] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: 0 1 320px;
    min-width: 0;
}

.map-acts[b-io9f93nyeh] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.map-row[b-io9f93nyeh]  .rep-line {
    flex: 1 0 100%;
}

.map-dialog-line[b-io9f93nyeh] {
    margin: 0;
}
/* frontend/Components/Pages/crm/settings/representatives/RepCapsFieldset.razor.rz.scp.css */
.rep-caps[b-zbu66eq5fm] {
    display: flex;
    flex-direction: column;
    gap: var(--field-gap-y);
}

.rep-stack[b-zbu66eq5fm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.rep-muted[b-zbu66eq5fm] {
    color: var(--text-secondary);
}

.rep-cap-help[b-zbu66eq5fm],
.rep-cap-use[b-zbu66eq5fm] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

/* Reset + the rule under it, stacked and left-aligned (the mockup's .rep-foot) */
.rep-foot[b-zbu66eq5fm] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    padding-top: var(--space-4);
}

/* The meter fills its cell (row 31's own width is 220 px — measured live, it ran out of a 149 px cell and out of the drawer). Part of the visible STOP
   CAPS_METER_IN_FORM_ROW_NOT_RULED: the meter's place in a form row is exactly what the sheet does not draw. */
.rep-stack[b-zbu66eq5fm]  .ui-meter-row,
.rep-stack[b-zbu66eq5fm]  .ui-meter-wrap,
.rep-stack[b-zbu66eq5fm]  .ui-meter {
    width: 100%;
}

/* One heading per channel above that channel's cap rows */
.rep-cap-set[b-zbu66eq5fm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.rep-cap-group[b-zbu66eq5fm] {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading-sm);
}
/* frontend/Components/Pages/crm/settings/representatives/RepDayRow.razor.rz.scp.css */
.rep-day-name[b-1867hhmpwz] {
    display: block;
}

.rep-day-off[b-1867hhmpwz] {
    display: block;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/Pages/crm/settings/representatives/RepDeviceFieldset.razor.rz.scp.css */
.rep-device[b-lkuvmkmego] {
    display: flex;
    flex-direction: column;
    gap: var(--field-gap-y);
}

/* App version | Queue, side by side (the mockup's .f2) */
.rep-f2[b-lkuvmkmego] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
}

/* FPL-001/REQ-023 AC-3 (item 58, review finding): a fresh reviewer found the drawer scrolling
   sideways at 600px, but only while editing an existing representative -- Queue only renders once
   Activity has loaded, which a new representative never has yet. A CSS grid item's default
   min-width is `auto` (its own content's intrinsic width), not 0, so the long Queue value never
   actually shrank below its own text width (measured live: 280px wide, x 330-610, against a
   579-599px client width) -- the textbook grid-track overflow this component's own sibling in the
   same drawer, RepProfileFieldset.razor.css's `.f2`, and the layer's shared FormField.razor.css's
   `::deep .ui-ffld-grid-2` (identical 2-up shape) already both collapse at the exact same 900px;
   this rule was simply missed. Matching that established breakpoint, not a new one. */
@media (max-width: 900px) {
    .rep-f2[b-lkuvmkmego] {
        grid-template-columns: 1fr;
    }
}

.rep-jobs[b-lkuvmkmego] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.rep-job[b-lkuvmkmego] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
    font-size: var(--fs-body);
}

.rep-job-held[b-lkuvmkmego] {
    color: var(--warn);
}

.rep-muted[b-lkuvmkmego] {
    color: var(--text-secondary);
}

.rep-small[b-lkuvmkmego] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/Pages/crm/settings/representatives/RepEmailIdentityAdd.razor.rz.scp.css */
/* The add row's Email cell: the two selects one above the other in the cell the identifier box leaves. Tokens only. */
.rep-email-add[b-yyjypxlccd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.rep-email-link[b-yyjypxlccd] {
    color: var(--accent);
}
/* frontend/Components/Pages/crm/settings/representatives/RepEmailIdentityRow.razor.rz.scp.css */
/* An Email identity's account cell: the state pill and the account's main address on one line. Tokens only. */
.rep-email-account-line[b-xwu65ymg1z] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}

.rep-email-link[b-xwu65ymg1z] {
    color: var(--accent);
    text-decoration: none;
}
/* frontend/Components/Pages/crm/settings/representatives/RepIdentitiesFieldset.razor.rz.scp.css */
/* Item 33 — the identities fieldset, tokens only. The row scaffold (.rep-r / .rep-c) is RepRows'; this file is the cells' contents. */
.rep-identities[b-96ari8547g] {
    display: flex;
    flex-direction: column;
    gap: var(--field-gap-y);
}

.rep-stack[b-96ari8547g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.rep-muted[b-96ari8547g] {
    color: var(--text-secondary);
}

/* Item 63 (FPL-001/REQ-005 Amended (7), defect b): a long, space-free handle (no natural break
   opportunity) had no wrap/truncation rule of its own -- it overflowed this row's own "channel ·
   handle" column and ran into the "Posting defaults" column's Visibility caption (measured live:
   290-383px of overlap, at 1280 down to 400px). Same truncate-with-full-text-on-demand shape this
   page's own Name column already uses (CrmRepresentatives.razor.css's `.rep-name`/`.rep-name-text`,
   composing <Tooltip OnlyWhenTruncated="true">) -- not a native `title` attribute: this codebase's
   own established idiom for "truncates, full text still reachable" is this Tooltip, not the browser's. */
.rep-identity-name[b-96ari8547g] {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    min-width: 0;
}

.rep-identity-name[b-96ari8547g]  .ui-tooltip-region {
    min-width: 0;
    flex: 0 1 auto;
}

.rep-identity-handle[b-96ari8547g] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rep-identity-reason[b-96ari8547g],
.rep-hint[b-96ari8547g] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

/* the header's spacer over the remove column: the same width as the icon button under it */
.rep-icon-spacer[b-96ari8547g] {
    flex: none;
    width: var(--control-h-sm);
}

/* "Visibility ▾" — a small caption and the select, one line each, the two stacked (the mockup's two-select cell) */
.rep-def[b-96ari8547g] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

/* the select takes what the caption leaves — measured live: at 100% of the row it ran under the remove button */
.rep-def-sel[b-96ari8547g] {
    flex: 1;
    min-width: 0;
}

.rep-def-cap[b-96ari8547g] {
    flex: none;
    width: 68px;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

/* the fieldset's error line — the FormField error look (row 49), because it is the same kind of sentence */
.rep-error[b-96ari8547g] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin: 0;
    color: var(--error);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.rep-dialog-line[b-96ari8547g] {
    margin: 0;
}

.rep-dialog-line + .rep-dialog-line[b-96ari8547g] {
    margin-top: var(--space-8);
}

/* The defaults column gets the larger share: "Anyone (platform default)" was cut to "Anyone (platform d…" at an equal split (measured live); the channel · handle column is short. */
.rep-identities .rep-c.rep-c-wide[b-96ari8547g] {
    flex: 1.6;
}
/* frontend/Components/Pages/crm/settings/representatives/RepLine.razor.rz.scp.css */
.rep-line[b-tc8ksmb6xm] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.rep-line-hint[b-tc8ksmb6xm] {
    color: var(--text-secondary);
}

.rep-line-warning[b-tc8ksmb6xm] {
    color: var(--warn);
}

.rep-line-error[b-tc8ksmb6xm] {
    color: var(--error);
}
/* frontend/Components/Pages/crm/settings/representatives/RepProfileFieldset.razor.rz.scp.css */
/* Item 33 — the Profile fieldset's own layout: the sheet's `.f2` (mockup 09, 06-overlays.html: `display: grid; grid-template-columns: 1fr 1fr; gap: var(--field-gap-y) var(--section-gap-y)`) — TWO columns at the
   drawer's 640 px: [Name | Active] · [Persona | Writing-style notes] · [Post voice notes | Signature] · [Post metrics group]. Measured on 09: fields 275 px wide, six of them in ~280 px of height; built as one column
   they were 554 px wide and ~690 px tall (the second review of item 33's live check). Below the sitewide 900 px breakpoint the drawer is full-bleed and the fields stack again. Tokens only. */
.rep-fields[b-zzmzmjan8l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--field-gap-y) var(--section-gap-y);
    align-items: start;
}

/* the Active switch sits in the Name field's row, on the input's baseline (the input is --control-h tall, the switch --switch-h) */
.rep-fields[b-zzmzmjan8l] >  :nth-child(2) {
    align-self: end;
    margin-bottom: var(--space-4);
}

@media (max-width: 900px) {
    .rep-fields[b-zzmzmjan8l] {
        grid-template-columns: 1fr;
    }

    .rep-fields[b-zzmzmjan8l] >  :nth-child(2) {
        align-self: start;
        margin-bottom: 0;
    }
}

.rep-muted[b-zzmzmjan8l] {
    color: var(--text-secondary);
}
/* frontend/Components/Pages/crm/settings/representatives/RepReceiveEmailSwitch.razor.rz.scp.css */
/* The Receive email switch under an Email identity's account line. Tokens only. */
.rep-receive[b-d6txr2hwoq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.rep-receive-line[b-d6txr2hwoq] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.rep-receive-sentence[b-d6txr2hwoq],
.rep-receive-body[b-d6txr2hwoq] {
    margin: 0;
}
/* frontend/Components/Pages/crm/settings/representatives/RepresentativeRowMenu.razor.rz.scp.css */
/* The popup anchors to this wrapper (the layer's Menu is position: absolute under it). The reveal-on-hover/focus rule lives in the
   page's own stylesheet — it needs the row as an ancestor, which this component's scope cannot see. */
.rep-rowmenu[b-leid5f4yrp] {
    position: relative;
    display: inline-flex;
}
/* frontend/Components/Pages/crm/settings/representatives/RepRows.razor.rz.scp.css */
/* The sheet's `.rep` block (09-representatives-page.html lines 875-886), tokens only. */
.rep[b-5jh03vh42h] {
    display: flex;
    flex-direction: column;
}

.rep-head[b-5jh03vh42h] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    height: var(--row-head-h);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    border-bottom: var(--border-w) solid var(--line);
}

.rep[b-5jh03vh42h]  .rep-r {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    border-bottom: var(--border-w) solid var(--line);
}

.rep[b-5jh03vh42h]  .rep-r.no-line {
    border-bottom: 0;
    padding-bottom: 0;
}

.rep[b-5jh03vh42h]  .rep-c {
    flex: 1;
    min-width: 0;
}

/* The checkbox column: a box and the words "Work day" — NOT a form field's width. The mockup's `.narrow` is `--field-w` (280 px), which would leave the two
   time cells ~90 px each at the drawer's 640 px; this keeps them ~150 px. (A named deviation from the mockup: WORK_DAY_COLUMN_WIDTH in CrmRepresentatives.md.) */
.rep[b-5jh03vh42h]  .rep-c.narrow {
    flex: none;
    width: calc(var(--control-h-lg) * 2.5);
}

/* The stepper column (the mockup's `width: var(--select-w)`): a number stepper's own frame, not a flexing cell. */
.rep-head .rep-c-num[b-5jh03vh42h],
.rep[b-5jh03vh42h]  .rep-c-num {
    flex: none;
    width: var(--select-w);
}
/* frontend/Components/Pages/crm/settings/representatives/RepScheduleFieldset.razor.rz.scp.css */
.rep-schedule[b-tym8cui9xs] {
    display: flex;
    flex-direction: column;
    gap: var(--field-gap-y);
}
/* frontend/Components/Pages/crm/today/bands/SequenceTodayAttentionBand.razor.rz.scp.css */
/* FCRM-001/REQ-003 Phase 1 Task 10 (FR-11) -- tokens only. */

.seq-today-attention-reason[b-u5vchjimm4] {
    display: block;
}
/* frontend/Components/Pages/crm/today/bands/SequenceTodayPinnedBand.razor.rz.scp.css */
/* FCRM-001/REQ-003 Phase 1 Task 10 (FR-8, FR-11) -- tokens only. */

.seq-today-pinned[b-5z6k24yxac] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.seq-today-pinned-head[b-5z6k24yxac] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.seq-today-pinned-title[b-5z6k24yxac] {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}
/* frontend/Components/Pages/crm/today/bands/SequenceTodayRepliedBand.razor.rz.scp.css */
/* FCRM-001/REQ-003 Phase 1 Task 10 (FR-8) -- tokens only. */

.seq-today-replied-source[b-bco9cru8rm] {
    display: block;
}

.seq-today-replied-text[b-bco9cru8rm] {
    margin: var(--space-4) 0 0;
    padding-left: var(--space-8);
    border-left: var(--border-w) solid var(--line);
    color: var(--text);
    white-space: pre-wrap;
}
/* frontend/Components/Pages/crm/today/bysequence/SequenceTodayBySequenceCard.razor.rz.scp.css */
/* FCRM-001/REQ-003 Phase 1 Task 10 (FR-17) -- tokens only. */

.seq-today-card-line[b-y7kmb4bmmm] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.seq-today-card-work[b-y7kmb4bmmm] {
    flex: 1;
}

.seq-today-card-count[b-y7kmb4bmmm] {
    color: var(--text-secondary);
}
/* frontend/Components/Pages/crm/today/dialogs/ContinueSequenceDialog.razor.rz.scp.css */
/* FCRM-001/REQ-003 FR-49 — the Continue confirmation's body. Tokens only. The shell, footer and width are row 17's. */
.tod-dlg[b-a9h7r8vfdk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.tod-dlg-text[b-a9h7r8vfdk] {
    margin: 0;
}
/* frontend/Components/Pages/crm/today/dialogs/MakeLeadDialog.razor.rz.scp.css */
/* FCRM-001/REQ-003 FR-9 — the Make-lead dialog's body. Tokens only. The shell, footer and width are row 17's. */
.tod-dlg[b-xht47wtx5k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.tod-dlg-sub[b-xht47wtx5k] {
    margin: 0;
    color: var(--text-secondary);
}

[b-xht47wtx5k] .tod-select-empty {
    color: var(--text-secondary);
}
/* frontend/Components/Pages/crm/today/drawer/SequenceActionDrawer.razor.rz.scp.css */
/* FCRM-001/REQ-003 Phase 2 — the action drawer shell. Tokens only. */

.seq-drawer-keys[b-w0mpbmmzjc] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    margin: 0 0 var(--space-8);
}

.seq-drawer-banners[b-w0mpbmmzjc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.seq-drawer-banner[b-w0mpbmmzjc] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
}

.seq-drawer-columns[b-w0mpbmmzjc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-24);
}
/* frontend/Components/Pages/crm/today/drawer/SequenceActionDrawerPerson.razor.rz.scp.css */
/* FCRM-001/REQ-003 Phase 2 FR-27 — the drawer's left column. Tokens only. */

.seq-drawer-left[b-u48ccojybk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.seq-drawer-canvas[b-u48ccojybk] {
    height: calc(var(--space-48) * 6);
    overflow: hidden;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

.seq-drawer-outputs[b-u48ccojybk],
.seq-drawer-now[b-u48ccojybk],
.seq-drawer-rep[b-u48ccojybk] {
    margin: 0;
}

.seq-drawer-now[b-u48ccojybk] {
    font-weight: var(--fw-semibold);
}

.seq-drawer-person[b-u48ccojybk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.seq-drawer-person-name[b-u48ccojybk],
.seq-drawer-subhead[b-u48ccojybk] {
    margin: 0;
}

.seq-drawer-muted[b-u48ccojybk] {
    margin: 0;
    color: var(--text-secondary);
}

.seq-drawer-conversation[b-u48ccojybk] {
    margin: 0;
    padding-left: var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
/* frontend/Components/Pages/crm/today/drawer/SequenceActionDrawerWork.razor.rz.scp.css */
/* FCRM-001/REQ-003 Phase 2 FR-28..FR-31 — the drawer's work column. Tokens only. */

.seq-drawer-work[b-y3ppjjw4lx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.seq-drawer-slot[b-y3ppjjw4lx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.seq-drawer-slot-foot[b-y3ppjjw4lx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.seq-drawer-counter[b-y3ppjjw4lx] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.seq-drawer-counter-over[b-y3ppjjw4lx] {
    color: var(--error);
}

.seq-drawer-outputs-row[b-y3ppjjw4lx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.seq-drawer-output[b-y3ppjjw4lx] {
    padding: var(--space-8) var(--space-12);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.seq-drawer-output[aria-pressed="true"][b-y3ppjjw4lx] {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.seq-drawer-output:disabled[b-y3ppjjw4lx] {
    cursor: not-allowed;
}

.seq-drawer-notices[b-y3ppjjw4lx] {
    margin: 0;
    padding-left: var(--space-16);
}
/* frontend/Components/Pages/crm/today/drawer/SequenceCallLogSection.razor.rz.scp.css */
/* The Call step's Log call, in the drawer's work column. Tokens only. */

.seq-call-log[b-i6pu2bzlwh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding: var(--space-12);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

.seq-call-log-foot[b-i6pu2bzlwh] {
    display: flex;
    justify-content: flex-end;
}
/* frontend/Components/Pages/crm/today/drawer/SequenceEmailSendSection.razor.rz.scp.css */
/* The Write email step's send, in the drawer's work column. Tokens only. */

.seq-email-send[b-9u0xawho92] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding: var(--space-12);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

.seq-email-send-foot[b-9u0xawho92] {
    display: flex;
    justify-content: flex-end;
}
/* frontend/Components/Pages/crm/today/footer/SequenceTodayFooter.razor.rz.scp.css */
/* FCRM-001/REQ-003 Phase 1 Task 10 (FR-18) -- tokens only. */

.seq-today-footer[b-5qjtss2iaj] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.seq-today-footer-line[b-5qjtss2iaj],
.seq-today-footer-paused[b-5qjtss2iaj] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}
/* frontend/Components/Pages/crm/today/groups/SequenceTodayGroupBand.razor.rz.scp.css */
/* FCRM-001/REQ-003 Phase 1 Task 9 (FR-13, FR-14) -- tokens only. */

.seq-today-group-hint[b-lq5ie7ijy0],
.seq-today-group-split[b-lq5ie7ijy0],
.seq-today-group-empty[b-lq5ie7ijy0] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

/* Phase 2 FR-33: the tick a finished group wears (row 82's meaning). */
.seq-today-group-done[b-lq5ie7ijy0] {
    display: inline-flex;
    align-items: center;
    width: var(--space-16);
    height: var(--space-16);
    color: var(--ok);
}
/* frontend/Components/Pages/crm/today/history/SequenceHistoryDrawer.razor.rz.scp.css */
/* FCRM-001/REQ-003 Phase 1 Task 11 (FR-24) -- tokens only. */

.seq-history-path[b-4hw6u3ej92],
.seq-history-now[b-4hw6u3ej92] {
    margin: 0 0 var(--space-8);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.seq-history-actions[b-4hw6u3ej92] {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-8);
    padding-top: var(--space-12);
    background: var(--surface);
}
/* frontend/Components/Pages/crm/today/rows/SequenceTodayBandRow.razor.rz.scp.css */
/* FCRM-001/REQ-003 Phase 1 Task 10 -- tokens only. */

.seq-today-band-subline[b-lo0cy5pnkp] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/crm/today/rows/SequenceTodayPersonRow.razor.rz.scp.css */
/* FCRM-001/REQ-003 Phase 1 Task 9 (FR-15, FR-16) -- tokens only. */

.seq-today-row-line1[b-wnius0gvi4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.seq-today-row-name[b-wnius0gvi4] {
    font-weight: var(--fw-semibold);
}

.seq-today-row-meta[b-wnius0gvi4],
.seq-today-row-claim[b-wnius0gvi4],
.seq-today-row-current[b-wnius0gvi4],
.seq-today-row-loading[b-wnius0gvi4] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.seq-today-row-line2[b-wnius0gvi4] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.seq-today-row-trailing[b-wnius0gvi4] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}
/* frontend/Components/Pages/crm/today/SequenceTodayPage.razor.rz.scp.css */
/* FCRM-001/REQ-003 Phase 1 (FR-1, FR-6, FR-7) — the Today's-actions page shell. Tokens only (a
   page-source scan pins it, same DesignLayerLint carve-out the sibling sequences pages document).
   The band/toolbar margin recipe is SequencesList.razor.css's own — the two pages share the exact
   same header + tab strip + toolbar top-of-page shape. */

.seq-today-page[b-vd9nyxfgi5] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.seq-today-page[b-vd9nyxfgi5]  .ui-pageheader-band {
    margin-bottom: calc(var(--content-pad) - var(--page-gap));
}

.seq-today-page[b-vd9nyxfgi5]  .ui-toolbar {
    margin-bottom: 0;
}

.seq-today-meta[b-vd9nyxfgi5] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
    color: var(--text-secondary);
}

.seq-today-kbd-hint[b-vd9nyxfgi5] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/crm/today/toolbar/SequenceTodayToolbar.razor.rz.scp.css */
/* FCRM-001/REQ-003 FR-7, row 14 -- the "By work / By sequence" pair. Real `<button>` elements, not
   `Button` (see SequenceTodayToolbar.razor's own class doc comment's "By work / By sequence" section
   for why: `Button`'s Toggle intent has no way to set `aria-pressed`, so its own CSS rule -- scoped to
   `Button.razor`'s render tree via Blazor CSS isolation -- is unreachable from here regardless). Every
   value a var(--token), matching this design layer's own "no literal outside the allowances" rule. */

.seq-today-view-toggle[b-87q4sf4s9m] {
    display: inline-flex;
    gap: var(--space-4);
}

.seq-today-view-btn[b-87q4sf4s9m] {
    min-height: var(--control-h);
    padding: 0 var(--btn-pad-x);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    cursor: pointer;
}

.seq-today-view-btn:hover[b-87q4sf4s9m] {
    background: var(--fill-1);
}

.seq-today-view-btn:focus-visible[b-87q4sf4s9m] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.seq-today-view-btn-on[b-87q4sf4s9m] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: var(--fw-medium);
}
/* frontend/Components/Pages/finance/Cashflow/CashflowLayout.razor.rz.scp.css */
.cashflow-container[b-vc2srbl3wd] {
    display: flex;
    height: 100%;
    width: 100%;
}

.ledger-panel[b-vc2srbl3wd] {
    width: 20%;
    min-width: 250px;
    padding: 16px;
    border-right: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-background-grey);
    height: calc(100vh - 64px);
    overflow-y: auto;
}

.cashflow-root[b-vc2srbl3wd] {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cashflow-tab-nav[b-vc2srbl3wd] {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}
/* frontend/Components/Pages/finance/Cashflow/tabs/CalendarTab.razor.rz.scp.css */
.calendar-header[b-tewgva01cm] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}

.calendar-header .header-left[b-tewgva01cm] {
    display: flex;
    align-items: center;
}

.calendar-header .header-title[b-tewgva01cm] {
    text-align: center;
    font-weight: 600;
    font-size: 1.25rem;
}

.calendar-header .header-right[b-tewgva01cm] {
    display: flex;
    justify-content: flex-end;
}

.calendar-grid[b-tewgva01cm] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: auto repeat(6, 1fr);
    gap: 6px;
    min-height: calc(100vh - 220px);
}

.dow[b-tewgva01cm] {
    text-align: center;
    font-weight: 600;
    color: #6c757d;
    padding: 6px 0;
    border-bottom: 1px solid #e9ecef;
}

.day[b-tewgva01cm] {
    position: relative;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 6px;
    background-color: #fff;
    overflow: hidden;
}

.day .date-number[b-tewgva01cm] {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.85rem;
    color: #6c757d;
}

.day .cell-content[b-tewgva01cm] {
    margin-top: 20px;
    height: calc(100% - 24px);
}

.day.weekend[b-tewgva01cm] {
    background-color: #fafbff;
}

.day.outside[b-tewgva01cm] {
    background-color: #f8f9fa;
    color: #adb5bd;
}

.day.today[b-tewgva01cm] {
    border-color: #0d6efd;
    box-shadow: inset 0 0 0 1px #0d6efd;
}

.day.holiday[b-tewgva01cm] {
    background-color: #fff5f5;
}

.day.bg-pos[b-tewgva01cm] {
    background-color: #e9f7ef;
}

.day.bg-neg[b-tewgva01cm] {
    background-color: #fdecea;
}

.date-number:hover[b-tewgva01cm] {
    color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-hover);
    border-radius: 4px;
}
/* frontend/Components/Pages/hr/attendance/AttendanceGeneration.razor.rz.scp.css */
/* The attendance generation page. Layout only, from tokens; every measure of the grid, the stepper and the banners is the layer's own. */

.gen-page[b-dwv3t0bih3] {
    display: block;
}

.gen-month-bar[b-dwv3t0bih3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-12);
}

.gen-range[b-dwv3t0bih3] {
    color: var(--text-secondary);
}

.gen-scope[b-dwv3t0bih3] {
    margin: 0;
    color: var(--text-secondary);
}

.gen-acts[b-dwv3t0bih3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}

/* The results wall scrolls inside its card at the layer's grid scroll height, so the day row and the name column stay in view while it scrolls both ways. */
.gen-results[b-dwv3t0bih3]  .ui-heat-wall {
    max-height: var(--grid-scroll-h);
}
/* frontend/Components/Pages/hr/checklist/ChecklistGroupDrawer.razor.rz.scp.css */
/* The checklist group drawer. Tokens only. */

.ck-items-head[b-dmzclg8fqv] {
    margin-top: var(--space-12);
    font-weight: var(--fw-semibold);
}
/* frontend/Components/Pages/hr/checklist/ChecklistGroupItemRows.razor.rz.scp.css */
/* The items of a checklist group inside its drawer. Tokens only. */

.ck-items[b-3e3pui5s98] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ck-item[b-3e3pui5s98] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.ck-item-pos[b-3e3pui5s98] {
    min-width: var(--space-4);
    color: var(--text-secondary);
}

.ck-item-body[b-3e3pui5s98] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.ck-item-acts[b-3e3pui5s98] {
    display: flex;
    gap: var(--space-4);
}

.ck-add[b-3e3pui5s98] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-12);
}

.ck-items-none[b-3e3pui5s98] {
    color: var(--text-secondary);
}
/* frontend/Components/Pages/hr/checklist/ChecklistGroups.razor.rz.scp.css */
/* The checklists page and its drawer. Tokens only; every measure of the table, the toolbar and the pager is the layer's own. A long name wraps: the page sets no one-line rule on it. */

.ck-page[b-2y5we5i7qx] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.ck-page[b-2y5we5i7qx]  .ui-pageheader-band {
    margin-bottom: calc(var(--content-pad) - var(--page-gap));
}

.ck-page[b-2y5we5i7qx]  .ui-toolbar {
    margin-bottom: 0;
}

.ck-refs[b-2y5we5i7qx] {
    margin: 0;
    padding-left: var(--space-12);
}

@media (max-width: 899.98px) {
    .ck-page[b-2y5we5i7qx]  .ui-pageheader-main {
        flex-wrap: wrap;
    }
}
/* frontend/Components/Pages/hr/expense/ExpenseDrawer.razor.rz.scp.css */
.exd-form[b-z1gl7eta7t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

.exd-money-row[b-z1gl7eta7t] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
    align-items: center;
}

.exd-currency[b-z1gl7eta7t] {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.exd-count[b-z1gl7eta7t] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.exd-error[b-z1gl7eta7t] {
    color: var(--error);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/hr/expense/ExpensePhotoStrip.razor.rz.scp.css */
.expense-strip[b-0vap4qdcxd] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}

.expense-strip-row[b-0vap4qdcxd] {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}

.expense-strip-read[b-0vap4qdcxd] {
    flex-wrap: wrap;
    align-items: flex-start;
}

.expense-strip-compact[b-0vap4qdcxd] {
    flex-wrap: wrap;
}

.expense-strip-thumb[b-0vap4qdcxd] {
    flex: 0 0 auto;
    display: inline-flex;
    padding: 0;
    border: var(--border-w) solid var(--line);
    background: var(--surface);
    cursor: pointer;
}

.expense-strip-thumb img[b-0vap4qdcxd] {
    display: block;
    width: auto;
    object-fit: cover;
}

.expense-strip-row .expense-strip-thumb img[b-0vap4qdcxd],
.expense-strip-compact .expense-strip-thumb img[b-0vap4qdcxd] {
    height: calc(var(--row-h) - var(--space-8));
    max-width: calc(var(--row-h) * 2);
}

.expense-strip-read .expense-strip-thumb img[b-0vap4qdcxd] {
    height: calc(var(--row-h) * 4);
    max-width: calc(var(--row-h) * 8);
}

.expense-strip-name[b-0vap4qdcxd] {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.expense-strip-code[b-0vap4qdcxd] {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.expense-strip-code-text[b-0vap4qdcxd] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
}

.expense-strip-failed[b-0vap4qdcxd] {
    flex: 1 1 100%;
}

.expense-strip-none[b-0vap4qdcxd] {
    margin: 0;
    color: var(--text-secondary);
}
/* frontend/Components/Pages/hr/expense/ExpenseRead.razor.rz.scp.css */
.expense-read[b-mnyrf4naii] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

.expense-read-part[b-mnyrf4naii] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.expense-read-title[b-mnyrf4naii] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: 600;
}

.expense-read-text[b-mnyrf4naii] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.expense-read-none[b-mnyrf4naii] {
    margin: 0;
    color: var(--text-secondary);
}

.expense-read-log[b-mnyrf4naii] {
    margin: 0;
    padding-left: var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow-wrap: anywhere;
}
/* frontend/Components/Pages/hr/expense/ExpensesTab.razor.rz.scp.css */
.expenses-tab[b-p5bi8wxean] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.expenses-verdict[b-p5bi8wxean] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--page-gap);
    margin: 0;
}

.expenses-none[b-p5bi8wxean] {
    margin: 0;
    color: var(--text-secondary);
}

.expenses-line[b-p5bi8wxean] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.expenses-reason[b-p5bi8wxean] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.expenses-period[b-p5bi8wxean] {
    display: flex;
    align-items: baseline;
    gap: 0.25em;
}
/* frontend/Components/Pages/hr/HrShiftDeviationRefusedDays.razor.rz.scp.css */
/* The opened refused-days list: plain lines in the disclosure's body, indented as the layer's other lists are. Tokens only. */
.sdr-refused-list[b-anua3ds2sj] {
    margin: 0;
    padding-left: var(--space-16);
}
/* frontend/Components/Pages/hr/HrShiftDeviationReportView.razor.rz.scp.css */
/* W:hr-deviation-report/T-04: the page's own drawing of a content cell — the typed badge, the check, the word *open*, the "+N" chip — on tokens only, copied from the gallery's family 5 (.gal-cx and its siblings, prefix changed). */

.sdr-cx[b-b7vk1bxh5p] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    vertical-align: middle;
}

.sdr-ok[b-b7vk1bxh5p] {
    display: inline-flex;
    color: var(--ok);
    vertical-align: middle;
}

.sdr-open[b-b7vk1bxh5p] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    font-style: italic;
}

.sdr-err[b-b7vk1bxh5p] {
    display: inline-flex;
    color: var(--error);
    vertical-align: middle;
}

/* Colour is a swatch; the words stay --text on --surface. */
.sdr-badge[b-b7vk1bxh5p] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--badge);
    padding: 0 var(--space-4);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--space-2);
    color: var(--text);
    font-size: var(--fs-caption);
    line-height: var(--lh-tight);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sdr-sw[b-b7vk1bxh5p] {
    flex: none;
    width: var(--dot);
    height: var(--dot);
    border-radius: var(--space-2);
}

.sdr-more[b-b7vk1bxh5p] {
    background: var(--fill-1);
    color: var(--text-secondary);
}

.sdr-sw[data-series="1"][b-b7vk1bxh5p] { background: var(--series-1); }
.sdr-sw[data-series="2"][b-b7vk1bxh5p] { background: var(--series-2); }
.sdr-sw[data-series="3"][b-b7vk1bxh5p] { background: var(--series-3); }
.sdr-sw[data-series="4"][b-b7vk1bxh5p] { background: var(--series-4); }
.sdr-sw[data-series="5"][b-b7vk1bxh5p] { background: var(--series-5); }
.sdr-sw[data-series="6"][b-b7vk1bxh5p] { background: var(--series-6); }

.sdr-count[b-b7vk1bxh5p] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    font-variant-numeric: tabular-nums;
}

/* From and To sit side by side. A picker's wrapper takes the whole filter slot (two of them stack), and its field is --field-w wide whatever its container, so each field gets a container exactly that wide, with the toolbar's gap between. */
.sdr-filters[b-b7vk1bxh5p] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-12);
}

.sdr-filter[b-b7vk1bxh5p] {
    flex: 0 0 auto;
    width: var(--field-w);
}

/* The results wall scrolls inside its card at the layer's grid scroll height, so the day row and the name column stay in view while it scrolls both ways. */
.sdr-results[b-b7vk1bxh5p]  .ui-heat-wall {
    max-height: var(--grid-scroll-h);
}

/* The day pager under the member pager: the same rhythm as the wall's other blocks. */
.sdr-day-pager[b-b7vk1bxh5p] {
    margin-top: var(--space-16);
}
/* frontend/Components/Pages/hr/letters/DocumentsTab.razor.rz.scp.css */
/* The Documents tab's own measure: the banner, the not-available error and the refusal sit a gap apart. Tokens only. */
.documents-tab[b-cthppjhp5c] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.documents-actions[b-cthppjhp5c] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--content-pad);
}

.documents-refusal[b-cthppjhp5c] {
    margin-top: var(--content-pad);
}

.documents-notice-detail[b-cthppjhp5c] {
    display: block;
}
/* frontend/Components/Pages/hr/letters/LetterGenerateCard.razor.rz.scp.css */
/* The generate card: a column of fields, the two actions in a row, the gate's line under the actions, and the preview as an A4 portrait page that scrolls inside the card. Tokens only. */
.lgc-body[b-gb2k0tq7xl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.lgc-actions[b-gb2k0tq7xl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.lgc-gate-line[b-gb2k0tq7xl] {
    color: var(--text-secondary);
}

.lgc-preview[b-gb2k0tq7xl] {
    aspect-ratio: 210 / 297;
    width: var(--print-w);
    max-width: 100%;
    overflow: auto;
    padding: var(--inset-pad);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
/* frontend/Components/Pages/hr/letters/LetterheadCard.razor.rz.scp.css */
/* The letterhead card. Spacing, weight and colour are layer tokens; the logo's 48px height cap is a literal (--space-48 is a spacing token, not an image size). */

.lh-body[b-oehk16oivz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.lh-logo[b-oehk16oivz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
}

.lh-label[b-oehk16oivz] {
    font-weight: var(--fw-semibold);
}

.lh-logo-img[b-oehk16oivz] {
    max-height: 48px;
    max-width: 100%;
}

.lh-logo-actions[b-oehk16oivz] {
    display: flex;
    gap: var(--space-2);
}

.lh-none[b-oehk16oivz] {
    color: var(--text-secondary);
}

.lh-error[b-oehk16oivz] {
    color: var(--text);
}

.lh-actions[b-oehk16oivz] {
    display: flex;
    justify-content: flex-end;
}
/* frontend/Components/Pages/hr/letters/LetterRefusalBanner.razor.rz.scp.css */
/* One line of a refusal's detail, or the renderer's message, on a line of its own. Tokens only. */
.lrb-line[b-cefwr8zgju] {
    display: block;
}
/* frontend/Components/Pages/hr/letters/LetterTemplateDrawer.razor.rz.scp.css */
/* The letter template drawer. Spacing, weight and colour are layer tokens; the 0.7 opacity of the greyed letterhead and the 22rem field-list width are literals (no layer token holds them). The form is a container: the field list sits beside the body when the drawer is 900px wide or more, and below it otherwise. */

.ltd-form[b-17599k32u1] {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ltd-label[b-17599k32u1] {
    font-weight: var(--fw-semibold);
}

.ltd-letterhead[b-17599k32u1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    opacity: 0.7;
}

.ltd-layout[b-17599k32u1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ltd-editor[b-17599k32u1] {
    min-width: 0;
}

@container (min-width: 900px) {
    .ltd-layout[b-17599k32u1] {
        flex-direction: row;
        align-items: flex-start;
    }

    .ltd-editor[b-17599k32u1] {
        flex: 1 1 0;
    }

    .ltd-fields[b-17599k32u1] {
        flex: 0 0 22rem;
    }
}

.ltd-reload[b-17599k32u1] {
    display: flex;
    justify-content: flex-end;
}

.ltd-delete[b-17599k32u1] {
    display: flex;
    justify-content: flex-start;
}
/* frontend/Components/Pages/hr/letters/LetterTemplates.razor.rz.scp.css */
/* The letter templates page. Tokens only; every measure of the table, the toolbar and the pager is the layer's own. A long name wraps: the page sets no one-line rule on it. */

.lt-page[b-hi8bu7g9v0] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.lt-page[b-hi8bu7g9v0]  .ui-pageheader-band {
    margin-bottom: calc(var(--content-pad) - var(--page-gap));
}

.lt-page[b-hi8bu7g9v0]  .ui-toolbar {
    margin-bottom: 0;
}

@media (max-width: 899.98px) {
    .lt-page[b-hi8bu7g9v0]  .ui-pageheader-main {
        flex-wrap: wrap;
    }
}
/* frontend/Components/Pages/hr/letters/SignedCopyDialog.razor.rz.scp.css */
/* The signed copy's dialog: the chosen file's name sits under the upload control. Tokens only. */
[data-testid="dt-signed-copy-name"][b-1a9rdcnkpt] {
    display: block;
    margin-top: var(--space-8);
    font-weight: var(--fw-semibold);
}
/* frontend/Components/Pages/hr/myteam/MyTeamPage.razor.rz.scp.css */
.my-team-page[b-myqkp8lsqd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.my-team-panel[b-myqkp8lsqd] {
    min-width: 0;
}
/* frontend/Components/Pages/hr/myteam/MyTeamPicker.razor.rz.scp.css */
.my-team-picker[b-smex35v9da] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    align-items: flex-end;
}
/* frontend/Components/Pages/hr/myteam/TeamDigestTab.razor.rz.scp.css */
.my-team-verdict[b-fgbmqigrfw] {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
}
/* frontend/Components/Pages/hr/myteam/TeamPerformanceConsequences.razor.rz.scp.css */
.team-perf-block[b-3ka72e35qx] {
    margin-top: var(--space-24);
    min-width: 0;
}

.team-perf-heading[b-3ka72e35qx] {
    margin: 0 0 var(--space-8);
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
}

.team-perf-hint[b-3ka72e35qx] {
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    color: var(--text-secondary);
}

.team-perf-list[b-3ka72e35qx] {
    margin-top: var(--space-12);
    min-width: 0;
}

.team-perf-subheading[b-3ka72e35qx] {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
}

.team-perf-scroll[b-3ka72e35qx] {
    max-width: 100%;
    overflow-x: auto;
    min-width: 0;
}

.team-perf-table[b-3ka72e35qx] {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--fs-body);
}

.team-perf-table th[b-3ka72e35qx],
.team-perf-table td[b-3ka72e35qx] {
    padding: var(--space-4) var(--space-8);
    border-top: var(--border-w) solid var(--line);
    text-align: left;
    vertical-align: top;
}

.team-perf-table th[b-3ka72e35qx] {
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    border-top: 0;
}

.team-perf-none[b-3ka72e35qx],
.team-perf-seam[b-3ka72e35qx] {
    margin: var(--space-4) 0;
    color: var(--text-secondary);
}

.team-perf-detail[b-3ka72e35qx] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.team-perf-code[b-3ka72e35qx] {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/hr/myteam/TeamPerformanceHubLink.razor.rz.scp.css */
.team-perf-link[b-3vs7ls21u1] {
    overflow-wrap: anywhere;
}

.team-perf-unlinked[b-3vs7ls21u1] {
    overflow-wrap: anywhere;
}

.team-perf-code[b-3vs7ls21u1] {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/hr/myteam/TeamPerformanceScores.razor.rz.scp.css */
.team-perf-block[b-i11jszig29] {
    margin-top: var(--space-24);
    min-width: 0;
}

.team-perf-heading[b-i11jszig29] {
    margin: 0 0 var(--space-8);
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
}

.team-perf-hint[b-i11jszig29] {
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    color: var(--text-secondary);
}

.team-perf-scroll[b-i11jszig29] {
    max-width: 100%;
    overflow-x: auto;
    min-width: 0;
}

.team-perf-rated[b-i11jszig29] {
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    color: var(--text-secondary);
}

.team-perf-unrated[b-i11jszig29] {
    margin: var(--space-8) 0 0;
    font-size: var(--fs-small);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.team-perf-code[b-i11jszig29] {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/hr/myteam/TeamPerformanceStandings.razor.rz.scp.css */
.team-perf-block[b-a9edlmb4n1] {
    margin-top: var(--space-24);
    min-width: 0;
}

.team-perf-heading[b-a9edlmb4n1] {
    margin: 0 0 var(--space-8);
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
}

.team-perf-hint[b-a9edlmb4n1] {
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    color: var(--text-secondary);
}

.team-perf-standing-list[b-a9edlmb4n1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.team-perf-standing[b-a9edlmb4n1] {
    padding: var(--space-8) 0;
    border-top: var(--border-w) solid var(--line);
    min-width: 0;
}

.team-perf-standing-head[b-a9edlmb4n1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4) var(--space-8);
    min-width: 0;
}

.team-perf-note[b-a9edlmb4n1],
.team-perf-detail[b-a9edlmb4n1] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.team-perf-rule-line[b-a9edlmb4n1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4) var(--space-16);
    padding: var(--space-2) 0;
    min-width: 0;
}

.team-perf-rule-sentence[b-a9edlmb4n1] {
    flex: 1 1 50%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.team-perf-rule-window[b-a9edlmb4n1],
.team-perf-rule-count[b-a9edlmb4n1],
.team-perf-rule-state[b-a9edlmb4n1],
.team-perf-rule-code[b-a9edlmb4n1] {
    font-size: var(--fs-small);
    min-width: 0;
}

.team-perf-rule-line[data-state="fired"] .team-perf-rule-state[b-a9edlmb4n1] {
    color: var(--error);
    font-weight: var(--fw-semibold);
}

.team-perf-rule-line[data-state="case-open"] .team-perf-rule-state[b-a9edlmb4n1] {
    color: var(--warn);
    font-weight: var(--fw-semibold);
}

.team-perf-not-watched[b-a9edlmb4n1] {
    color: var(--error);
}

.team-perf-seam[b-a9edlmb4n1] {
    margin: var(--space-8) 0;
}

.team-perf-code[b-a9edlmb4n1] {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/hr/myteam/TeamPerformanceTab.razor.rz.scp.css */
.team-perf-head[b-g9o3xz2qmd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8) var(--space-16);
    min-width: 0;
}

.team-perf-quarter[b-g9o3xz2qmd] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
    min-width: 0;
    overflow-wrap: anywhere;
}

.team-perf-code[b-g9o3xz2qmd] {
    font-family: var(--font-mono);
}

.team-perf-search[b-g9o3xz2qmd] {
    margin: var(--space-16) 0 var(--space-8);
    min-width: 0;
}

.team-perf-notes[b-g9o3xz2qmd] {
    margin: var(--space-24) 0 var(--space-16);
    font-size: var(--fs-small);
    color: var(--text-secondary);
    min-width: 0;
}

.team-perf-notes p[b-g9o3xz2qmd] {
    margin: var(--space-2) 0;
}
/* frontend/Components/Pages/hr/myteam/TeamPerformanceTrends.razor.rz.scp.css */
.team-perf-block[b-1birwuxyxm] {
    margin-top: var(--space-24);
    min-width: 0;
}

.team-perf-heading[b-1birwuxyxm] {
    margin: 0 0 var(--space-8);
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
}

.team-perf-hint[b-1birwuxyxm] {
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    color: var(--text-secondary);
}

.team-perf-open-quarter[b-1birwuxyxm] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4) var(--space-8);
    margin: var(--space-8) 0 0;
    min-width: 0;
}

.team-perf-open-label[b-1birwuxyxm] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}
/* frontend/Components/Pages/hr/myteam/TeamPerformanceVerdict.razor.rz.scp.css */
.team-perf-verdict[b-43onhz0hbm] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4) var(--space-16);
    margin: var(--space-12) 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    min-width: 0;
}

.team-perf-figure[b-43onhz0hbm] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.team-perf-names[b-43onhz0hbm] {
    display: block;
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    color: var(--text-secondary);
}

.team-perf-code[b-43onhz0hbm] {
    font-family: var(--font-mono);
}
/* frontend/Components/Pages/hr/myteam/TeamPerformanceWall.razor.rz.scp.css */
.team-perf-wall[b-yz899oupuf] {
    min-width: 0;
}

.team-perf-filters[b-yz899oupuf] {
    position: sticky;
    top: 0;
    z-index: var(--z-menu);
    background: var(--surface);
    padding-top: var(--space-8);
    min-width: 0;
}

.team-perf-people[b-yz899oupuf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.team-perf-add[b-yz899oupuf] {
    font-size: var(--fs-small);
}

.team-perf-badge[b-yz899oupuf] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.team-perf-text[data-state="reversed"][b-yz899oupuf] {
    text-decoration: line-through;
}

.team-perf-reversed[b-yz899oupuf] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.team-perf-rule[b-yz899oupuf] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.team-perf-code[b-yz899oupuf] {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/hr/myteam/TeamWallCards.razor.rz.scp.css */
.team-wall-cards[b-wg45tubdnr] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
    margin-top: var(--space-16);
}

.team-wall-cards-none[b-wg45tubdnr] {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-secondary);
}

@media (min-width: 768px) {
    .team-wall-cards[b-wg45tubdnr] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A code is one long word: let it break inside its value lane rather than run over the next line. */
.team-wall-cards[b-wg45tubdnr]  .team-figure-code {
    overflow-wrap: anywhere;
}
/* frontend/Components/Pages/hr/myteam/TeamWallRowTrailing.razor.rz.scp.css */
.team-wall-trailing[b-y4duo67elg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.team-wall-chunks[b-y4duo67elg] {
    display: block;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.team-wall-pills[b-y4duo67elg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-8);
}
/* frontend/Components/Pages/hr/myteam/TeamWallTab.razor.rz.scp.css */
.team-wall-head[b-oeakfvfqcn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8) var(--space-16);
}

.team-wall-engine[b-oeakfvfqcn],
.team-wall-frozen[b-oeakfvfqcn] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.team-wall-verdict[b-oeakfvfqcn] {
    margin: var(--space-12) 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
}

.team-wall-codes[b-oeakfvfqcn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.team-wall-code[b-oeakfvfqcn] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

/* a day's cell: one element filling the cell, carrying the day's colour; the colours are the Attendance tab's, on the same data-category (the cell's focus ring is the shell's, on its anchor) */
.team-wall-day[b-oeakfvfqcn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    height: 100%;
    padding: var(--space-4);
    box-sizing: border-box;
    color: inherit;
    text-decoration: none;
}

.team-wall-day[data-category="Holiday"][b-oeakfvfqcn] { background: var(--neutral-bg); }
.team-wall-day[data-category="Leave"][b-oeakfvfqcn] { background: var(--heat-leave); }
.team-wall-day[data-category="OffDayWorked"][b-oeakfvfqcn] { background: var(--series-6); color: var(--on-accent); }
.team-wall-day[data-category="Off"][b-oeakfvfqcn] { background: var(--heat-weekend); }
.team-wall-day[data-category="ChoicePending"][b-oeakfvfqcn] { background: var(--warn-bg); }
.team-wall-day[data-category="LopAbsentUnclassified"][b-oeakfvfqcn] { background: var(--heat-absent); }
.team-wall-day[data-category="Fine"][b-oeakfvfqcn] { background: var(--ok-bg); }
/* frontend/Components/Pages/hr/org/Contributors.razor.rz.scp.css */
/* The Contributors page. Tokens only; every measure of the table and the pager is the layer's own, and the page's spacing is row 71 Stack's. */

/* AppShell sets --ui-grid-sticky-top to the top bar's height. Inside row 87's line host (overflow: hidden) the host is the header's scroll parent instead, so that offset would push the header one top bar down the table
   and over the first row (the same fix HolidayGroups.razor.css carries). No offset here: the header stays at the table's top. */
/* The grid scrolls sideways inside its own card (the layer's wrap, StickyEdges: ID stays pinned). That wrap also caps its height, which a list of up to a page of rows must not meet: the page lifts the cap (the host's own
   custom property), so the table never scrolls vertically in the card. */
.con-grid[b-3nvy5ql6qm] {
    --ui-grid-sticky-top: 0px;
    --ui-grid-scroll-h: none;
}

/* Row 87's line host clips to the card (overflow: hidden), which cut the pager's rows-per-page menu on a short page. The table has its own scroller now, so the host stays open. The host's class lands on BusyIndicator's
   own element, which carries the layer's scope attribute and not this page's, so the rule is reached with ::deep from the page's own wrapper element (display: contents: it adds no box to the Stack). It compiles to three
   classes' weight against the layer's two, so it wins whatever the order of the sheets (no !important). */
.con-list[b-3nvy5ql6qm] {
    display: contents;
}

.con-list[b-3nvy5ql6qm]  .con-busy {
    overflow: visible;
}

/* A cell of text is one line, cut with an ellipsis; the tooltip around it shows the whole text only while it is cut. */
.con-ellipsis[b-3nvy5ql6qm] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.con-date[b-3nvy5ql6qm] {
    white-space: nowrap;
}
/* frontend/Components/Pages/hr/org/Employees.razor.rz.scp.css */
/* The Employees page. Tokens only; every measure of the table and the pager is the layer's own, and the page's spacing is row 71 Stack's. */

/* AppShell sets --ui-grid-sticky-top to the top bar's height. Inside row 87's line host (overflow: hidden) the host is the header's scroll parent instead, so that offset would push the header one top bar down the table
   and over the first row (the same fix HolidayGroups.razor.css carries). No offset here: the header stays at the table's top. */
/* The grid scrolls sideways inside its own card (the layer's wrap, StickyEdges: ID stays pinned). That wrap also caps its height, which a list of up to a page of rows must not meet: the page lifts the cap (the host's own
   custom property), so the table never scrolls vertically in the card. */
.emp-grid[b-5al4g8d3tt] {
    --ui-grid-sticky-top: 0px;
    --ui-grid-scroll-h: none;
}

/* Row 87's line host clips to the card (overflow: hidden), which cut the pager's rows-per-page menu on a short page. The table has its own scroller now, so the host stays open. The host's class lands on BusyIndicator's
   own element, which carries the layer's scope attribute and not this page's, so the rule is reached with ::deep from the page's own wrapper element (display: contents: it adds no box to the Stack). It compiles to three
   classes' weight against the layer's two, so it wins whatever the order of the sheets (no !important). */
.emp-list[b-5al4g8d3tt] {
    display: contents;
}

.emp-list[b-5al4g8d3tt]  .emp-busy {
    overflow: visible;
}

/* A cell of text is one line, cut with an ellipsis; the tooltip around it shows the whole text only while it is cut. */
.emp-ellipsis[b-5al4g8d3tt] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-date[b-5al4g8d3tt] {
    white-space: nowrap;
}
/* frontend/Components/Pages/hr/org/HolidayGroupDrawer.razor.rz.scp.css */
/* The Holiday group drawer. Tokens only. */

/* The Usage caption: a skeleton is a one-line box while the count loads, so the line does not jump when the count arrives (AC-67). */
.holgrp-usage-line[b-8z35sk2aas] {
    min-height: var(--lh-body);
    display: flex;
    align-items: center;
}
/* frontend/Components/Pages/hr/org/HolidayGroups.razor.rz.scp.css */
/* The Holiday groups page. Tokens only; every measure of the table and the pager is the layer's own, and the page's spacing is row 71 Stack's. */

/* AppShell sets --ui-grid-sticky-top to the top bar's height, for a grid whose header sticks under the bar while the page scrolls. Inside row 87's line host (overflow: hidden) the host is the header's
   scroll parent instead, so that offset pushed the header one top bar down the table and covered the first row (W:hr-policies-page/TD-12, W:hr-holidays/TD-13; the layer's own fix is W:busy-line-grid-sticky-header).
   No offset here: the header stays at the table's top. */
.holgrp-grid[b-rhmb4oef52] {
    --ui-grid-sticky-top: 0px;
}
/* frontend/Components/Pages/hr/org/Holidays.razor.rz.scp.css */
/* The Holidays list page. Tokens only; every measure of the table, the header and the pager is the layer's own. */

/* The group picker's place while its options load (row 62's block skeleton): one field's height, so the drawer does not jump when the Select arrives. The drawer is rendered under this wrapper, hence ::deep. */
.hol-page[b-strhs26x0f]  .hol-field-skel {
    min-height: var(--control-h);
}

/* AppShell sets --ui-grid-sticky-top to the top bar's height, for a grid whose header sticks under the bar while the page scrolls. Inside row 87's line host (overflow: hidden) the host is the header's
   scroll parent instead, so that offset pushes the header one top bar down the table and covers the first row (W:hr-holidays/TD-13, found by W:hr-policies-page/TD-12). No offset here: the header stays at the table's top. */
.hol-grid[b-strhs26x0f] {
    --ui-grid-sticky-top: 0px;
}
/* frontend/Components/Pages/hr/org/Kras.razor.rz.scp.css */
/* The KRA page's own few rules (Kras.razor). Tokens only; the busy indicator dims the table, the page itself dims no row. */
.kra-ellipsis[b-ynq21m7nlt] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kra-id[b-ynq21m7nlt] {
    color: var(--text-secondary);
}

.kra-add-place[b-ynq21m7nlt] {
    display: inline-block;
    min-width: 72px;
    height: var(--control-h, 32px);
}

.kra-dialog-line[b-ynq21m7nlt] {
    margin: 0;
}
/* frontend/Components/Pages/hr/org/KraTemplates.razor.rz.scp.css */
/* The KRA templates list page. Tokens only; every measure of the table, the toolbar and the pager is the layer's own. */

.kt-page[b-twqe6cqudn] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.kt-page[b-twqe6cqudn]  .ui-pageheader-band {
    margin-bottom: calc(var(--content-pad) - var(--page-gap));
}

.kt-page[b-twqe6cqudn]  .ui-toolbar {
    margin-bottom: 0;
}

.kt-muted[b-twqe6cqudn] {
    color: var(--text-secondary);
}

@media (max-width: 899.98px) {
    .kt-page[b-twqe6cqudn]  .ui-pageheader-main {
        flex-wrap: wrap;
    }
}

/* The VIEW-only Name cell: one line with an ellipsis; the full name is row 27's tooltip while it is cut (AC-68). With MANAGE the cell is the in-cell Open action, which draws its own. */
.kt-ellipsis[b-twqe6cqudn] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* frontend/Components/Pages/hr/org/OrgChart.razor.rz.scp.css */
/* The Org tree's Chart (OrgChart.razor). Every design value is a token; the inline style on the page carries geometry only (TD-27). */
.oc[b-ugb0dowol5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.oc-selected[b-ugb0dowol5] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.oc-notice:empty[b-ugb0dowol5] {
    display: none;
}

.oc-muted[b-ugb0dowol5] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.oc-matches[b-ugb0dowol5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.oc-match[b-ugb0dowol5] {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
}

.oc-fitline[b-ugb0dowol5] {
    font-size: var(--fs-small);
    color: var(--warn);
    background: var(--warn-bg);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-8);
}

.oc-level[b-ugb0dowol5] {
    min-width: 3em;
    text-align: center;
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.oc-host[b-ugb0dowol5] {
    position: relative;
    min-width: 0;
}

.oc-frame[b-ugb0dowol5] {
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: auto;
    height: 62vh;
    min-height: 20rem;
    max-width: 100%;
    touch-action: none;
}

.oc-frame:focus-visible[b-ugb0dowol5] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.oc-sizer[b-ugb0dowol5] {
    position: relative;
}

.oc-layer[b-ugb0dowol5] {
    position: absolute;
    left: 0;
    top: 0;
}

.oc-svg[b-ugb0dowol5] {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}

.oc-line[b-ugb0dowol5] {
    fill: none;
    stroke: var(--line-hover);
    stroke-width: var(--border-w);
}

.oc-item[b-ugb0dowol5] {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-8) var(--space-12);
    text-align: left;
    cursor: default;
}

.oc-dept[b-ugb0dowol5] {
    border-color: var(--accent-soft);
    box-shadow: 0 var(--border-w) var(--space-2) var(--accent-soft);
}

.oc-desig[b-ugb0dowol5] {
    background: var(--accent-soft);
    border-color: var(--line);
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.oc-item.is-selected[b-ugb0dowol5] {
    border-color: var(--accent);
    box-shadow: 0 0 0 var(--focus-w) var(--accent-soft);
}

.oc-item.is-hit[b-ugb0dowol5] {
    background: var(--warn-bg);
    border-color: var(--warn);
}

.oc-name[b-ugb0dowol5] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 700;
    color: var(--text);
}

.oc-title[b-ugb0dowol5] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oc-toggle[b-ugb0dowol5] {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--fs-small);
    padding: 0;
    cursor: pointer;
    flex: none;
}

.oc-head[b-ugb0dowol5] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oc-countline[b-ugb0dowol5] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.oc[b-ugb0dowol5]  .oc-count {
    display: inline-block;
}

.oc-card[b-ugb0dowol5] {
    text-align: center;
    padding: var(--space-8);
}

.oc-card.is-also[b-ugb0dowol5] {
    border-style: dashed;
    background: var(--page);
}

.oc-cardlink[b-ugb0dowol5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.oc-person[b-ugb0dowol5] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 600;
    color: var(--text);
}

.oc-role[b-ugb0dowol5] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.oc-also[b-ugb0dowol5] {
    display: inline-block;
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: var(--radius-pill);
    padding: 0 var(--space-4);
    margin-right: var(--space-2);
}

.oc-more[b-ugb0dowol5] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    background: var(--page);
    text-align: center;
}

.oc-morebtn[b-ugb0dowol5] {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--accent);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    cursor: pointer;
}

.oc-minimap[b-ugb0dowol5] {
    position: absolute;
    right: var(--space-24);
    bottom: var(--space-24);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-overlay);
    overflow: hidden;
    cursor: pointer;
}

.oc-mm-box[b-ugb0dowol5] {
    position: absolute;
    border: var(--border-w) solid var(--line-hover);
    background: var(--accent-soft);
}

.oc-mm-view[b-ugb0dowol5] {
    position: absolute;
    border: var(--focus-w) solid var(--accent);
    border-radius: var(--radius);
    pointer-events: none;
}
/* frontend/Components/Pages/hr/org/OrgTree.razor.rz.scp.css */
/* The Org tree page's own few rules (OrgTree.razor and its parts). Tokens only; the layer draws everything else. */
.ot[b-ihnwf0o60i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ot-verdict[b-ihnwf0o60i] {
    font-size: var(--fs-body);
    color: var(--text);
}

.ot-chips[b-ihnwf0o60i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.ot-panes[b-ihnwf0o60i] {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
    gap: var(--space-16);
    align-items: start;
}

.ot-left[b-ihnwf0o60i], .ot-right[b-ihnwf0o60i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.ot-path[b-ihnwf0o60i] {
    font-size: var(--fs-heading-sm);
    color: var(--text);
}

.ot-actions[b-ihnwf0o60i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.ot[b-ihnwf0o60i]  .ot-muted, .ot[b-ihnwf0o60i]  .ot-count, .ot[b-ihnwf0o60i]  .ot-helper {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.ot-rollup[b-ihnwf0o60i] {
    font-size: var(--fs-body);
    margin: 0;
}

.ot[b-ihnwf0o60i]  .ot-h {
    font-size: var(--fs-heading-sm);
    margin: 0 0 var(--space-8);
}

.ot[b-ihnwf0o60i]  .ot-hit, .ot[b-ihnwf0o60i]  .ot-nd-person {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-4) 0;
}

.ot[b-ihnwf0o60i]  .ot-nd-name {
    min-width: 160px;
}

.ot[b-ihnwf0o60i]  .ot-menuwrap {
    position: relative;
    display: inline-flex;
}

.ot[b-ihnwf0o60i]  .ot-flags-edit {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ot[b-ihnwf0o60i]  .ot-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-12);
    border: var(--border-w) solid var(--line);
    background: var(--surface);
}

.ot[b-ihnwf0o60i]  .ot-picker-title {
    margin: 0;
    font-weight: 600;
}

.ot[b-ihnwf0o60i]  .ot-picker-actions {
    display: flex;
    gap: var(--space-8);
}

.ot[b-ihnwf0o60i]  .ot-drawer {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.ot[b-ihnwf0o60i]  .ot-drawer-dept {
    display: flex;
    align-items: end;
    gap: var(--space-8);
}

.ot[b-ihnwf0o60i]  .ot-people {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-8);
    white-space: nowrap;
}

.ot[b-ihnwf0o60i]  .ot-table {
    min-width: 0;
}

/* Fluent's grid cells clip their content: `.fluent-data-grid td:not([col-select="true"])` sets overflow hidden (Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css), which cuts a row's ⋯ popup to a sliver
   (measured live). Only the cell that holds a row's ⋯ is released, by a direct child (`>`), so no other cell spills: the designation name's cell keeps cutting a long name with its ellipsis. */
.ot[b-ihnwf0o60i]  table.ui-grid td:has(> .ot-menuwrap) {
    overflow: visible;
}

.ot[b-ihnwf0o60i]  .ot-rowacts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-8) 0;
}

.ot[b-ihnwf0o60i]  .ot-flags-edit {
    max-width: 420px;
    white-space: normal;
}

.ot[b-ihnwf0o60i]  .ot-helper {
    display: block;
    white-space: normal;
}
/* frontend/Components/Pages/hr/org/OrgTreeViewSwitch.razor.rz.scp.css */
/* The Org tree's Manage · Chart switch (screen 38b's .view-switch), on the layer's tokens. */
.ots[b-zhczubixvd] {
    display: inline-flex;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-2);
    background: var(--fill-1);
    flex: none;
}

.ots-btn[b-zhczubixvd] {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius);
    cursor: pointer;
}

.ots-btn[aria-pressed="true"][b-zhczubixvd] {
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 0 0 var(--border-w) var(--line);
}

.ots-btn:focus-visible[b-zhczubixvd] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}
/* frontend/Components/Pages/hr/overview/attendance/HrAttendanceTab.razor.rz.scp.css */
/* The Attendance tab of the HR page. Layout only, from tokens; the cards, strips, pager, pills, charts and verdict are the layer's own. */

.hr-attendance-tab[b-nozyw20y0q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.hr-attendance-asof[b-nozyw20y0q] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.hr-attendance-anchor[b-nozyw20y0q] {
    min-width: 0;
}

.hr-attendance-scroll[b-nozyw20y0q] {
    overflow-x: auto;
    max-width: 100%;
}

.hr-attendance-table[b-nozyw20y0q] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}

.hr-attendance-table caption[b-nozyw20y0q] {
    text-align: left;
    font-weight: 600;
    padding: var(--space-4) var(--space-8);
}

.hr-attendance-table th[b-nozyw20y0q],
.hr-attendance-table td[b-nozyw20y0q] {
    padding: var(--space-4) var(--space-8);
    text-align: left;
    vertical-align: top;
}

.hr-attendance-table tbody tr[b-nozyw20y0q] {
    border-top: var(--border-w) solid var(--line);
}

.hr-attendance-empty[b-nozyw20y0q] {
    margin: 0;
}

.hr-attendance-missing[b-nozyw20y0q] {
    margin: var(--space-8) 0 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.hr-attendance-fold[b-nozyw20y0q],
.hr-attendance-more[b-nozyw20y0q] {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

.hr-attendance-links[b-nozyw20y0q] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
}
/* frontend/Components/Pages/hr/overview/cases/HrCasesTab.razor.rz.scp.css */
/* The Cases tab of the HR page. Layout only, from tokens; the cards, strips, pager and chart are the layer's own. */

.hr-cases-tab[b-icfudiuvhj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.hr-cases-asof[b-icfudiuvhj],
.hr-cases-links[b-icfudiuvhj],
.hr-cases-hand[b-icfudiuvhj],
.hr-cases-window[b-icfudiuvhj],
.hr-cases-none[b-icfudiuvhj] {
    margin: 0;
}

.hr-cases-asof[b-icfudiuvhj],
.hr-cases-hand[b-icfudiuvhj],
.hr-cases-window[b-icfudiuvhj] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.hr-cases-chips[b-icfudiuvhj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    margin: 0 0 var(--space-8);
}

.hr-cases-links[b-icfudiuvhj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
}

.hr-cases-scroll[b-icfudiuvhj] {
    overflow-x: auto;
    max-width: 100%;
}

.hr-cases-table[b-icfudiuvhj] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}

.hr-cases-table th[b-icfudiuvhj],
.hr-cases-table td[b-icfudiuvhj] {
    padding: var(--space-4) var(--space-8);
    text-align: left;
    vertical-align: top;
}

.hr-cases-code[b-icfudiuvhj] {
    font-family: var(--font-mono);
}
/* frontend/Components/Pages/hr/overview/exits/HrExitsTab.razor.rz.scp.css */
/* The Exits tab of the HR page. Layout only, from tokens; the cards, strips, pager, pills and charts are the layer's own. */

.hr-exits-tab[b-baegsrk2r4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.hr-exits-asof[b-baegsrk2r4],
.hr-exits-links[b-baegsrk2r4],
.hr-exits-profile[b-baegsrk2r4],
.hr-exits-window[b-baegsrk2r4],
.hr-exits-note[b-baegsrk2r4],
.hr-exits-none[b-baegsrk2r4] {
    margin: 0;
}

.hr-exits-asof[b-baegsrk2r4],
.hr-exits-profile[b-baegsrk2r4],
.hr-exits-window[b-baegsrk2r4],
.hr-exits-note[b-baegsrk2r4] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.hr-exits-chips[b-baegsrk2r4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    margin: 0 0 var(--space-8);
}

.hr-exits-links[b-baegsrk2r4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
}

.hr-exits-scroll[b-baegsrk2r4] {
    overflow-x: auto;
    max-width: 100%;
}

.hr-exits-table[b-baegsrk2r4] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}

.hr-exits-table th[b-baegsrk2r4],
.hr-exits-table td[b-baegsrk2r4] {
    padding: var(--space-4) var(--space-8);
    text-align: left;
    vertical-align: top;
}

.hr-exits-lines[b-baegsrk2r4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.hr-exits-code[b-baegsrk2r4] {
    font-family: var(--font-mono);
}
/* frontend/Components/Pages/hr/overview/HrDigestTab.razor.rz.scp.css */
.hr-digest-heading[b-oqv2ac5ngo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.hr-digest-title[b-oqv2ac5ngo],
.hr-digest-access[b-oqv2ac5ngo],
.hr-digest-verdict[b-oqv2ac5ngo] {
    margin: 0;
}

.hr-digest-title[b-oqv2ac5ngo] {
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
}

.hr-digest-access[b-oqv2ac5ngo] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.hr-digest-verdict[b-oqv2ac5ngo] {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
}
/* frontend/Components/Pages/hr/overview/HrOverviewSection.razor.rz.scp.css */
/* A section of an HR page tab. Layout only; the card, the skeleton and the failed-load form are the layer's own. */

.hr-overview-section[b-o31qkvwwgk] {
    display: block;
    min-width: 0;
}
/* frontend/Components/Pages/hr/overview/HrOverviewTrend.razor.rz.scp.css */
/* A trend: the plot, and the open unit's line beside it that wraps below the plot at narrow widths. Layout only, from tokens. */

.hr-overview-trend[b-orqfzc8169] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-12);
}

.hr-overview-trend-plot[b-orqfzc8169] {
    flex: 1 1 24rem;
    min-width: 0;
}

.hr-overview-open-unit[b-orqfzc8169] {
    flex: 0 1 14rem;
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}
/* frontend/Components/Pages/hr/overview/HrOverviewView.razor.rz.scp.css */
/* The HR page. Layout only, from tokens; the header, the strip, the banners and the errors are the layer's own. */

.hr-overview-page[b-jaw4zp0msf] {
    display: block;
}

.hr-overview-landing[b-jaw4zp0msf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-top: var(--space-12);
}

.hr-overview-panel[b-jaw4zp0msf] {
    margin-top: var(--space-12);
}
/* frontend/Components/Pages/hr/overview/leave/HrLeaveTab.razor.rz.scp.css */
/* The Leave tab of the HR page. Layout only, from tokens; the cards, strips, pager, pills, charts and verdict are the layer's own. */

.hr-leave-tab[b-nx6att3lki] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.hr-leave-asof[b-nx6att3lki] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.hr-leave-anchor[b-nx6att3lki] {
    min-width: 0;
}

.hr-leave-scroll[b-nx6att3lki] {
    overflow-x: auto;
    max-width: 100%;
}

.hr-leave-week[b-nx6att3lki] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0 0 var(--space-8);
    padding: 0;
    list-style: none;
}

.hr-leave-day[b-nx6att3lki] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-4);
    border: var(--border-w) solid var(--line);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    min-width: 0;
}

.hr-leave-today[b-nx6att3lki] {
    border-color: var(--text);
    font-weight: 600;
}

.hr-leave-day-count[b-nx6att3lki] {
    font-size: var(--fs-body);
}

.hr-leave-day-mark[b-nx6att3lki] {
    color: var(--text-secondary);
}

.hr-leave-names[b-nx6att3lki] {
    margin: 0 0 var(--space-8);
    padding: 0;
    list-style: none;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.hr-leave-myteam[b-nx6att3lki],
.hr-leave-switch[b-nx6att3lki],
.hr-leave-month[b-nx6att3lki],
.hr-leave-empty[b-nx6att3lki],
.hr-leave-run p[b-nx6att3lki] {
    margin: var(--space-8) 0 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.hr-leave-table[b-nx6att3lki] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}

.hr-leave-table th[b-nx6att3lki],
.hr-leave-table td[b-nx6att3lki] {
    padding: var(--space-4) var(--space-8);
    text-align: left;
    vertical-align: top;
}

.hr-leave-table tbody tr[b-nx6att3lki] {
    border-top: var(--border-w) solid var(--line);
}

.hr-leave-flag[b-nx6att3lki] {
    display: block;
    color: var(--text-secondary);
}

.hr-leave-more[b-nx6att3lki] {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

.hr-leave-links[b-nx6att3lki] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
}
/* frontend/Components/Pages/hr/overview/payroll/HrPayrollHeldTab.razor.rz.scp.css */
/* The Payroll (held) tab. Layout only; the verdict, the as-of line, the card and the pager are the layer's own. */

.hr-payroll-held[b-75nlci6vvf] {
    display: block;
    min-width: 0;
}

.hr-payroll-held-empty[b-75nlci6vvf] {
    margin: 0;
}

.hr-payroll-held-table[b-75nlci6vvf] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.hr-payroll-held-table th[b-75nlci6vvf],
.hr-payroll-held-table td[b-75nlci6vvf] {
    text-align: left;
    padding: var(--space-8) var(--space-12);
    overflow-wrap: anywhere;
}

/* At phone width each row stacks, so the page never scrolls sideways. */
@media (max-width: 640px) {
    .hr-payroll-held-table thead[b-75nlci6vvf] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .hr-payroll-held-table[b-75nlci6vvf],
    .hr-payroll-held-table tbody[b-75nlci6vvf],
    .hr-payroll-held-table tr[b-75nlci6vvf],
    .hr-payroll-held-table td[b-75nlci6vvf] {
        display: block;
        width: 100%;
    }

    .hr-payroll-held-table tr[b-75nlci6vvf] {
        padding: var(--space-8) 0;
        border-bottom: var(--border-w) solid var(--line);
    }

    .hr-payroll-held-table td[b-75nlci6vvf]::before {
        content: attr(data-label) ": ";
        font-weight: 600;
    }
}
/* frontend/Components/Pages/hr/overview/people/HrPeopleCoverageSection.razor.rz.scp.css */
.hr-people-anchor[b-3xs0dvbkae] { min-width: 0; }
.hr-people-scroll[b-3xs0dvbkae] { overflow-x: auto; max-width: 100%; }
.hr-people-table[b-3xs0dvbkae] { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.hr-people-table th[b-3xs0dvbkae], .hr-people-table td[b-3xs0dvbkae] { padding: var(--space-4) var(--space-8); text-align: left; vertical-align: top; }
.hr-people-small[b-3xs0dvbkae] { display: block; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.hr-people-assigned[b-3xs0dvbkae] { margin-left: var(--space-8); }
.hr-people-more[b-3xs0dvbkae] { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
/* frontend/Components/Pages/hr/overview/people/HrPeopleHeadcountSection.razor.rz.scp.css */
.hr-people-anchor[b-p91c2vk1c5] { min-width: 0; }
.hr-people-big[b-p91c2vk1c5] { margin: 0 0 var(--space-4); font-size: var(--fs-heading-md); font-weight: 600; }
.hr-people-split[b-p91c2vk1c5], .hr-people-open[b-p91c2vk1c5], .hr-people-small[b-p91c2vk1c5] { margin: 0 0 var(--space-8); }
.hr-people-small[b-p91c2vk1c5] { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.hr-people-bar[b-p91c2vk1c5] { display: flex; height: var(--space-8); margin: var(--space-8) 0; border-radius: var(--space-4); overflow: hidden; }
.hr-people-bar-active[b-p91c2vk1c5] { background: var(--accent, currentColor); }
.hr-people-bar-inactive[b-p91c2vk1c5] { background: var(--text-secondary); }
.hr-people-lines[b-p91c2vk1c5] { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-16, 1rem); margin: 0 0 var(--space-8); padding: 0; list-style: none; }
.hr-people-groups[b-p91c2vk1c5] { margin-top: var(--space-8); }
/* frontend/Components/Pages/hr/overview/people/HrPeopleLinksRow.razor.rz.scp.css */
.hr-people-links[b-2dua0ep0pj] { display: flex; flex-wrap: wrap; gap: var(--space-12); }
/* frontend/Components/Pages/hr/overview/people/HrPeopleMatchingList.razor.rz.scp.css */
.hr-people-criterion[b-lyzod9hqwg] { margin: 0 0 var(--space-4); font-weight: 600; }
.hr-people-none[b-lyzod9hqwg] { margin: 0; }
.hr-people-scroll[b-lyzod9hqwg] { overflow-x: auto; max-width: 100%; }
.hr-people-table[b-lyzod9hqwg] { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.hr-people-table th[b-lyzod9hqwg], .hr-people-table td[b-lyzod9hqwg] { padding: var(--space-4) var(--space-8); text-align: left; vertical-align: top; }
.hr-people-small[b-lyzod9hqwg] { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.hr-people-also[b-lyzod9hqwg] { margin-left: var(--space-4); color: var(--text-secondary); }
/* frontend/Components/Pages/hr/overview/people/HrPeopleMonthSection.razor.rz.scp.css */
.hr-people-anchor[b-c1t9cs741j] { min-width: 0; }
.hr-people-scroll[b-c1t9cs741j] { overflow-x: auto; max-width: 100%; }
.hr-people-table[b-c1t9cs741j] { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.hr-people-table th[b-c1t9cs741j], .hr-people-table td[b-c1t9cs741j] { padding: var(--space-4) var(--space-8); text-align: left; vertical-align: top; }
.hr-people-sub[b-c1t9cs741j] { margin: var(--space-8) 0 var(--space-4); }
.hr-people-small[b-c1t9cs741j] { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.hr-people-open[b-c1t9cs741j] { margin: var(--space-8) 0 0; }
/* frontend/Components/Pages/hr/overview/people/HrPeoplePaySection.razor.rz.scp.css */
.hr-people-anchor[b-2goadhjshz] { min-width: 0; }
.hr-people-scroll[b-2goadhjshz] { overflow-x: auto; max-width: 100%; }
.hr-people-table[b-2goadhjshz] { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.hr-people-table th[b-2goadhjshz], .hr-people-table td[b-2goadhjshz] { padding: var(--space-4) var(--space-8); text-align: left; vertical-align: top; }
.hr-people-sub[b-2goadhjshz] { margin: var(--space-8) 0 var(--space-4); }
.hr-people-small[b-2goadhjshz], .hr-people-exact[b-2goadhjshz], .hr-people-open[b-2goadhjshz] { margin: var(--space-8) 0 0; }
.hr-people-small[b-2goadhjshz] { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.hr-people-footnote[b-2goadhjshz] { padding-left: var(--space-16, 1rem); }
/* frontend/Components/Pages/hr/overview/people/HrPeopleTab.razor.rz.scp.css */
/* The People tab of the HR page. Layout only, from tokens; the cards, strips, pager, charts and verdict are the layer's own. */

.hr-people-tab[b-1dej3iollp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.hr-people-asof[b-1dej3iollp] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}
/* frontend/Components/Pages/hr/overview/people/HrPeopleTrendsSection.razor.rz.scp.css */
.hr-people-open[b-z378wd4aco] { margin: var(--space-4) 0 0; font-size: var(--fs-small); }
/* frontend/Components/Pages/hr/pay/PayStructureRowActions.razor.rz.scp.css */
/* The Menu measures its room from its positioned ancestor and refuses to open without one. */
.ps-rowactions[b-kkvqnjy60a] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
}
/* frontend/Components/Pages/hr/pay/PayStructures.razor.rz.scp.css */
/* The Pay structures page. Tokens only; every measure of the table, the toolbar and the pager is the layer's own. */

.ps-page[b-gn2fceqvgg] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.ps-page[b-gn2fceqvgg]  .ui-pageheader-band {
    margin-bottom: calc(var(--content-pad) - var(--page-gap));
}

.ps-page[b-gn2fceqvgg]  .ui-toolbar {
    margin-bottom: 0;
}

@media (max-width: 899.98px) {
    .ps-page[b-gn2fceqvgg]  .ui-pageheader-main {
        flex-wrap: wrap;
    }
}
/* frontend/Components/Pages/hr/payroll/PayrollExportDownload.razor.rz.scp.css */
.runs-download[b-onicyo5e6j] {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
/* frontend/Components/Pages/hr/payroll/PayrollRun.razor.rz.scp.css */
.run-bar[b-63yg6lyfya] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12);
    min-width: 0;
}

.run-log[b-63yg6lyfya],
.run-precheck-rows[b-63yg6lyfya] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.run-log li[b-63yg6lyfya],
.run-precheck-rows li[b-63yg6lyfya] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4) var(--space-8);
    min-width: 0;
    overflow-wrap: anywhere;
}

.run-code[b-63yg6lyfya] {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    color: var(--text-secondary);
}

.run-precheck[b-63yg6lyfya] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    min-width: 0;
}

.run-precheck-line[b-63yg6lyfya] {
    margin: 0 0 var(--space-8);
}

.run-precheck-heading[b-63yg6lyfya] {
    margin: var(--space-12) 0 var(--space-8);
    color: var(--text-secondary);
}

.run-links[b-63yg6lyfya] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}
/* frontend/Components/Pages/hr/payroll/PayrollRunActions.razor.rz.scp.css */
.run-acts[b-cjqlzrcgjo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
    max-width: 100%;
}

.run-acts-bar[b-cjqlzrcgjo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}

.run-acts-anchor[b-cjqlzrcgjo] {
    position: relative;
    display: inline-flex;
}

.run-acts-reasons[b-cjqlzrcgjo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}
/* frontend/Components/Pages/hr/payroll/PayrollRuns.razor.rz.scp.css */
.runs-total[b-2m1a6yk2kj] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.runs-total-line[b-2m1a6yk2kj] {
    white-space: nowrap;
}

.runs-line[b-2m1a6yk2kj] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.runs-exports[b-2m1a6yk2kj] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}

.runs-export-count[b-2m1a6yk2kj] {
    flex: none;
    color: var(--text-secondary);
}
/* frontend/Components/Pages/hr/payroll/PayrollStatementDetail.razor.rz.scp.css */
.statement-detail[b-p0kgtp5crt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

.detail-block h4[b-p0kgtp5crt] {
    margin: 0 0 var(--space-8);
    font-size: var(--fs-heading-sm);
}

.detail-block dl[b-p0kgtp5crt] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-16);
    margin: 0;
}

.detail-block dd[b-p0kgtp5crt] {
    margin: 0;
}

.detail-note[b-p0kgtp5crt] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.detail-formulas[b-p0kgtp5crt] {
    margin: var(--space-8) 0 0;
    padding-left: var(--space-16);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.detail-expense[b-p0kgtp5crt] {
    display: flex;
    align-items: center;
    gap: var(--space-16);
}

.detail-fields[b-p0kgtp5crt] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-8);
}
/* frontend/Components/Pages/hr/payroll/PayrollStatementTable.razor.rz.scp.css */
.statement-table[b-0ru4qu5e6c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

.statement-narrow-notice[b-0ru4qu5e6c] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/hr/payroll/PayrollUnwindDialog.razor.rz.scp.css */
.unwind-body[b-218svetis3] {
    margin: 0 0 var(--space-12);
    overflow-wrap: anywhere;
}

.unwind-refusal[b-218svetis3] {
    margin: var(--space-8) 0 0;
    color: var(--error);
    min-width: 0;
}
/* frontend/Components/Pages/hr/people/compoff/CompOffArea.razor.rz.scp.css */
/* The comp-off area: its balance line, its line for no row, and a struck application's Entry and Hours. Tokens only. */
.compoff-balance[b-kag4sp6skl] {
    margin: 0 0 var(--space-12);
    font-weight: var(--fw-semibold);
}

.compoff-none[b-kag4sp6skl] {
    margin: 0;
    color: var(--text-secondary);
}

.compoff-struck[b-kag4sp6skl] {
    color: var(--text-secondary);
}
/* frontend/Components/Pages/hr/people/DesignationPicker.razor.rz.scp.css */
/* W:hr-org-tree/T-06: the designation picker, in place under its row. Tokens only; spacing comes from the layer's Stack and the parts' own measures. */
.dp-picker[b-dzxcj59u53] {
    padding: var(--space-12);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.dp-title[b-dzxcj59u53] {
    color: var(--text);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}

.dp-count[b-dzxcj59u53] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.dp-actions[b-dzxcj59u53] {
    display: flex;
    padding-top: var(--space-8);
}

.dp-dept[b-dzxcj59u53] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/hr/people/DesignationSection.razor.rz.scp.css */
/* W:hr-org-tree/T-06: the designation section. Tokens only; spacing comes from the layer's Stack. */
.ds-label[b-a6r67rzbcl] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ds-value[b-a6r67rzbcl] {
    color: var(--text);
}

.ds-none[b-a6r67rzbcl] {
    color: var(--error);
}
/* frontend/Components/Pages/hr/people/exit/ExitPanel.razor.rz.scp.css */
.ep-grid[b-3fbzggtbqz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
    align-items: start;
    margin: var(--space-16) 0;
}

.ep-none[b-3fbzggtbqz],
.ep-earlier[b-3fbzggtbqz] {
    margin: var(--space-8) 0;
}

.ep-acts[b-3fbzggtbqz] {
    display: flex;
    gap: var(--space-8);
    margin: var(--space-16) 0 var(--space-8);
}

@media (max-width: 899.98px) {
    .ep-grid[b-3fbzggtbqz] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* frontend/Components/Pages/hr/people/exit/ResignationCard.razor.rz.scp.css */
.rc-grid[b-g84nr7xbea] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
    align-items: start;
}

.rc-hint[b-g84nr7xbea],
.rc-notice[b-g84nr7xbea] {
    margin: var(--space-8) 0;
}

@media (max-width: 899.98px) {
    .rc-grid[b-g84nr7xbea] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* frontend/Components/Pages/hr/people/exit/SettlementCode.razor.rz.scp.css */
.ss-code[b-93qq3jh9s0] {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    white-space: nowrap;
}
/* frontend/Components/Pages/hr/people/exit/SettlementLinesGrid.razor.rz.scp.css */
.ss-item[b-k15kzjwisj] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
    white-space: nowrap;
}

/* A row's Item button keeps its width; the outcome beside it gives way first. */
.ss-item[b-k15kzjwisj]  .ui-tooltip-region:has(.ui-link-incell) {
    flex: none;
}

.ss-item[b-k15kzjwisj]  .ui-tooltip-region:has(.ss-muted) {
    flex: 1 1 0;
    min-width: 0;
}

.ss-muted[b-k15kzjwisj] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-end[b-k15kzjwisj] {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}
/* frontend/Components/Pages/hr/people/exit/SettlementPayouts.razor.rz.scp.css */
.sp[b-zrd3mhi7ec] {
    margin-top: var(--space-16);
}

.sp-line[b-zrd3mhi7ec] {
    margin: var(--space-4) 0;
}
/* frontend/Components/Pages/hr/people/exit/SettlementSection.razor.rz.scp.css */
[data-testid="settlement-state-banner"][b-rcoe3hlbuo],
[data-testid="settlement-owed-banner"][b-rcoe3hlbuo],
[data-testid="settlement-line-not-found"][b-rcoe3hlbuo] {
    margin: var(--space-8) 0;
}

[data-testid="settlement-total"][b-rcoe3hlbuo] {
    display: inline-flex;
    gap: var(--space-8);
    white-space: nowrap;
}
/* frontend/Components/Pages/hr/people/exit/SettlementSecurityActs.razor.rz.scp.css */
/* The Menu measures its room from its positioned ancestor and refuses to open without one (MENU_PLACEMENT_UNMEASURED). */
.ss-acts-anchor[b-g3yv9j8m8z] {
    position: relative;
    display: inline-flex;
}

.ss-acts-row[b-g3yv9j8m8z] {
    display: inline-flex;
    gap: var(--space-8);
    white-space: nowrap;
}
/* frontend/Components/Pages/hr/people/hub/attendance/AttendanceTab.razor.rz.scp.css */
/* The Attendance tab: the month grid (seven columns, Monday first), the day cells coloured by the cell's data-category (the tokens of TimesheetDayRow's cell, named again here), the glyphs, the outline a counter draws on its days, and the sections' rhythm. Tokens only; states by attribute. */
.at-tab[b-kupkurn9fy] {
    min-width: 0;
}

.at-section[b-kupkurn9fy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.at-h[b-kupkurn9fy] {
    margin: 0;
    font-weight: var(--fw-medium);
}

.at-hint[b-kupkurn9fy] {
    margin: 0;
    color: var(--text-secondary);
}

.at-list[b-kupkurn9fy] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.at-link[b-kupkurn9fy] {
    color: var(--accent);
}

.at-weekdays[b-kupkurn9fy],
.at-grid[b-kupkurn9fy] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-4);
}

.at-weekday[b-kupkurn9fy] {
    text-align: center;
    color: var(--text-secondary);
}

.at-slot[b-kupkurn9fy] {
    min-width: 0;
}

.at-slot[b-kupkurn9fy]  .ui-pop-wrap {
    display: block;
}

.at-day[b-kupkurn9fy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: var(--cell);
    padding: var(--space-4);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
}

.at-day[data-category="Holiday"][b-kupkurn9fy] { background: var(--neutral-bg); }
.at-day[data-category="Leave"][b-kupkurn9fy] { background: var(--heat-leave); }
.at-day[data-category="OffDayWorked"][b-kupkurn9fy] { background: var(--series-6); color: var(--on-accent); }
.at-day[data-category="Off"][b-kupkurn9fy] { background: var(--heat-weekend); }
.at-day[data-category="ChoicePending"][b-kupkurn9fy] { background: var(--warn-bg); }
.at-day[data-category="LopAbsentUnclassified"][b-kupkurn9fy] { background: var(--heat-absent); }
.at-day[data-category="Fine"][b-kupkurn9fy] { background: var(--ok-bg); }

/* a counter outlines the days that used it */
.at-day[data-outlined="true"][b-kupkurn9fy] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.at-day-number[b-kupkurn9fy] {
    font-weight: var(--fw-medium);
}

.at-glyph[b-kupkurn9fy] {
    font-weight: var(--fw-medium);
}

.at-hover[b-kupkurn9fy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 12rem;
}

.at-hover-date[b-kupkurn9fy] {
    margin: 0;
    font-weight: var(--fw-medium);
}

.at-hover-rules[b-kupkurn9fy] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.at-hover-why[b-kupkurn9fy] {
    margin: 0;
}

.at-tiles[b-kupkurn9fy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--space-8);
}

/* the manager figures carry a sentence in their label and "no sessions" as a value: the track is wider than the counters' (13rem; measured at 1280 and 390, a 28px "no sessions" needs a tile of about 203px to stay on one line), the tile itself untouched */
.at-tiles-wide[b-kupkurn9fy] {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.at-panels[b-kupkurn9fy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-12);
    margin-top: var(--space-12);
}

/* the Line host clips its area: widen the body by a ring's reach, padding out and the same margin back, so no outline is cut */
.at-tab[b-kupkurn9fy]  .at-body {
    padding: calc(var(--focus-w) + var(--focus-offset));
    margin: calc(-1 * (var(--focus-w) + var(--focus-offset)));
}

.at-trend-months[b-kupkurn9fy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
}

.at-trend-month[b-kupkurn9fy] {
    min-width: 3rem;
    white-space: nowrap;
}
/* frontend/Components/Pages/hr/people/hub/attendance/PersonScheduleRow.razor.rz.scp.css */
/* The Schedule row: lines that wrap, the history list under them. Tokens only. */
.sr-row[b-k6y7upfa66] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.sr-line[b-k6y7upfa66] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}

.sr-label[b-k6y7upfa66] {
    font-weight: var(--fw-medium);
}

.sr-item[b-k6y7upfa66] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}

.sr-history[b-k6y7upfa66] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.sr-history li[b-k6y7upfa66] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}
/* frontend/Components/Pages/hr/people/hub/timeline/TimelineActivityItems.razor.rz.scp.css */
/* The drawer's activity items: the section's head, the manual break form and the marked row. Tokens only. */
.tl-act-head[b-85c7vyva6n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.tl-act-empty[b-85c7vyva6n] {
    margin: 0;
    color: var(--text-secondary);
}

.tl-act-add[b-85c7vyva6n] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-12);
    margin: var(--space-8) 0;
    padding: var(--space-12);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--fill-1);
}

.tl-act-add-buttons[b-85c7vyva6n] {
    display: flex;
    gap: var(--space-8);
    align-self: flex-end;
}

/* The row the window follows: a fill, as the old list marked its selected row. */
[b-85c7vyva6n] .tl-act-filtered {
    background: var(--accent-soft);
}

/* An open end says so in words; the editor beside it keeps its pencil, and its own "--" for no value is not drawn. */
[data-state="open"][b-85c7vyva6n]  .ui-ie-none {
    display: none;
}
/* frontend/Components/Pages/hr/people/hub/timeline/TimelineAppActivity.razor.rz.scp.css */
/* The drawer's app sections: one bar per app and its rows, and the app data's rows. Tokens only. */
.tl-app-empty[b-o7hx0ilx6l] {
    margin: 0;
    color: var(--text-secondary);
}

.tl-app-item + .tl-app-item[b-o7hx0ilx6l] {
    margin-top: var(--space-8);
}

.tl-app-bar[b-o7hx0ilx6l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12);
}

.tl-app-name[b-o7hx0ilx6l] {
    flex: 0 0 auto;
    min-width: var(--count-w);
    max-width: 100%;
}

.tl-app-rows[b-o7hx0ilx6l] {
    margin: var(--space-4) 0 0 var(--space-24);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tl-app-session[b-o7hx0ilx6l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.tl-app-title[b-o7hx0ilx6l] {
    display: block;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

/* The two sections stand one under the other with the drawer's own gap between them. */
.tl-app + .tl-app[b-o7hx0ilx6l] {
    margin-top: var(--space-24);
}
/* frontend/Components/Pages/hr/people/hub/timeline/TimelineSessionCard.razor.rz.scp.css */
/* The session card's header row and the label over its strip. Tokens only. */
.tl-card-head[b-a1iyo82hal] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12);
}

.tl-card-title[b-a1iyo82hal] {
    flex: 1 1 auto;
}

.tl-card-title-text[b-a1iyo82hal] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.tl-card-label[b-a1iyo82hal] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    margin: var(--space-8) 0 var(--space-4);
}
/* frontend/Components/Pages/hr/people/hub/timeline/TimelineSessionDrawer.razor.rz.scp.css */
/* The session drawer's body: its sections in a column, and the heading and count every section writes in the same way. Tokens only. */
.tl-drawer[b-l6dv107pxh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.tl-drawer-sec[b-l6dv107pxh] {
    min-width: 0;
}

.tl-drawer[b-l6dv107pxh]  .tl-sec-title {
    margin: 0 0 var(--space-8);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-semibold);
}

.tl-drawer[b-l6dv107pxh]  .tl-sec-note {
    font-weight: var(--fw-regular);
}
/* frontend/Components/Pages/hr/people/hub/timeline/TimelineSessionScrubber.razor.rz.scp.css */
.tl-scr[b-qsu73tkqxr] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "line whole" "failures failures" "strip strip" "markers markers" "ends ends" "none none" "legend legend";
    gap: var(--space-8);
    align-items: center;
}

.tl-scr-line[b-qsu73tkqxr] { grid-area: line; color: var(--text); }
.tl-scr-whole[b-qsu73tkqxr] { grid-area: whole; }
.tl-scr-failures[b-qsu73tkqxr] { grid-area: failures; }
/* No token holds 3.5rem (the strip), 0.9rem (the markers row), 0.6rem (a legend swatch) or 0.75rem (a handle): they stay literal. */
.tl-scr-strip[b-qsu73tkqxr] { grid-area: strip; position: relative; height: 3.5rem; user-select: none; touch-action: none; background: var(--fill-1); border: var(--border-w) solid var(--line); border-radius: var(--radius); }
.tl-scr-markers[b-qsu73tkqxr] { grid-area: markers; position: relative; height: 0.9rem; }
.tl-scr-ends[b-qsu73tkqxr] { grid-area: ends; display: flex; justify-content: space-between; color: var(--text-secondary); }
.tl-scr-none[b-qsu73tkqxr] { grid-area: none; color: var(--text-secondary); }
.tl-scr-legend[b-qsu73tkqxr] { grid-area: legend; display: flex; flex-wrap: wrap; gap: var(--space-12); color: var(--text-secondary); }
.tl-scr-legend span[b-qsu73tkqxr] { display: inline-flex; align-items: center; gap: var(--space-4); }
.tl-scr-legend i[b-qsu73tkqxr] { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: var(--space-2); }

.tl-scr-segments[b-qsu73tkqxr] { position: absolute; left: 0; right: 0; top: 0; height: 40%; overflow: hidden; }
.tl-scr-segments > [data-testid="scrubber-segment"][b-qsu73tkqxr] { position: absolute; top: 0; bottom: 0; }
[data-kind="Working"][b-qsu73tkqxr] { background: var(--ok); }
[data-kind="Idle"][b-qsu73tkqxr] { background: var(--warn); }
[data-kind="ManualBreak"][b-qsu73tkqxr] { background: var(--neutral); }
[data-kind="Break"][b-qsu73tkqxr], [data-kind="AutoBreak"][b-qsu73tkqxr] { background: var(--info); }
[data-kind="density"][b-qsu73tkqxr] { background: var(--info); opacity: 0.65; }
/* No token holds the hatch's 3px and 6px stripes: they stay literal. */
[data-kind="gap"][b-qsu73tkqxr] { background: repeating-linear-gradient(45deg, var(--text) 0 3px, transparent 3px 6px); }
[data-kind="overlap"][b-qsu73tkqxr] { background: var(--error); }

.tl-scr-density[b-qsu73tkqxr] { position: absolute; left: 0; right: 0; top: 40%; height: 30%; display: flex; align-items: flex-end; gap: var(--border-w); }
.tl-scr-density > div[b-qsu73tkqxr] { flex: 1 1 0; background: var(--info); opacity: 0.65; }

.tl-scr-marks[b-qsu73tkqxr] { position: absolute; left: 0; right: 0; top: 70%; bottom: 0; }
.tl-scr-marks > div[b-qsu73tkqxr] { position: absolute; bottom: 0; width: var(--space-2); height: 40%; background: var(--text-secondary); }
.tl-scr-marks > div[data-state="merged"][b-qsu73tkqxr] { height: 100%; }
.tl-scr-marks-place[b-qsu73tkqxr] { position: absolute; left: 0; right: 0; top: 40%; bottom: 0; }

.tl-scr-markers > div[b-qsu73tkqxr] { position: absolute; top: 0; bottom: 0; cursor: pointer; border-radius: var(--space-2); }
/* The hatch's 3px and 6px stripes are the same literals as the legend swatch's: no token holds them. */
.tl-scr-markers > [data-testid="scrubber-gap-marker"][b-qsu73tkqxr] { background: repeating-linear-gradient(45deg, var(--text) 0 3px, transparent 3px 6px); border: var(--border-w) solid var(--text); }
.tl-scr-markers > [data-testid="scrubber-overlap-marker"][b-qsu73tkqxr] { background: var(--error); }

.tl-scr-band[b-qsu73tkqxr] { position: absolute; top: 0; bottom: 0; pointer-events: none; background: var(--accent-soft); border-left: var(--focus-w) solid var(--accent); border-right: var(--focus-w) solid var(--accent); box-sizing: border-box; }
.tl-scr-cells[b-qsu73tkqxr] { position: absolute; inset: 0; display: flex; cursor: col-resize; }
.tl-scr-cells > div[b-qsu73tkqxr] { flex: 1 1 0; height: 100%; }

.tl-scr-handle[b-qsu73tkqxr] { position: absolute; top: 0; bottom: 0; width: 0.75rem; transform: translateX(-50%); background: var(--surface); border: var(--focus-w) solid var(--accent); border-radius: var(--radius); box-sizing: border-box; cursor: ew-resize; }
.tl-scr-handle:focus-visible[b-qsu73tkqxr] { outline: var(--focus-w) solid var(--accent); outline-offset: var(--focus-offset); }
/* frontend/Components/Pages/hr/people/hub/timeline/TimelineShotGrid.razor.rz.scp.css */
/* The drawer's screenshot grid: controls, hour rows and tiles. Tokens only, except the sizes no token holds (a tile's width, height and the row's height, which Virtualize needs exact). */
.tl-shots-controls[b-3rkjppyu1g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-16);
    margin-bottom: var(--space-8);
}

.tl-shots-empty[b-3rkjppyu1g] {
    color: var(--text-secondary);
    margin: 0;
}

.tl-shots-scroll[b-3rkjppyu1g] {
    max-height: 60vh;
    overflow-y: auto;
}

.tl-shot-row[b-3rkjppyu1g] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
}

.tl-shot-hour[b-3rkjppyu1g] {
    flex: 0 0 auto;
    position: sticky;
    left: 0;
    background: var(--surface);
    width: var(--space-48);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.tl-shot-tiles[b-3rkjppyu1g] {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-8);
}

.tl-shot[b-3rkjppyu1g] {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.tl-shot-open[b-3rkjppyu1g] {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: zoom-in;
}

.tl-shot-img[b-3rkjppyu1g],
.tl-shot-box[b-3rkjppyu1g] {
    display: block;
    object-fit: cover;
    border-radius: var(--radius);
}

.tl-shot-box[b-3rkjppyu1g] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    overflow: hidden;
    background: var(--fill-1);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    text-align: center;
}

.tl-shot-time[b-3rkjppyu1g] {
    height: var(--lh-small);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

/* No token holds a tile's 160 x 100, 240 x 150 or 360 x 225 pixels, or the row heights Virtualize is given (the tile, its caption line and its padding): they stay literal. */
[data-size="S"] .tl-shot-row[b-3rkjppyu1g] { height: 128px; }
[data-size="S"] .tl-shot-img[b-3rkjppyu1g], [data-size="S"] .tl-shot-box[b-3rkjppyu1g] { width: 160px; height: 100px; }
[data-size="M"] .tl-shot-row[b-3rkjppyu1g] { height: 178px; }
[data-size="M"] .tl-shot-img[b-3rkjppyu1g], [data-size="M"] .tl-shot-box[b-3rkjppyu1g] { width: 240px; height: 150px; }
[data-size="L"] .tl-shot-row[b-3rkjppyu1g] { height: 253px; }
[data-size="L"] .tl-shot-img[b-3rkjppyu1g], [data-size="L"] .tl-shot-box[b-3rkjppyu1g] { width: 360px; height: 225px; }
/* frontend/Components/Pages/hr/people/hub/timesheet/TimesheetChunkList.razor.rz.scp.css */
/* The chunk list: rows for a monthly or weekly month, a wrapping strip of day glyphs for a daily one, each glyph coloured by its data-reporting. Tokens only. */
.ts-chunk-rows[b-bnfha6uxz1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ts-chunk-row[b-bnfha6uxz1] {
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.ts-chunk-row[data-selected="true"][b-bnfha6uxz1] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.ts-chunk-choose[b-bnfha6uxz1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4) var(--space-12);
    width: 100%;
    min-height: var(--control-h);
    padding: var(--space-8) var(--space-12);
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ts-chunk-choose:focus-visible[b-bnfha6uxz1],
.ts-glyph:focus-visible[b-bnfha6uxz1] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ts-chunk-label[b-bnfha6uxz1] {
    font-weight: var(--fw-medium);
}

.ts-chunk-dates[b-bnfha6uxz1],
.ts-chunk-state[b-bnfha6uxz1] {
    color: var(--text-secondary);
}

.ts-glyphs[b-bnfha6uxz1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.ts-glyph[b-bnfha6uxz1] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: var(--control-h);
    min-height: var(--control-h);
    padding: var(--space-2) var(--space-4);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--fill-1);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.ts-glyph-marks[b-bnfha6uxz1] {
    display: flex;
    gap: var(--space-2);
    min-height: var(--lh-caption);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
}

.ts-glyph[data-selected="true"][b-bnfha6uxz1] {
    border-color: var(--accent);
}

.ts-glyph[data-reporting="OnTime"][b-bnfha6uxz1] { background: var(--ok-bg); }
.ts-glyph[data-reporting="Late"][b-bnfha6uxz1] { background: var(--warn-bg); }
.ts-glyph[data-reporting="MissingOpen"][b-bnfha6uxz1],
.ts-glyph[data-reporting="MissingLocked"][b-bnfha6uxz1] { background: var(--error-bg); }
/* frontend/Components/Pages/hr/people/hub/timesheet/TimesheetCoverControls.razor.rz.scp.css */
/* The cover controls of a day row: one line per offered cover and per live comp-off application, then the inline refusal. Tokens only. */
.ts-covers[b-e19wxo1q79] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ts-cover[b-e19wxo1q79] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-8);
}

.ts-cover-hint[b-e19wxo1q79] {
    margin: 0;
    color: var(--text-secondary);
}

.ts-cover-chosen[b-e19wxo1q79] {
    font-weight: var(--fw-medium);
}
/* frontend/Components/Pages/hr/people/hub/timesheet/TimesheetDayRow.razor.rz.scp.css */
/* The day row: the head line, the category-coloured cell (one token per category of TimesheetDayCells, by the cell's data-category; data-state stays for the tests), the track's place, the opened sessions and the breakdown. The landed day's outline is shell-frame.css's ui-landed on the tab's slot,
   never this row's own (STD:frontend/css r7). Tokens only. */
.ts-day[b-2am457v5bf] {
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: var(--space-8) var(--space-12);
}

.ts-day-head[b-2am457v5bf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8) var(--space-12);
}

.ts-day-cell[b-2am457v5bf] {
    min-width: var(--cell);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius);
    font-weight: var(--fw-medium);
    text-align: center;
}

.ts-day-cell[data-category="Holiday"][b-2am457v5bf] { background: var(--neutral-bg); }
.ts-day-cell[data-category="Leave"][b-2am457v5bf] { background: var(--heat-leave); }
.ts-day-cell[data-category="OffDayWorked"][b-2am457v5bf] { background: var(--series-6); color: var(--on-accent); }
.ts-day-cell[data-category="Off"][b-2am457v5bf] { background: var(--heat-weekend); }
.ts-day-cell[data-category="ChoicePending"][b-2am457v5bf] { background: var(--warn-bg); }
.ts-day-cell[data-category="LopAbsentUnclassified"][b-2am457v5bf] { background: var(--heat-absent); }
.ts-day-cell[data-category="Fine"][b-2am457v5bf] { background: var(--ok-bg); }

.ts-day-hours[b-2am457v5bf] {
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.ts-day-count[b-2am457v5bf] {
    color: var(--text-secondary);
}

.ts-day-text[b-2am457v5bf] {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ts-link[b-2am457v5bf] {
    color: var(--accent);
}

.ts-day-track[b-2am457v5bf],
.ts-day-detail[b-2am457v5bf] {
    margin-top: var(--space-8);
}

.ts-day-empty[b-2am457v5bf] {
    margin: 0;
    color: var(--text-secondary);
}

.ts-sessions[b-2am457v5bf] {
    list-style: none;
    margin: 0 0 var(--space-8);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ts-session[b-2am457v5bf] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4) var(--space-12);
    padding-bottom: var(--space-8);
    border-bottom: var(--border-w) solid var(--line);
}

.ts-session-id[b-2am457v5bf] {
    font-weight: var(--fw-medium);
}

.ts-session-task[b-2am457v5bf],
.ts-session-apps[b-2am457v5bf] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ts-session-apps[b-2am457v5bf] {
    color: var(--text-secondary);
}

.ts-breakdown[b-2am457v5bf] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.ts-breakdown th[b-2am457v5bf],
.ts-breakdown td[b-2am457v5bf] {
    padding: var(--space-4) var(--space-8);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    border-bottom: var(--border-w) solid var(--line);
}

.ts-breakdown th[b-2am457v5bf] {
    color: var(--text-secondary);
    font-weight: var(--fw-medium);
}

/* The own action bar: the controls stack under the breakdown, each drawing nothing when it has nothing to offer. */
.ts-day-actions[b-2am457v5bf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin-top: var(--space-12);
    min-width: 0;
}
/* frontend/Components/Pages/hr/people/hub/timesheet/TimesheetDayTrack.razor.rz.scp.css */
/* The day track: a bar the height of a timeline day, the slots as outlines and the segments placed by their share of the window (the inline left and width are computed at run time). One existing layer token per kind; a manual segment adds the layer's
   segment line as a hatch over its kind. Tokens only (STD:frontend/design-tokens r1). */
.ts-track[b-nyz5hgrmzj] {
    position: relative;
    height: var(--day-h);
    background: var(--fill-1);
    border-radius: var(--radius);
}

.ts-track-slot[b-nyz5hgrmzj] {
    position: absolute;
    top: 0;
    bottom: 0;
    border: var(--border-w) solid var(--placeholder);
    border-radius: var(--radius);
    box-sizing: border-box;
}

.ts-track-seg[b-nyz5hgrmzj] {
    position: absolute;
    top: var(--space-4);
    bottom: var(--space-4);
}

.ts-track-seg[b-nyz5hgrmzj]  .ui-tooltip-region,
.ts-track-fill[b-nyz5hgrmzj] {
    display: block;
    width: 100%;
    height: 100%;
}

.ts-track-fill[b-nyz5hgrmzj] { border-radius: var(--radius); }

.ts-track-fill[data-manual="true"][b-nyz5hgrmzj] {
    background-image: repeating-linear-gradient(135deg, var(--seg-line) 0, var(--seg-line) var(--space-2), transparent var(--space-2), transparent var(--space-4));
}

.ts-track-fill[data-kind="Worked"][b-nyz5hgrmzj] { background-color: var(--ok); }
.ts-track-fill[data-kind="Overtime"][b-nyz5hgrmzj] { background-color: var(--series-5); }
.ts-track-fill[data-kind="OvertimeWithoutPay"][b-nyz5hgrmzj] { background-color: var(--series-6); }
.ts-track-fill[data-kind="CompOffEarned"][b-nyz5hgrmzj] { background-color: var(--series-8); }
.ts-track-fill[data-kind="ScheduledBreak"][b-nyz5hgrmzj] { background-color: var(--neutral); }
.ts-track-fill[data-kind="MicroBreak"][b-nyz5hgrmzj] { background-color: var(--placeholder); }
.ts-track-fill[data-kind="Incident"][b-nyz5hgrmzj] { background-color: var(--warn); }
.ts-track-fill[data-kind="Emergency"][b-nyz5hgrmzj] { background-color: var(--error); }
.ts-track-fill[data-kind="AutoBreakUnclassified"][b-nyz5hgrmzj] { background-color: var(--series-4); }
.ts-track-fill[data-kind="Missing"][b-nyz5hgrmzj] { background-color: var(--series-7); }
.ts-track-fill[data-kind="SlotNotWorked"][b-nyz5hgrmzj] { background-color: var(--line-hover); }
.ts-track-fill[data-kind="Tail"][b-nyz5hgrmzj] { background-color: var(--accent); }
.ts-track-fill[data-kind="LeaveBand"][b-nyz5hgrmzj] { background-color: var(--heat-leave); }
.ts-track-fill[data-kind="HolidayBand"][b-nyz5hgrmzj] { background-color: var(--neutral-bg); }
/* frontend/Components/Pages/hr/people/hub/timesheet/TimesheetManualTimeDrawer.razor.rz.scp.css */
/* The manual-time drawer's body: the five fields stacked, then the refusal banner. Tokens only. */
.ts-manual[b-62yi62fcuj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}
/* frontend/Components/Pages/hr/people/hub/timesheet/TimesheetReportHost.razor.rz.scp.css */
/* The report host: the report and, under it, the totals' comparison. Tokens only. */
.ts-report[b-9wht3nlsb2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}
/* frontend/Components/Pages/hr/people/hub/timesheet/TimesheetRetroIncident.razor.rz.scp.css */
/* The retro-incident control of a day row: the opener and, once opened, its panel with the offered spans (or the gap), the kind and the action. Tokens only. */
.ts-retro[b-vodtiotp6j] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
}

.ts-retro-panel[b-vodtiotp6j] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: 28rem;
    padding: var(--space-8);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

.ts-retro-gap[b-vodtiotp6j] {
    font-weight: var(--fw-medium);
}

.ts-retro-actions[b-vodtiotp6j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}
/* frontend/Components/Pages/hr/people/hub/timesheet/TimesheetSelfAcks.razor.rz.scp.css */
/* The self-acknowledgement lines of a day row: the breach's words, then its reason tag and Acknowledge. Tokens only. */
.ts-self-acks[b-uk9u5uuaov] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ts-self-ack[b-uk9u5uuaov] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ts-self-ack-text[b-uk9u5uuaov] {
    display: flex;
    flex-direction: column;
}

.ts-self-ack-title[b-uk9u5uuaov] {
    font-weight: var(--fw-medium);
}

.ts-self-ack-act[b-uk9u5uuaov] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-8);
}
/* frontend/Components/Pages/hr/people/hub/timesheet/TimesheetSpanControls.razor.rz.scp.css */
/* The span controls of a day row: one block per idle span with its range, its three choices and, once one is opened, its inline editor. Tokens only. */
.ts-spans[b-9h3rlojsv4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ts-span[b-9h3rlojsv4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ts-span-label[b-9h3rlojsv4] {
    font-weight: var(--fw-medium);
}

.ts-span-choices[b-9h3rlojsv4],
.ts-span-actions[b-9h3rlojsv4],
.ts-span-discard[b-9h3rlojsv4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.ts-span-editor[b-9h3rlojsv4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: 28rem;
    padding: var(--space-8);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}
/* frontend/Components/Pages/hr/people/hub/timesheet/TimesheetStrip.razor.rz.scp.css */
/* The gate strip: the six rules as a list with their items under the unmet ones, then Submit and the statement. Tokens only. */
.ts-strip[b-2tkx42zzcm] {
    border: var(--border-w) solid var(--line);
    padding: var(--space-12);
    min-width: 0;
}

.ts-strip-rules[b-2tkx42zzcm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ts-strip-rule-head[b-2tkx42zzcm] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-8);
}

.ts-strip-rule-label[b-2tkx42zzcm] {
    font-weight: var(--fw-semibold);
}

.ts-strip-rule[data-met="true"] .ts-strip-rule-mark[b-2tkx42zzcm] {
    color: var(--ok);
}

.ts-strip-rule[data-met="false"] .ts-strip-rule-mark[b-2tkx42zzcm] {
    color: var(--warn);
}

.ts-strip-rule-count[b-2tkx42zzcm] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ts-strip-items[b-2tkx42zzcm] {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-24);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ts-strip-statement[b-2tkx42zzcm] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/hr/people/hub/timesheet/TimesheetTab.razor.rz.scp.css */
/* The Timesheet tab's frame: the empty named places take no room until a later task fills them, and the day table's tools and rows stack. The landed day's slot takes ui-landed, whose outline is shell-frame.css's alone
   (STD:frontend/css r7), so no rule here draws or removes a ring. Tokens only. */
.ts-place:empty[b-pb4e9sirx7] {
    display: none;
}

/* The two parts that stay in view while the day table scrolls: a sticky element sticks only inside its parent, so each named place wraps exactly its part (the part itself never moves). */
.ts-place[data-place="strip"][b-pb4e9sirx7] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
}

.ts-place[data-place="totals"][b-pb4e9sirx7] {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--surface);
}

.ts-days[b-pb4e9sirx7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.ts-days-tools[b-pb4e9sirx7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.ts-slot[b-pb4e9sirx7] {
    min-width: 0;
}

/* The month under the busy line: the Line host clips its area (overflow: hidden) and the landed slot's ring, like a button's focus ring, is drawn outside the element. The body is
   widened by a ring's reach, padding out and the same margin back, so nothing moves and no ring is cut. overflow: clip (the host's hidden otherwise) still clips the busy line's sweep but makes no scroll container, which would hold the sticky places still. */
.ts-tab[b-pb4e9sirx7]  .ts-month-body {
    overflow: clip;
    padding: calc(var(--focus-w) + var(--focus-offset));
    margin: calc(-1 * (var(--focus-w) + var(--focus-offset)));
}
/* frontend/Components/Pages/hr/people/hub/timesheet/TimesheetTotalsRow.razor.rz.scp.css */
/* The totals row: the chunk's eight figures at the foot of the day table, bold, a one-pixel top rule (catalogue row 19's footer look). Tokens only. */
.ts-totals[b-6ib8j3wgsw] {
    border-top: var(--border-w) solid var(--line);
    padding: var(--space-8) 0;
    font-weight: var(--fw-semibold);
    min-width: 0;
}

.ts-totals-list[b-6ib8j3wgsw] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-24);
}

.ts-fig[b-6ib8j3wgsw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.ts-fig-label[b-6ib8j3wgsw] {
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    color: var(--text-secondary);
}

.ts-fig-value[b-6ib8j3wgsw] {
    margin: 0;
    font-size: var(--fs-body);
}
/* frontend/Components/Pages/hr/people/hub/timesheet/TimesheetUnlinkedSessions.razor.rz.scp.css */
/* The unlinked sessions: a heading and one line per session, each the layer's inline named error (its own styles). Tokens only. */
.ts-unlinked-head[b-q6yqoohwaw] {
    margin: 0 0 var(--space-8);
    font-size: var(--fs-heading-md);
    line-height: var(--lh-heading-md);
    font-weight: var(--fw-semibold);
}

.ts-unlinked-list[b-q6yqoohwaw] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
/* frontend/Components/Pages/hr/people/ImportantTab.razor.rz.scp.css */
.person-hub-tab-card[b-ajfjtwqwlj] {
    flex: 1 1 auto;
    min-width: 0;
}
/* frontend/Components/Pages/hr/people/pay/PayStructureSection.razor.rz.scp.css */
.pss-chain[b-p9pb6j1g4a] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-8);
}

.pss-card[b-p9pb6j1g4a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.pss-title-row[b-p9pb6j1g4a] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.pss-acts[b-p9pb6j1g4a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.pss-meta[b-p9pb6j1g4a],
.pss-label[b-p9pb6j1g4a],
.pss-arrow[b-p9pb6j1g4a] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.pss-components[b-p9pb6j1g4a] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pss-components li[b-p9pb6j1g4a] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-12);
}

.pss-amount[b-p9pb6j1g4a] {
    font-variant-numeric: tabular-nums;
}

.pss-probation[b-p9pb6j1g4a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-12);
}
/* frontend/Components/Pages/hr/people/performance/PerformanceObservationAdd.razor.rz.scp.css */
/* The wrapper around the Add observation button: a box of its own, so the landed outline draws around the button and not around a line box. Tokens only. */
.perf-obs-add-wrap[b-8iwudeo1pv] {
    display: inline-flex;
    border-radius: var(--radius);
}
/* frontend/Components/Pages/hr/people/performance/PerformanceObservationReverseDialog.razor.rz.scp.css */
/* The Reverse dialog's measure: the line naming the row being reversed. Tokens only. */
.perf-obs-reverse-row[b-8ze07mmo14] { margin: 0; color: var(--text-secondary); }
/* frontend/Components/Pages/hr/people/performance/PerformanceObservations.razor.rz.scp.css */
/* The observations' measure: a row's text with its line breaks and a reversed row's strike, the lines under a row, and the badge chip. Tokens only. */
.perf-obs-text[b-kwaabd8cjb] { white-space: pre-wrap; }
.perf-obs-text[data-state="reversed"][b-kwaabd8cjb] { text-decoration: line-through; color: var(--text-secondary); }
.perf-obs-reversed[b-kwaabd8cjb], .perf-obs-added[b-kwaabd8cjb] { color: var(--text-secondary); font-size: var(--fs-small); }
.perf-obs-badge[b-kwaabd8cjb] { display: inline-flex; align-items: center; gap: var(--space-4); }
/* frontend/Components/Pages/hr/people/performance/PerformanceRuleEvidence.razor.rz.scp.css */
/* A standing rule's expansion below the standing's grid: its items, its code and its empty line. Tokens only. */
.perf-rule-evidence[b-kv2c3u2ffu] {
    margin-top: var(--space-12);
}

.perf-rule-evidence-items[b-kv2c3u2ffu] {
    margin: 0;
    padding-left: var(--space-16);
}

.perf-rule-evidence-code[b-kv2c3u2ffu] {
    margin: 0;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
}

.perf-rule-evidence-none[b-kv2c3u2ffu] {
    margin: 0;
    color: var(--text-secondary);
}
/* frontend/Components/Pages/hr/people/performance/PerformanceScoreHistory.razor.rz.scp.css */
/* The score history's dates under a timeframe's name, and its line for no closed timeframe. Tokens only. */
.perf-score-dates[b-awuyhbn2oj] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.perf-score-none[b-awuyhbn2oj] {
    margin: 0;
    color: var(--text-secondary);
}
/* frontend/Components/Pages/hr/people/performance/PerformanceStanding.razor.rz.scp.css */
/* The standing's second lines under a rule's sentence. Tokens only. */
.perf-standing-window[b-wqrrxdb4ni] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.perf-standing-code[b-wqrrxdb4ni] {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/hr/people/performance/PerformanceTab.razor.rz.scp.css */
/* The Performance tab's measure: the team view line, and the tab's two sentences. Tokens only. */
.perf-item-missing[b-u0ogfbtoqg] {
    margin: 0;
    color: var(--text-secondary);
}

.perf-not-assigned[b-u0ogfbtoqg] {
    margin: 0;
}

.perf-team-view[b-u0ogfbtoqg] {
    display: flex;
    justify-content: flex-end;
}
/* frontend/Components/Pages/hr/people/performance/PerformanceWarningEvidence.razor.rz.scp.css */
/* A warning's evidence cell: its lines wrap inside their column. Tokens only. */
.perf-warning-evidence[b-kz2lw1vuz9] {
    flex: 1 1 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.perf-warning-evidence-lines[b-kz2lw1vuz9] {
    margin: 0;
    padding-left: var(--space-16);
}
/* frontend/Components/Pages/hr/people/performance/PerformanceWarnings.razor.rz.scp.css */
/* The warnings' mail text opened below the table, a recipient cell's code, the line for no warning, and the rows that grow to their evidence. Tokens only. */
.perf-warnings-none[b-afsldha6q3] {
    margin: 0;
    color: var(--text-secondary);
}

.perf-warnings-code[b-afsldha6q3] {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
}

.perf-warnings-mail[b-afsldha6q3] {
    margin-top: var(--space-12);
    padding: var(--space-12);
    background: var(--fill-1);
}

.perf-warnings-text[b-afsldha6q3] {
    margin: 0;
    white-space: pre-wrap;
}

/* A row holding a warning's evidence grows as its lines wrap. The Grid forces every row to one height, so the two height rules below are forced too; nothing else is. The cell keeps the Grid's overflow, so the lines wrap inside their column and never spill into the next cell. */
.perf-warnings[b-afsldha6q3]  table.ui-grid > tbody > tr.fluent-data-grid-row:has(.perf-warning-evidence) { grid-template-rows: none !important; height: auto !important; }
.perf-warnings[b-afsldha6q3]  table.ui-grid > tbody > tr.fluent-data-grid-row:has(.perf-warning-evidence) > td { height: auto !important; min-height: var(--row-h); flex-wrap: wrap; }
/* frontend/Components/Pages/hr/people/PersonHubHeader.razor.rz.scp.css */
/* The profile hub header's own measure (W:hr-profile-hub/T-03): the person's name. Tokens only. */
.person-hub-name[b-u5bbuikt7x] {
    font-size: var(--fs-title);
    font-weight: var(--fw-semibold);
}
/* frontend/Components/Pages/hr/people/policy/PersonPolicySection.razor.rz.scp.css */
/* The profile policy section. Tokens only; spacing comes from the layer. */
.pps-pick[b-l0c8gl678b] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}
/* frontend/Components/Pages/hr/people/security/SecurityAddDrawer.razor.rz.scp.css */
.sad-form[b-f4xg9py7bb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

.sad-money[b-f4xg9py7bb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
    align-items: end;
}

.sad-currency[b-f4xg9py7bb] {
    padding-bottom: var(--space-8);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.sad-planned[b-f4xg9py7bb],
.sad-note[b-f4xg9py7bb],
.sad-count[b-f4xg9py7bb],
.sad-label[b-f4xg9py7bb] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.sad-error[b-f4xg9py7bb] {
    color: var(--error);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/hr/people/security/SecurityCardView.razor.rz.scp.css */
.scv-card[b-eg9cv8ifhs] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-12);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.scv-top[b-eg9cv8ifhs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.scv-main[b-eg9cv8ifhs] {
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-semibold);
    overflow-wrap: anywhere;
}

.scv-line[b-eg9cv8ifhs] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.scv-card--wide[b-eg9cv8ifhs] {
    grid-column: 1 / -1;
}
/* frontend/Components/Pages/hr/people/security/SecurityRecordDrawer.razor.rz.scp.css */
.srd-form[b-kip6pas8sw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

.srd-row[b-kip6pas8sw] {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
    min-height: var(--row-h);
    padding: 0 var(--space-8);
}

.srd-key[b-kip6pas8sw] {
    flex: 0 0 var(--edit-key-w);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.srd-val[b-kip6pas8sw] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}

.srd-muted[b-kip6pas8sw],
.srd-hint[b-kip6pas8sw] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.srd-hint[b-kip6pas8sw] {
    display: block;
    line-height: var(--lh-small);
    padding-inline-start: calc(var(--space-8) * 2 + var(--edit-key-w));
    padding-inline-end: var(--space-8);
}

/* below the layer's one narrow width the editors stack the key above the value (InlineEdit.razor.css), so these rows do too */
@media (max-width: 899.98px) {
    .srd-row[b-kip6pas8sw] {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .srd-key[b-kip6pas8sw] {
        flex-basis: 100%;
    }

    .srd-hint[b-kip6pas8sw] {
        padding-inline-start: var(--space-8);
    }
}
/* frontend/Components/Pages/hr/people/security/SecurityResolveDialog.razor.rz.scp.css */
.srd-body[b-apkkmym2k6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.srd-text[b-apkkmym2k6] {
    margin: 0;
    color: var(--text);
}

.srd-figure[b-apkkmym2k6] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.srd-label[b-apkkmym2k6] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.srd-amount[b-apkkmym2k6] {
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}
/* frontend/Components/Pages/hr/people/security/SecurityScheduleTable.razor.rz.scp.css */
.sst-scroll[b-q9l3ze3g7i] {
    overflow-x: auto;
    width: 0;
    min-width: 100%;
    --ui-grid-sticky-top: 0px;
}

.sst-outcome[b-q9l3ze3g7i] {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    gap: var(--space-8);
}

.sst-code[b-q9l3ze3g7i],
.sst-note[b-q9l3ze3g7i] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Pages/hr/people/security/SecuritySection.razor.rz.scp.css */
.sec-bar[b-l654mxb24v] {
    display: flex;
    justify-content: flex-start;
    margin-bottom: var(--space-12);
}

.sec-grid[b-l654mxb24v] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--space-12);
    align-items: start;
}
/* frontend/Components/Pages/hr/performance/HRReview.razor.rz.scp.css */
/* The select takes the width the Show Details button leaves; on a narrow screen it takes the whole row and the button wraps below it. */
.hrr-select[b-g097wmr8or] {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 899.98px) {
    .hrr-select[b-g097wmr8or] {
        flex-basis: 100%;
    }
}
/* frontend/Components/Pages/hr/performance/KraTimeframeDeleteDialog.razor.rz.scp.css */
/* The timeframe delete dialog's own rule: the sentence above the input keeps the dialog's body rhythm. */
.kra-tf-del-line[b-gi60avbl8g] {
    margin: var(--space-12) 0;
}
/* frontend/Components/Pages/hr/performance/KraTimeframes.razor.rz.scp.css */
/* The KRA timeframes page's own few rules (KraTimeframes.razor). Tokens only; the busy indicator dims the table, the page itself dims no row. */
.kratf-ellipsis[b-d9hpp5xfkl] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kratf-id[b-d9hpp5xfkl] {
    color: var(--text-secondary);
}

.kratf-add-place[b-d9hpp5xfkl] {
    display: inline-block;
    min-width: 72px;
    height: var(--control-h, 32px);
}
/* frontend/Components/Pages/hr/performance/Skills.razor.rz.scp.css */
/* The skills page. Tokens only; every measure of the tab strip, the table, the toolbar and the pager is the layer's own. */

.skills-page[b-5w7y27eg72] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.skills-page[b-5w7y27eg72]  .ui-pageheader-band {
    margin-bottom: calc(var(--content-pad) - var(--page-gap));
}

.skills-page[b-5w7y27eg72]  .ui-toolbar {
    margin-bottom: 0;
}

.skills-panel[b-5w7y27eg72] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

/* A name, a slug, a group and a description end in an ellipsis when the cell is full; the full text is in the tooltip, which shows only when the text is cut. */
.skills-ellipsis[b-5w7y27eg72] {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skills-muted[b-5w7y27eg72] {
    display: block;
    color: var(--text-secondary);
}

.skills-namecell[b-5w7y27eg72] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

@media (max-width: 899.98px) {
    .skills-page[b-5w7y27eg72]  .ui-pageheader-main {
        flex-wrap: wrap;
    }
}
/* frontend/Components/Pages/hr/performance/SkillTemplateDrawer.razor.rz.scp.css */
/* The skill template drawer. Tokens only. The skills list at rest is plain lines of names, one per skill; its empty words are muted. */

.st-skill-line[b-v25txs4yr2] {
    color: var(--text);
}

.st-skill-none[b-v25txs4yr2] {
    color: var(--text-secondary);
}

.st-skills-head[b-v25txs4yr2] {
    margin-top: var(--space-16);
    margin-bottom: var(--space-8);
    font-weight: var(--fw-medium);
}
/* frontend/Components/Pages/hr/performance/SkillTemplates.razor.rz.scp.css */
/* The skill templates list page. Tokens only; every measure of the table, the toolbar and the pager is the layer's own. A long name wraps: the page sets no one-line rule on it. */

.st-page[b-xovbqk8udq] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

.st-page[b-xovbqk8udq]  .ui-pageheader-band {
    margin-bottom: calc(var(--content-pad) - var(--page-gap));
}

.st-page[b-xovbqk8udq]  .ui-toolbar {
    margin-bottom: 0;
}

@media (max-width: 899.98px) {
    .st-page[b-xovbqk8udq]  .ui-pageheader-main {
        flex-wrap: wrap;
    }
}

/* The VIEW-only Name cell: one line with an ellipsis; the full name is row 27's tooltip while it is cut (AC-68). With MANAGE the cell is the in-cell Open action, which draws its own. */
.st-ellipsis[b-xovbqk8udq] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* frontend/Components/Pages/hr/policy/compoff/CompOffPolicyCards.razor.rz.scp.css */
.compoff-calc[b-iecjckmjwk] {
    display: grid;
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
    gap: var(--space-4) var(--space-12);
    margin: var(--space-8) 0;
}

.compoff-calc > *[b-iecjckmjwk] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.compoff-calc-l[b-iecjckmjwk] {
    overflow-wrap: anywhere;
    color: var(--text-secondary);
}

.compoff-ledger[b-iecjckmjwk] {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-8) 0;
}

.compoff-ledger-row[b-iecjckmjwk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-12);
}

.compoff-ledger-row > *[b-iecjckmjwk] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.compoff-ledger-head[b-iecjckmjwk] {
    color: var(--text-secondary);
}

.compoff-num[b-iecjckmjwk] {
    text-align: end;
    font-variant-numeric: tabular-nums;
}
/* frontend/Components/Pages/hr/policy/compoff/CompOffPolicyForm.razor.rz.scp.css */
.compoff-fields[b-1hn357lxc4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12) var(--space-16);
}

.compoff-amount[b-1hn357lxc4] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-12);
}

.compoff-amount > *[b-1hn357lxc4] {
    min-width: 0;
}

.compoff-amount > :first-child[b-1hn357lxc4] {
    flex: 1 1 100%;
}
/* frontend/Components/Pages/hr/policy/Exit/ExitPolicyCards.razor.rz.scp.css */
.exit-calc[b-u8jyy9lnwh] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-4) var(--space-16);
    margin: var(--space-8) 0;
}

.exit-calc-l[b-u8jyy9lnwh] {
    color: var(--text-secondary);
}

.exit-gate-items[b-u8jyy9lnwh] {
    list-style: none;
    margin: var(--space-4) 0 var(--space-8);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.exit-gate-n[b-u8jyy9lnwh] {
    color: var(--text-secondary);
    margin-right: var(--space-4);
}
/* frontend/Components/Pages/hr/policy/Exit/ExitPolicyForm.razor.rz.scp.css */
.exit-fields[b-jsztxe2mq9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12) var(--space-16);
}
/* frontend/Components/Pages/hr/policy/LeaveBalance/LeaveBalancePolicyForm.razor.rz.scp.css */
.lb-rows[b-8mdjbwqgvy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.lb-flags[b-8mdjbwqgvy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12) var(--space-16);
}

.lb-line[b-8mdjbwqgvy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-12) var(--space-16);
}

.lb-amount[b-8mdjbwqgvy] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-12);
}

.lb-amount > *[b-8mdjbwqgvy] {
    min-width: 0;
}

.lb-amount > :first-child[b-8mdjbwqgvy] {
    flex: 1 1 100%;
}
/* frontend/Components/Pages/hr/policy/Monitoring/MonitoringPolicyCards.razor.rz.scp.css */
.monitoring-calc[b-0sj27wgf0a] {
    display: grid;
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
    gap: var(--space-4) var(--space-12);
    margin: var(--space-8) 0;
}

.monitoring-calc > *[b-0sj27wgf0a] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.monitoring-calc-l[b-0sj27wgf0a] {
    overflow-wrap: anywhere;
    color: var(--text-secondary);
}
/* frontend/Components/Pages/hr/policy/Monitoring/MonitoringPolicyForm.razor.rz.scp.css */
.monitoring-fields[b-46vi4eps70] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12) var(--space-16);
}
/* frontend/Components/Pages/hr/policy/payroll/PayrollPolicyForm.razor.rz.scp.css */
.payroll-fields[b-yz196l0t75] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12) var(--space-16);
}

.payroll-wide[b-yz196l0t75] {
    grid-column: 1 / -1;
}

.payroll-kinds[b-yz196l0t75] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-16);
}
/* frontend/Components/Pages/hr/policy/Performance/PerformancePolicyForm.razor.rz.scp.css */
.perf-rules-head[b-rruiqolx9t] { position: sticky; top: 0; background: var(--surface); }
.perf-chain-sep[b-rruiqolx9t] { color: var(--text-secondary); }
.perf-example-key[b-rruiqolx9t] { color: var(--text-secondary); margin-right: var(--space-8); }
.perf-standing[b-rruiqolx9t] { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4) var(--space-12); }
/* frontend/Components/Pages/hr/policy/Policies.razor.rz.scp.css */
/* The Policies list page. The one measure of its own: a view-only Name is plain text that is cut to one line, so row 27's tooltip can show the whole name while it is cut (TD-10). */

.pol-ellipsis[b-le5hq2bwev] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* AppShell sets --ui-grid-sticky-top to the top bar's height, for a grid whose header sticks under the bar while the page scrolls. Inside row 87's line host (overflow: hidden) the host is the header's
   scroll parent instead, so that offset pushed the header one top bar down the table and covered the first row (found live in the browser pass). No offset here: the header stays at the table's top. */
.pol-grid[b-le5hq2bwev] {
    --ui-grid-sticky-top: 0px;
}
/* frontend/Components/Pages/hr/policy/PolicyCoverageStrip.razor.rz.scp.css */
.pol-cov-noactive[b-ch1lt1u5s3] { color: var(--error); }
/* frontend/Components/Pages/hr/policy/PolicyEditDrawer.razor.rz.scp.css */
.pol-type-line[b-1ghfa8x4dt] {
    color: var(--text-secondary);
    font-size: var(--fs-body);
}
/* frontend/Components/Pages/hr/policy/Shift/ShiftFigureField.razor.rz.scp.css */
.shift-figure-row[b-6t2opa74u4] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-12);
}
/* frontend/Components/Pages/hr/policy/Shift/ShiftPolicyCards.razor.rz.scp.css */
.shift-calc[b-y9o04yzonf] {
    display: grid;
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
    gap: var(--space-4) var(--space-12);
    margin: var(--space-8) 0;
}

.shift-calc > *[b-y9o04yzonf] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.shift-calc-l[b-y9o04yzonf] {
    overflow-wrap: anywhere;
    color: var(--text-secondary);
}
/* frontend/Components/Pages/hr/policy/Shift/ShiftPolicyForm.razor.rz.scp.css */
.shift-fields[b-uymu13ncd8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--select-w), calc((100% - var(--space-16)) / 2)), 1fr));
    gap: var(--space-12) var(--space-16);
}

.shift-family-note[b-uymu13ncd8] {
    margin: 0 0 var(--space-8);
    color: var(--text-secondary);
}
/* frontend/Components/Pages/hr/policy/Timesheet/TimesheetPolicyForm.razor.rz.scp.css */
.timesheet-fields[b-4tazubxml0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12) var(--space-16);
}

.timesheet-amount[b-4tazubxml0] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-12);
}

.timesheet-amount > *[b-4tazubxml0] {
    min-width: 0;
}

.timesheet-amount > :first-child[b-4tazubxml0] {
    flex: 1 1 100%;
}
/* frontend/Components/Pages/hr/schedule/ScheduleDayEditor.razor.rz.scp.css */
/* One weekday of the schedule drawer's Week. Tokens only; the fields' own measures are the layer's. */
.sde[b-2mk2whosl1] {
    display: grid;
    gap: var(--space-8);
    padding: var(--space-12) 0;
    border-top: var(--border-w) solid var(--line);
}

.sde-head[b-2mk2whosl1] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-16);
    flex-wrap: wrap;
}

.sde-name[b-2mk2whosl1] {
    min-width: 3rem;
    font-weight: 600;
}

.sde-expected[b-2mk2whosl1] {
    margin-inline-start: auto;
    color: var(--text-secondary);
}

.sde-slots[b-2mk2whosl1],
.sde-target[b-2mk2whosl1] {
    display: grid;
    gap: var(--space-8);
    justify-items: start;
}

.sde-slot[b-2mk2whosl1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
}

.sde-gap[b-2mk2whosl1],
.sde-target[b-2mk2whosl1] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.sde-slots[b-2mk2whosl1] {
    justify-items: stretch;
}

.sde-gap-text[b-2mk2whosl1],
.sde-off[b-2mk2whosl1] {
    color: var(--text-secondary);
}

.sde-copy[b-2mk2whosl1] {
    position: relative;
}

.sde-add[b-2mk2whosl1] {
    justify-self: start;
}
/* frontend/Components/Pages/hr/schedule/ScheduleDrawer.razor.rz.scp.css */
/* The schedule drawer's body (screen 10). Tokens only; the fields, fieldsets, chips and cards are the layer's own. The drawer body is projected from this component, so its own markup is styled here. */
.sd-body[b-jji9zugxef] {
    display: grid;
    gap: var(--space-16);
}

.sd-name[b-jji9zugxef] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
}

.sd-chips[b-jji9zugxef] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.sd-note[b-jji9zugxef] {
    margin: 0;
    color: var(--text-secondary);
}

.sd-total[b-jji9zugxef] {
    padding-top: var(--space-12);
    border-top: var(--border-w) solid var(--line);
    font-weight: 600;
}

.sd-version[b-jji9zugxef] {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-4) 0;
}

.sd-person[b-jji9zugxef] {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr auto;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-4) 0;
}

.sd-version-label[b-jji9zugxef] {
    font-weight: 600;
}

.sd-read[b-jji9zugxef] {
    padding: var(--space-8) 0;
}

.sd-none[b-jji9zugxef],
.sd-person-from[b-jji9zugxef] {
    margin: 0;
    color: var(--text-secondary);
}
/* frontend/Components/Pages/hr/schedule/Schedules.razor.rz.scp.css */
/* The Schedules list page. Tokens only; every measure of the table, the header and the pager is the layer's own. */
.sch-create[b-71im5kgnro] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-12);
    padding: var(--space-16);
    margin-bottom: var(--space-16);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--fill-1);
}

.sch-strip[b-71im5kgnro] {
    margin-block: var(--space-12);
}

.sch-key[b-71im5kgnro] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-16);
}

.sch-key-note[b-71im5kgnro] {
    flex-basis: 100%;
    margin: 0;
    color: var(--text-secondary);
}

/* AppShell sets --ui-grid-sticky-top to the top bar's height, for a grid whose header sticks under the bar while the page scrolls. Inside row 87's line host (overflow: hidden) the host is the header's scroll parent instead,
   so that offset pushes the header one top bar down the table and covers the first row (the same finding as the Holidays page's). No offset here: the header stays at the table's top. */
.sch-grid[b-71im5kgnro] {
    --ui-grid-sticky-top: 0px;
}

/* A schedule's version tags stay on one line (a grid row has one height); each is cut to a width and carries its whole label as a tooltip. The cell is projected by the Grid, hence ::deep. */
.sch-grid[b-71im5kgnro]  .sch-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-4);
    overflow: hidden;
}
/* frontend/Components/Pages/hr/schedule/ScheduleWeekCells.razor.rz.scp.css */
/* The compact week (screen 9), one line high so it fits a grid row. Tokens only. The mode mark is the cell's style: a solid bar for fixed slots, a ring for hours-only, a faint bar for an off day; the list's key shows each. */
.swc[b-6y09wzinwl] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    white-space: nowrap;
}

.swc-cell[b-6y09wzinwl] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius);
    font-size: 12px;
}

.swc-day[b-6y09wzinwl] {
    color: var(--text-secondary);
}

.swc-mark[b-6y09wzinwl] {
    display: block;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-pill);
}

.swc-fixed .swc-mark[b-6y09wzinwl] {
    background: var(--text);
}

.swc-hours .swc-mark[b-6y09wzinwl] {
    border: var(--border-w) solid var(--text);
}

.swc-off .swc-mark[b-6y09wzinwl] {
    background: var(--line);
}

.swc-off[b-6y09wzinwl] {
    color: var(--text-secondary);
}

.swc-total[b-6y09wzinwl] {
    margin-inline-start: var(--space-8);
    font-weight: 600;
}
/* frontend/Components/Pages/Me/MeNotificationsTab.razor.rz.scp.css */
.me-notification-link[b-ufx71yyhgh] {
    color: var(--accent);
}
/* frontend/Components/Pages/Me/MeOwnRequestsSection.razor.rz.scp.css */
.me-own-section[b-j4vmlwmpu1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-block-end: var(--space-16);
}

.me-own-head[b-j4vmlwmpu1] {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    gap: var(--space-8);
}

.me-own-title[b-j4vmlwmpu1] {
    margin: 0;
}

.me-own-head-note[b-j4vmlwmpu1] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.me-own-none[b-j4vmlwmpu1] {
    margin: 0;
    color: var(--text-secondary);
}

.me-own-row[b-j4vmlwmpu1] {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: var(--space-8);
    padding-block: var(--space-4);
    border-block-end: var(--border-w) solid var(--line);
}

.me-own-type[b-j4vmlwmpu1],
.me-own-field[b-j4vmlwmpu1],
.me-own-reason[b-j4vmlwmpu1] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.me-own-reason[b-j4vmlwmpu1] {
    flex-basis: 100%;
}

.me-own-code[b-j4vmlwmpu1] {
    font-size: var(--fs-small);
}

/* an Outdated row's lead is struck: the request it was for no longer stands; the status, who, when, reason and the link stay as they are */
.me-own-row[data-state="outdated"] .me-own-type[b-j4vmlwmpu1] {
    text-decoration: line-through;
}
/* frontend/Components/Pages/Me/MePage.razor.rz.scp.css */
.me-page[b-0473zzs0gd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.me-strip-row[b-0473zzs0gd] {
    display: flex;
    align-items: center;
    gap: var(--space-16);
}

.me-strip[b-0473zzs0gd] {
    flex: 1 1 auto;
    min-width: 0;
}

.me-profile-link[b-0473zzs0gd] {
    flex: none;
    white-space: nowrap;
}

.me-panel[b-0473zzs0gd] {
    min-width: 0;
}

.me-panel[b-0473zzs0gd]  .me-verdict {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
}
/* frontend/Components/Pages/Me/MyReviewSection.razor.rz.scp.css */
/* The row's name keeps to one line; the layer's tooltip holds the whole name when it is cut. */
.mrs-name[b-m0elhk2q03] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The review editor takes the whole width of the row's detail. */
.mrs-review[b-m0elhk2q03] {
    width: 100%;
}

/* The count and the Submit button sit on one right-aligned row. */
.mrs-foot[b-m0elhk2q03] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-12);
}

.mrs-count[b-m0elhk2q03] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

@media (max-width: 899.98px) {
    .mrs-foot[b-m0elhk2q03] {
        flex-wrap: wrap;
    }
}
/* frontend/Components/Pages/notifications/NotificationRead.razor.rz.scp.css */
.nr-date[b-ic4hgyejs6] { color: var(--text-secondary); font-size: var(--fs-small); }
.nr-text[b-ic4hgyejs6] { white-space: pre-line; }
.nr-count[b-ic4hgyejs6] { font-size: var(--fs-caption); color: var(--error); }
.nr-count[data-state="met"][b-ic4hgyejs6] { color: var(--ok); }
.nr-image[b-ic4hgyejs6] { max-inline-size: 100%; }
/* frontend/Components/Pages/workflow/Workflows.razor.rz.scp.css */
/* F-012/REQ-008 FR-2 — the Workflows page shell. Tokens only (a test pins it: nothing lints Pages/**); the rhythm is the Representatives page's (CrmRepresentatives.razor.css). */

.wf-page[b-ao0zlbnkf4] {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
}

/* The band's own bottom margin (--content-pad) would stack on the page gap: trim it to what the gap does not already give (as the Representatives page does). */
.wf-page[b-ao0zlbnkf4]  .ui-pageheader-band {
    margin-bottom: calc(var(--content-pad) - var(--page-gap));
}

/* The tab bodies are the page's own (the strip's panels are empty): one column each; a hidden body takes no room. */
.wf-tab[b-ao0zlbnkf4] {
    display: flex;
    flex-direction: column;
}

.wf-tab[hidden][b-ao0zlbnkf4] {
    display: none;
}

/* The catalogue-gap banners' rows: one line per workflow (or source), under the banner's lead sentence. */
.wf-gaps[b-ao0zlbnkf4] {
    margin: var(--space-4) 0 0;
    padding-left: var(--space-16);
}
/* frontend/Components/Pages/workflow/workflows/DayTimeline.razor.rz.scp.css */
/* F-012/REQ-008 FR-6 — the page-local day timeline. Tokens only: no colour literal anywhere, and every var() names a token in DesignLayerLint/token-manifest.txt.
   Nothing lints Pages/**, so DayTimelineTests reads this file from disk and fails on a literal or an unknown token. Positions arrive as inline left/width percentages
   (already clamped to 0-100 by DayTimeline.razor.cs); everything else is here. */
.dtl[b-tb5q7za8e7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.dtl-caption[b-tb5q7za8e7] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4) var(--space-12);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--text-secondary);
}

.dtl-caption-zone[b-tb5q7za8e7] {
    margin-inline-start: auto;
}

/* The now marker fell back to UTC (blank or unresolvable zone): the caption is a warning, not a footnote. */
.dtl-caption-zone[data-zone-fallback][b-tb5q7za8e7] {
    color: var(--warn);
    font-weight: var(--fw-semibold);
}

.dtl-track[b-tb5q7za8e7] {
    position: relative;
    height: var(--row-h);
    border-radius: var(--radius);
    background: var(--fill-1);
    overflow: hidden;
}

.dtl-axis[b-tb5q7za8e7] {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: var(--border-w);
    background: var(--line);
}

.dtl-work[b-tb5q7za8e7] {
    position: absolute;
    box-sizing: border-box;
    top: var(--space-4);
    bottom: var(--space-4);
    background: var(--accent-soft);
    border: var(--border-w) solid var(--accent);
    border-radius: var(--radius);
}

.dtl-slot[b-tb5q7za8e7] {
    position: absolute;
    box-sizing: border-box;
    top: var(--space-8);
    bottom: var(--space-8);
    min-width: var(--space-4);
    display: flex;
    align-items: center;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--radius);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    overflow: hidden;
}

/* A slot with nothing on the axis (wholly before or after it, or inverted/empty) keeps its element but paints as nothing: its clamped width is 0, and the minimum width above would
   otherwise draw a bar at the axis start, implying a workflow there. */
.dtl-slot[data-off-axis][b-tb5q7za8e7] {
    min-width: 0;
    visibility: hidden;
}

/* The ellipsis lives on this block label, not on the flex container (a flex item's own text-overflow is unreliable on the container); min-width: 0 lets it shrink below its
   text. The padding is on the label so a very short slot stays as narrow as its minutes say instead of growing to fit padding. */
.dtl-slot-label[b-tb5q7za8e7] {
    display: block;
    box-sizing: border-box;
    min-width: 0;
    padding: 0 var(--space-8);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dtl-now[b-tb5q7za8e7] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(var(--border-w) * 2);
    background: var(--error);
    transform: translateX(-50%);
}

.dtl-now[b-tb5q7za8e7]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--dot);
    height: var(--dot);
    border-radius: var(--radius-pill);
    background: var(--error);
    transform: translateX(-50%);
}
/* frontend/Components/Pages/workflow/workflows/DefinitionDrawer.razor.rz.scp.css */
/* F-012/REQ-008 FR-17 (Amended (3)) — the definition drawer's body and its width. Tokens only: no colour literal, and every var() names a token in DesignLayerLint/token-manifest.txt (nothing lints Pages/**, so
   DefinitionDrawerTests reads this file from disk and fails on a literal or an unknown token). The drawer's head, footer and padding are row 16's; the fieldsets' parts are reached through ::deep from the .wf-def
   wrapper this component draws. */

/* WIDTH. The planner's condition on Amended (3): the drawer keeps row 16's default width UNLESS a real flow label is cut off in the step builder's Flow column, and the widening is a wrapper that sets --drawer-w-edit
   (EditDrawer has no width parameter; its .ui-drawer is clamp(var(--drawer-min), var(--drawer-w-edit), var(--drawer-max)) and a custom property set on an ancestor is inherited by the native dialog, which stays
   in this element in the DOM). The condition is met on COMPUTED metrics, not a browser measurement (Workflows.md "Width"): at the default width the Flow column's value box is about 204 px against labels of up to 263 px,
   and at this width (75vw, capped at the token's maximum, 960 wide from a 1280 viewport) about 364 px, which holds every authorable label. Below the layer's 900 breakpoint the drawer is full-bleed regardless. If the
   owner's live check, made at 1280 x 900 (a wide screen makes the default as wide as this, so it hides the difference), finds no label cut at the default width, deleting this one rule restores the default. display: contents keeps the wrapper out of layout (the dialog is fixed-position; a box here would only
   add a gap to a flex parent). Nothing else is set here: the library's clamp still bounds the result to its own minimum and maximum. */
.wf-def-drawer[b-kw4t1ucz0p] {
    --drawer-w-edit: min(75vw, var(--drawer-max));
    display: contents;
}

.wf-def[b-kw4t1ucz0p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

.wf-def[b-kw4t1ucz0p]  .wf-def-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.wf-def[b-kw4t1ucz0p]  .wf-def-group-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
    min-width: 0;
}

.wf-def[b-kw4t1ucz0p]  .wf-def-group-row > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.wf-def[b-kw4t1ucz0p]  .wf-def-anchor {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.wf-def[b-kw4t1ucz0p]  .wf-def-error {
    color: var(--error);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.wf-def[b-kw4t1ucz0p]  .wf-def-hint {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.wf-def-warnings[b-kw4t1ucz0p] {
    margin: var(--space-4) 0 0;
    padding-left: var(--space-16);
}
/* frontend/Components/Pages/workflow/workflows/DefinitionsTab.razor.rz.scp.css */
/* F-012/REQ-008 FR-16 — the Definitions tab's page-local rules. Tokens only: no colour literal, and every var() names a token in DesignLayerLint/token-manifest.txt (nothing lints Pages/**, so
   DefinitionsTabTests reads this file from disk and fails on a literal or an unknown token). No rule here sets a cell's height: the Grid's rows are fixed (row 19: 40 px), and every cell's content is drawn on one line
   inside it. */
.wf-df[b-4wmm3v7vdp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

/* The grid region (the Grid, then its Pager or the "N workflows" line): the same gap the table's other blocks keep, so the total never sits against the table's border. */
.wf-df-grid[b-4wmm3v7vdp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

/* Fluent's cells clip their content (overflow hidden). Two cells release it, each for a bubble that must escape the 40 px row: Address and Description — their "only when cut" truncation tooltip; Actions — a disabled
   Edit/Delete's reason bubble. Their text does not spill: the content box inside each is bounded by the cell and cuts its own text with an ellipsis (.wf-df-text). Group and State keep the Grid's clipping (nothing of theirs escapes). */
.wf-df[b-4wmm3v7vdp]  table.ui-grid td:has(> .wf-df-cut),
.wf-df[b-4wmm3v7vdp]  table.ui-grid td:has(> .wf-df-actions) {
    overflow: visible;
}

/* The one box in a cell that may shrink: the page's own wrapper around a truncation tooltip. */
.wf-df-cut[b-4wmm3v7vdp] {
    display: flex;
    min-width: 0;
}

.wf-df-cut[b-4wmm3v7vdp]  .ui-tooltip-region {
    min-width: 0;
}

/* One line of text (an address, a description, a group name), cut with an ellipsis — a block box, so the ellipsis draws when the cell is narrower than the text. */
.wf-df-text[b-4wmm3v7vdp] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-df-muted[b-4wmm3v7vdp] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

/* Actions: the two icon buttons, side by side, never wrapping. */
.wf-df-actions[b-4wmm3v7vdp] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    white-space: nowrap;
}

/* "N workflows" under a list that fits on one page. */
.wf-df-total[b-4wmm3v7vdp] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}
/* frontend/Components/Pages/workflow/workflows/DeleteDefinitionDialog.razor.rz.scp.css */
/* F-012/REQ-008 FR-16 — the delete confirmation's body. Tokens only: no colour literal, and every var() names a token in DesignLayerLint/token-manifest.txt (nothing lints Pages/**, so
   DeleteDefinitionDialogTests reads this file from disk and fails on a literal or an unknown token). The dialog's shell, footer and width are row 17's. */
.wf-dd[b-4ml1whbdx0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.wf-dd-question[b-4ml1whbdx0] {
    margin: 0;
}
/* frontend/Components/Pages/workflow/workflows/MonitorCard.razor.rz.scp.css */
/* F-012/REQ-008 FR-8 — the Monitor card's own text rows. The frame is the layer's Card; layout is the layer's Stack. Tokens only: no colour literal anywhere, and every var() names a token in
   DesignLayerLint/token-manifest.txt (nothing lints Pages/**, so MonitorCardTests reads this file from disk and fails on a literal or an unknown token). */
.wf-mc[b-gn2m5gsg0n] {
    min-width: 0;
}

.wf-mc-caption[b-gn2m5gsg0n] {
    margin: 0;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--text-secondary);
}

/* The state's named code, before the sentence: the layer's code-chip look (NamedError's code line) — monospace on the surface, hairline border. */
.wf-mc-code[b-gn2m5gsg0n] {
    align-self: flex-start;
    padding: var(--code-pad-y) var(--code-pad-x);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.wf-mc-sentence[b-gn2m5gsg0n] {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* The subjects table mounts under the card's own rows, set off by the same hairline the layer's Card uses. */
.wf-mc-subjects[b-gn2m5gsg0n] {
    padding-block-start: var(--space-12);
    border-block-start: var(--border-w) solid var(--line);
}
/* frontend/Components/Pages/workflow/workflows/PipelineSteps.razor.rz.scp.css */
/* F-012/REQ-008 FR-17 (Amended (3)) — the step builder: row 48 (its own styles), the uncatalogued-step banners, the raw-JSON mode and the Step settings list beneath the editor. Tokens only: no colour literal, and every
   var() names a token in DesignLayerLint/token-manifest.txt (PipelineStepsTests reads this file from disk). No width of its own — the drawer's width is DefinitionDrawer.razor.css's (the .wf-def-drawer wrapper, Amended (3)). */
.wf-steps[b-b1tgva22b0],
.wf-steps-raw[b-b1tgva22b0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.wf-steps-settings[b-b1tgva22b0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
    padding-top: var(--space-12);
    border-top: var(--border-w) solid var(--line);
}

.wf-steps-settings-title[b-b1tgva22b0] {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-semibold);
}

.wf-steps-group[b-b1tgva22b0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.wf-steps-group-title[b-b1tgva22b0] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
}

.wf-steps-toggle[b-b1tgva22b0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.wf-steps-hint[b-b1tgva22b0] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/Pages/workflow/workflows/RemoveSubjectsDialog.razor.rz.scp.css */
/* F-012/REQ-008 FR-13 — the remove dialog's body. Tokens only: no colour literal, and every var() names a token in DesignLayerLint/token-manifest.txt (nothing lints Pages/**, so
   RemoveSubjectsDialogTests reads this file from disk and fails on a literal or an unknown token). The dialog's shell, footer and width are row 17's. */
.wf-rd[b-trbyjlb6rl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.wf-rd-question[b-trbyjlb6rl],
.wf-rd-heading[b-trbyjlb6rl],
.wf-rd-summary[b-trbyjlb6rl],
.wf-rd-more[b-trbyjlb6rl] {
    margin: 0;
}

.wf-rd-heading[b-trbyjlb6rl],
.wf-rd-summary[b-trbyjlb6rl] {
    font-weight: var(--fw-semibold);
}

.wf-rd-blocked[b-trbyjlb6rl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* The lists (subjects that cannot be removed; the result's refusals): small text, wrapping inside the 440 px dialog, never cut — every reason is read whole. */
.wf-rd-list[b-trbyjlb6rl] {
    margin: 0;
    padding-left: var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    overflow-wrap: anywhere;
}

.wf-rd-more[b-trbyjlb6rl] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}
/* frontend/Components/Pages/workflow/workflows/RepGroupCard.razor.rz.scp.css */
/* F-012/REQ-008 FR-5 — the group card's own text row. The frame is the layer's Card; layout is the layer's Stack. Tokens only: no colour literal anywhere, and every var() names a token in
   DesignLayerLint/token-manifest.txt (nothing lints Pages/**, so RepGroupCardTests reads this file from disk and fails on a literal or an unknown token). */
.wf-rg[b-jopqftlegz] {
    min-width: 0;
}

/* "No workflows for <rep>" — secondary text, as a card caption reads. */
.wf-rg-empty[b-jopqftlegz] {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-secondary);
}
/* frontend/Components/Pages/workflow/workflows/SubjectDetailDrawer.razor.rz.scp.css */
/* F-012/REQ-008 FR-11 Amended (4) — the subject drawer's page-local rules. Tokens only: no colour literal, and every var() names a token in DesignLayerLint/token-manifest.txt (nothing lints Pages/**, so
   SubjectDetailDrawerTests reads this file from disk and fails on a literal or an unknown token). The drawer's own chrome (width, head, body padding) is QuickDrawer's (row 80). */
.wf-sd[b-p7wda9oupl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

.wf-sd-section[b-p7wda9oupl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.wf-sd-label[b-p7wda9oupl] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
}

.wf-sd-text[b-p7wda9oupl] {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    overflow-wrap: anywhere;
}

.wf-sd-note[b-p7wda9oupl] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.wf-sd-event[b-p7wda9oupl] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    min-width: 0;
}

/* The full journey: every step, so here the pills do wrap — the drawer is the place with room for all of them. */
.wf-sd-journey[b-p7wda9oupl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.wf-sd-origin[b-p7wda9oupl] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}

/* The fix box: the named-error block's frame (row 57's seam pad, the error fill and edge), so a subject that needs the user reads as the same kind of "act on this" block the layer draws. */
.wf-sd-fixbox[b-p7wda9oupl] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
    max-width: 100%;
    padding: var(--seam-pad);
    background: var(--error-bg);
    border: var(--border-w) dashed var(--error);
    border-radius: var(--radius);
}

.wf-sd-fix[b-p7wda9oupl] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text);
    overflow-wrap: anywhere;
}

/* The raw data stays inside the drawer: it wraps rather than widening it. */
.wf-sd-data[b-p7wda9oupl] {
    margin: 0;
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.wf-sd-buttons[b-p7wda9oupl] {
    display: flex;
    gap: var(--space-8);
}

.wf-sd-error[b-p7wda9oupl] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--error);
}
/* frontend/Components/Pages/workflow/workflows/SubjectsTable.razor.rz.scp.css */
/* F-012/REQ-008 FR-10/FR-11 (Amended (4)) — the subjects table's page-local rules. Tokens only: no colour literal, and every var() names a token in DesignLayerLint/token-manifest.txt (nothing lints
   Pages/**, so SubjectsTableTests reads this file from disk and fails on a literal or an unknown token). No rule here sets a cell's height: the Grid's rows are fixed (row 19: 40 px), and every cell's
   content is drawn on one line inside it — what a line cannot hold is in the subject drawer. */
.wf-st[b-7wio4nuhu0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

/* The grid region (the Grid, then its Pager or the "N subjects" line): the same gap the table's other blocks keep, so the total never sits against the table's border. */
.wf-st-grid[b-7wio4nuhu0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

/* Fluent's cells clip their content (overflow hidden). Two cells release it, each for a bubble that must escape the 40 px row: State — its "only when cut" tooltip and the "event not delivered"
   pill's reason; Actions — a disabled Retry/Remove's reason bubble and the refusal line's "only when cut" tooltip. Their text does not spill: each cell's content box is bounded by the cell and cuts
   its own text with an ellipsis (the State cell's action, .wf-st-refusal). Subject, Journey and Origin keep the Grid's clipping (nothing of theirs escapes). */
.wf-st[b-7wio4nuhu0]  table.ui-grid td:has(> .wf-st-state),
.wf-st[b-7wio4nuhu0]  table.ui-grid td:has(> .wf-st-actions) {
    overflow: visible;
}

/* Journey: the capped pills in a strip that clips what the cell cannot hold (a whole-width cut, never a second line), and "+N" outside the strip so it always shows. */
.wf-st-journey[b-7wio4nuhu0] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    white-space: nowrap;
}

.wf-st-journey-steps[b-7wio4nuhu0] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.wf-st-journey-more[b-7wio4nuhu0] {
    display: flex;
    flex: none;
}

/* State: the sentence shrinks first (its text box cuts with an ellipsis), the pill keeps its width. */
.wf-st-state[b-7wio4nuhu0] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    white-space: nowrap;
}

/* The one box in a cell that may shrink: the page's own wrapper around a truncation tooltip (the State cell's action, the refusal line). Scoped to it on purpose — a Button and a StatusPill with a
   Reason draw a tooltip region of their own (DisabledReasonTooltip), and those must keep their content width, never shrink and spill. */
.wf-st-cut[b-7wio4nuhu0] {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
}

.wf-st-cut[b-7wio4nuhu0]  .ui-tooltip-region {
    min-width: 0;
}

/* Origin: one line of text (or one link) — a block box, so the ellipsis draws when the cell is narrower than "<kind> <id>". */
.wf-st-origin[b-7wio4nuhu0] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Subject: one line (the label or #id, as a link or text), cut with an ellipsis. */
.wf-st-subject[b-7wio4nuhu0] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-st-muted[b-7wio4nuhu0] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

/* Actions: single-line buttons, then (after a refused Retry) the refusal, cut with an ellipsis and whole in its tooltip. */
.wf-st-actions[b-7wio4nuhu0] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    white-space: nowrap;
}

.wf-st-refusal[b-7wio4nuhu0] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--error);
}

/* "N subjects removed" after a removal went through (a status line; cleared on the next view change). The line is always mounted (a live region inserted with its text is often not announced); while it is empty
   it is taken out of the flow — no gap in the column — yet stays in the accessibility tree (never display: none). */
.wf-st-notice[b-7wio4nuhu0] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.wf-st-notice:empty[b-7wio4nuhu0] {
    position: absolute;
}

.wf-st-total[b-7wio4nuhu0] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}
/* frontend/Components/Shared/AccessDenied.razor.rz.scp.css */
/* FPL-001/REQ-017 FR-9 (item 47) -- a thin token-sourced wrapper around row 57's own NamedError,
   which supplies its own padding/border/background. This wrapper only adds page-level breathing
   room and a readable max width; no ambient/legacy CSS is required for any of it. */
.ui-access-denied[b-li261xr1vw] {
    padding: var(--space-24);
    max-width: 640px;
}
/* frontend/Components/Shared/inlineEditors/InlineAdvancedHtmlEditor.razor.rz.scp.css */
.inline-advanced-html-editor[b-ax8wi4uy4z] {
    display: block;
    position: relative;
    width: 100%;
}

/* .iahe-display is now nested inside InlineEditorShell's own .display-text span (this editor is
   built on the shell as of the inline-editor-hardening plan), which already supplies padding,
   border-radius, cursor:pointer, the hover background, and the transition for the whole clickable
   region (InlineEditorShell.razor.css's ".inline-text-editor .display-text" rule) -- repeating any
   of those here would double them (16px/8px padding instead of 8px/4px, ~15% hover tint instead of
   8%). Only the layout/sizing this editor's own content specifically needs stays here. */
.inline-advanced-html-editor .iahe-display[b-ax8wi4uy4z] {
    display: block;
    width: 100%;
    min-height: 1.5em;
    max-height: 400px;
    overflow-y: auto;
}

/* Tracker logs' Comment column (idea #1069) wraps this component in its own .opc-clamp-2
   ancestor to 2-line-clamp long comments. A clamp on that ancestor alone has no effect here --
   .iahe-display is display:block, which doesn't participate in the ancestor's -webkit-box line
   flow, and this rule's own max-height/overflow-y above would establish an independent scroll
   region regardless. Clamp .iahe-display itself instead when it has that ancestor. This selector
   ties the rule above on specificity (both compile to the same scope-attributed
   ".iahe-display[b-xxx]" weight) -- it must stay declared AFTER that rule so source order breaks
   the tie in its favor; do not reorder or add !important instead. */
.opc-clamp-2 .iahe-display[b-ax8wi4uy4z] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: none;
}

.inline-advanced-html-editor .placeholder[b-ax8wi4uy4z] {
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

.inline-advanced-html-editor .iahe-video-picker[b-ax8wi4uy4z],
.inline-advanced-html-editor .iahe-image-picker[b-ax8wi4uy4z] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

/* Square icon-like buttons used by this editor's own video/image-picker Cancel buttons (the
   shell's own Save/Cancel action row is InlineEditorShell's, styled by InlineEditorShell.razor.css
   under the shell's own CSS-isolation scope). These buttons are authored directly in this file's
   EditContent, so they keep this file's own scope regardless of being hosted inside the shell --
   see this file's class-level doc comment. No .success variant is declared here any more: nothing
   in this file uses .square-icon-btn.success (only .error, for Cancel), and the shell's own
   .square-icon-btn.success already covers its Save button under its own scope. */
.square-icon-btn[b-ax8wi4uy4z] {
    min-width: 0 !important;
    width: 24px;
    height: 24px;
    padding: 0 !important;
    border: none;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
}

.square-icon-btn .mud-icon-root[b-ax8wi4uy4z] {
    font-size: 16px;
}

.square-icon-btn.error[b-ax8wi4uy4z] {
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-contrast);
}

.square-icon-btn.error:hover[b-ax8wi4uy4z] {
    filter: brightness(0.95);
}

.square-icon-btn:focus-visible[b-ax8wi4uy4z] {
    box-shadow: 0 0 0 2px var(--mud-palette-primary, #1976d2);
}

/* Description HTML is injected via MarkupString, so its <img>/<video> elements do NOT carry this
   component's scope attribute (same reasoning as TaskDetails.razor.css's .rich-content-preview rule) --
   ::deep reaches them. */
.inline-advanced-html-editor .iahe-display[b-ax8wi4uy4z]  img,
.inline-advanced-html-editor .iahe-display[b-ax8wi4uy4z]  video {
    max-height: 200px;
    max-width: 100%;
    object-fit: contain;
    cursor: pointer;
    border-radius: 4px;
    display: block;
}

.inline-advanced-html-editor .iahe-display[b-ax8wi4uy4z]  img:hover,
.inline-advanced-html-editor .iahe-display[b-ax8wi4uy4z]  video:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.inline-advanced-html-editor .iahe-display[b-ax8wi4uy4z]  .mention-chip {
    color: #1976d2;
    font-weight: 500;
    display: inline;
}
/* frontend/Components/Shared/inlineEditors/InlineAvatarEditor.razor.rz.scp.css */
.inline-avatar-editor[b-ljf1xapjzi] {
    display: inline-block;
    position: relative;
}

.inline-avatar-editor[b-ljf1xapjzi]  .inline-text-editor {
    display: inline-block;
    width: auto;
}

.inline-avatar-editor[b-ljf1xapjzi]  .inline-text-editor .display-text {
    display: inline-block;
    width: auto;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    transition: opacity .12s ease-in-out;
}

.inline-avatar-editor[b-ljf1xapjzi]  .inline-text-editor .display-text:hover {
    background-color: transparent;
    opacity: 0.85;
}

.inline-avatar-editor[b-ljf1xapjzi]  .inline-text-editor .edit-container {
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: 10px;
}

.inline-avatar-editor .inline-avatar-error[b-ljf1xapjzi] {
    color: var(--mud-palette-error);
    font-size: 0.75rem;
}

/* The Remove-photo button is authored in this component's own EditContent fragment, not the
   shell's template, so it keeps this component's own scope attribute -- InlineEditorShell.razor.css's
   .square-icon-btn rules (scoped to the shell's file) can't reach it, unlike Save/Cancel, which
   the shell itself renders. Re-declare the base structural shape as a plain (non-::deep) selector. */
.square-icon-btn[b-ljf1xapjzi] {
    min-width: 0 !important;
    width: 24px;
    height: 24px;
    padding: 0 !important;
    border: none;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
}

.square-icon-btn .mud-icon-root[b-ljf1xapjzi] {
    font-size: 16px;
}

.square-icon-btn:focus-visible[b-ljf1xapjzi] {
    box-shadow: 0 0 0 2px var(--mud-palette-primary, #1976d2);
}

.square-icon-btn.default[b-ljf1xapjzi] {
    background-color: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.08));
    color: var(--mud-palette-text-primary);
}

.square-icon-btn.default:hover[b-ljf1xapjzi] {
    filter: brightness(0.92);
}
/* frontend/Components/Shared/inlineEditors/InlineDateEditor.razor.rz.scp.css */
.inline-text-editor .placeholder[b-s8j5059e05] {
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}
/* frontend/Components/Shared/inlineEditors/InlineDateTimeEditor.razor.rz.scp.css */
.inline-text-editor .placeholder[b-y04m2jxhmk] {
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}
/* frontend/Components/Shared/inlineEditors/InlineEditorShell.razor.rz.scp.css */
.inline-text-editor[b-z7rq6h4cvn] {
    display: block;
    position: relative;
    width: 100%;
}

.inline-text-editor .display-text[b-z7rq6h4cvn] {
    display: block;
    width: 100%;
    cursor: pointer;
    padding: 8px 4px;
    border-radius: 6px;
    transition: background-color .12s ease-in-out;
}

.inline-text-editor .display-text:hover[b-z7rq6h4cvn] {
    background-color: rgba(0, 0, 0, 0.08);
}

.inline-text-editor .edit-container[b-z7rq6h4cvn] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

/* Save/Cancel row -- rendered in normal document flow, right after EditContent, so Tab reaches
   it immediately regardless of SubmitOnEnter. MudPopover previously teleported this content into
   MudPopoverProvider (rendered near the top of the page, ahead of everything else), which put it
   thousands of tab stops away from the field it belongs to for every editor with
   SubmitOnEnter="false" (Select, MultiSelect, Date, DateTime, Autocomplete, AdvancedHtml,
   multiline Text) -- confirmed live, the only way to reach Save was a long Shift+Tab walk
   backward through the entire rest of the page. mud-elevation-8 (a plain CSS class, no MudPopover
   involved) replicates the floating-panel shadow the popover used to provide. */
.inline-text-editor .inline-editor-actions[b-z7rq6h4cvn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 4px;
    background-color: var(--mud-palette-surface);
    flex-shrink: 0;
}

.inline-editor-error[b-z7rq6h4cvn] {
    display: block;
    color: var(--mud-palette-error);
    font-size: .8rem;
    margin-top: 2px;
}

/* Square icon-like buttons used in the shell's Save/Cancel action row */
.square-icon-btn[b-z7rq6h4cvn] {
    min-width: 0 !important;
    width: 24px;
    height: 24px;
    padding: 0 !important;
    border: none;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
}

.square-icon-btn .mud-icon-root[b-z7rq6h4cvn] {
    font-size: 16px;
}

.square-icon-btn.success[b-z7rq6h4cvn] {
    background-color: var(--mud-palette-success);
    color: var(--mud-palette-success-contrast);
}

.square-icon-btn.success:hover[b-z7rq6h4cvn] {
    filter: brightness(0.95);
}

.square-icon-btn.error[b-z7rq6h4cvn] {
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-contrast);
}

.square-icon-btn.error:hover[b-z7rq6h4cvn] {
    filter: brightness(0.95);
}

.square-icon-btn:focus-visible[b-z7rq6h4cvn] {
    box-shadow: 0 0 0 2px var(--mud-palette-primary, #1976d2);
}
/* frontend/Components/Shared/inlineEditors/InlineFileUploadEditor.razor.rz.scp.css */
.inline-file-upload-editor[b-iumoozwuii]  .inline-text-editor {
    display: inline-block;
    width: auto;
}

.inline-file-upload-editor[b-iumoozwuii]  .inline-text-editor .display-text {
    display: inline-block;
    width: auto;
    padding: 8px 2px 8px 0px;
}

.inline-file-upload-editor[b-iumoozwuii]  .inline-text-editor .edit-container {
    display: inline-flex;
    width: auto;
}

.inline-text-editor .placeholder[b-iumoozwuii] {
    color: rgba(0, 0, 0, 0.5);
}
/* frontend/Components/Shared/inlineEditors/InlineMultiSelectEditor.razor.rz.scp.css */
.inline-multi-select-editor[b-bulmcv1ztf] {
    display: inline-block;
    position: relative;
}

.inline-multi-select-editor[b-bulmcv1ztf]  .inline-text-editor {
    display: inline-block;
    width: auto;
}

.inline-multi-select-editor[b-bulmcv1ztf]  .inline-text-editor .display-text {
    display: inline-block;
    width: auto;
    padding: 8px 2px 8px 0px;
}

.inline-multi-select-editor[b-bulmcv1ztf]  .inline-text-editor .edit-container {
    display: inline-flex;
    width: auto;
}

.inline-text-editor .placeholder[b-bulmcv1ztf] {
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

/* MudSelect's internal root markup is rendered by MudBlazor's own package, which does not
   participate in Blazor's per-component CSS isolation at all -- this rule cannot match
   regardless of scope/::deep (same pre-existing gotcha app.css's own min-width-200/min-width-300
   comment documents for a different MudBlazor element). Pre-existing before this migration, not a
   regression from it -- kept as-is rather than silently dropped. */
.inline-text-editor .input[b-bulmcv1ztf] {
    min-width: 220px;
}
/* frontend/Components/Shared/inlineEditors/InlineSelectEditor.razor.rz.scp.css */
.inline-text-editor .placeholder[b-merls77v8r] {
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

/* MudSelect's internal root markup is rendered by MudBlazor's own package, which does not
   participate in Blazor's per-component CSS isolation at all -- this rule cannot match
   regardless of scope/::deep (same pre-existing gotcha app.css's own min-width-200/min-width-300
   comment documents for a different MudBlazor element, and the same situation already found for
   InlineMultiSelectEditor's analogous .input rule in Task 8). Pre-existing before this migration,
   not a regression from it -- kept as-is rather than silently dropped. */
.inline-text-editor .input[b-merls77v8r] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
/* frontend/Components/Shared/inlineEditors/InlineSwitchEditor.razor.rz.scp.css */
.inline-switch-editor[b-vt6qegohh8] {
    display: inline-block;
    position: relative;
}

.inline-switch-editor[b-vt6qegohh8]  .inline-text-editor {
    display: inline-block;
    width: auto;
}

.inline-switch-editor[b-vt6qegohh8]  .inline-text-editor .display-text {
    display: inline-block;
    width: auto;
    padding: 8px 2px 8px 0px;
}

.inline-switch-editor[b-vt6qegohh8]  .inline-text-editor .edit-container {
    display: inline-flex;
    width: auto;
}

.inline-text-editor .placeholder[b-vt6qegohh8] {
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

/* MudSwitch's internal root markup is rendered by MudBlazor's own package, which does not
   participate in Blazor's per-component CSS isolation at all -- this rule cannot match
   regardless of scope/::deep (same pre-existing gotcha app.css's own min-width-200/min-width-300
   comment documents for a different MudBlazor element, and the same situation already found for
   InlineMultiSelectEditor's analogous .input rule in Task 8). Pre-existing before this migration,
   not a regression from it -- kept as-is rather than silently dropped. */
.inline-text-editor .input[b-vt6qegohh8] {
    min-width: 120px;
}
/* frontend/Components/Shared/inlineEditors/InlineTextEditor.razor.rz.scp.css */
.inline-text-editor .placeholder[b-a3ybm0lcyk] {
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

.inline-text-editor .truncate-toggle[b-a3ybm0lcyk] {
    display: inline;
    margin-left: 4px;
    padding: 0;
    border: none;
    background: none;
    color: var(--mud-palette-primary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
}

.inline-text-editor .truncate-toggle:hover[b-a3ybm0lcyk] {
    opacity: 0.8;
}

.multiline-display[b-a3ybm0lcyk] {
    white-space: pre-wrap;
    display: block;
    min-height: 1.5em;
}

/* MudTextField's internal root markup is rendered by MudBlazor's own package, which does not
   participate in Blazor's per-component CSS isolation at all -- this rule cannot match
   regardless of scope/::deep (same pre-existing gotcha app.css's own min-width-200/min-width-300
   comment documents for a different MudBlazor element, and the same situation already found for
   InlineMultiSelectEditor's/InlineSelectEditor's analogous .input rules in Tasks 8/12).
   Pre-existing before this migration, not a regression from it -- kept as-is rather than
   silently dropped. */
.inline-text-editor .input[b-a3ybm0lcyk] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
/* frontend/Components/Shared/projects/taskplan/ProjectTaskPlan.razor.rz.scp.css */
/* Grid-based swimlane board container */
.plan-grid[b-z05ztb5640] {
    /* Scrolling in both directions when many dates/lanes */
    overflow: auto;
    max-height: 80vh;
    padding-bottom: 8px;
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Default column widths */
    --plan-column-width: 300px;
    --lane-col-width: 220px;
}

/* Compact one-line Add Plan row */
/* New grid-based one-line Add Plan layout */
.add-plan-grid[b-z05ztb5640] {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.6fr) /* Task autocomplete */
        160px                 /* Date */
        90px                  /* Hours */
        170px                 /* Type */
        240px                 /* Assignees */
        minmax(260px, 2fr)    /* Comment */
        auto;                 /* Add button */
    gap: 8px;
    align-items: center;
}

/* Narrow hours input, wider comment field */
.hours-field[b-z05ztb5640] { max-width: 90px; }
.date-field[b-z05ztb5640] { max-width: 160px; }
.type-field[b-z05ztb5640] { max-width: 170px; }
.assignee-field[b-z05ztb5640] { max-width: 240px; }
.comment-field[b-z05ztb5640] { min-width: 260px; flex: 1 1 30%; }

/* Grid toolbar for swimlane + filters in one line */
.toolbar-grid[b-z05ztb5640] {
    display: grid;
    grid-template-columns:
        auto       /* Swimlane label */
        220px      /* Swimlane select */
        auto       /* Type label */
        minmax(180px, 1fr) /* Type multi-select */
        auto       /* Clear button */
        auto;      /* Reload icon */
    gap: 8px;
    align-items: center;
}
.toolbar-compact[b-z05ztb5640] { gap: 8px; } /* kept for backward compatibility */
.compact-select[b-z05ztb5640] { max-width: 220px; }

/* A single row in the grid (header or lane row) */
.grid-row[b-z05ztb5640] {
    display: grid;
    gap: 8px;
    align-items: start;
    padding: 6px 8px;
}

/* Header row styling (dates) */
.grid-header[b-z05ztb5640] {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    /* Prevent header from intercepting drag events over cells below */
    pointer-events: none;
}

.lane-col-header[b-z05ztb5640] {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--mud-palette-background);
    font-weight: 700;
    /* Do not capture pointer during drag */
    pointer-events: none;
}

.grid-col-header[b-z05ztb5640] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 6px 8px 6px;
}

/* Swimlane header row (full width per lane) */
.lane-header-row[b-z05ztb5640] {
    position: sticky;
    top: 40px; /* below the main date header */
    z-index: 2;
    background: var(--mud-palette-background);
    padding-top: 4px;
    padding-bottom: 4px;
}

.lane-header[b-z05ztb5640] {
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--mud-palette-background);
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: 6px;
    padding: 6px 10px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    /* Do not block drag operations */
    pointer-events: none;
}

.lane-header-title[b-z05ztb5640] { font-size: 0.95rem; }
.lane-header-total[b-z05ztb5640] { font-size: 0.8rem; color: var(--mud-palette-text-secondary); }

/* Lane row styling */
.lane-row[b-z05ztb5640] { border-bottom: 1px dashed rgba(0, 0, 0, 0.06); }

.lane-label[b-z05ztb5640] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    padding: 8px;
    border-radius: 6px;
    font-weight: 600;
    /* Allow drag to pass through label area into the adjacent cell */
    pointer-events: none;
}

.grid-cell[b-z05ztb5640] {
    background: color-mix(in oklab, var(--mud-palette-surface) 94%, var(--mud-palette-primary));
    border: 1px dashed rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    min-height: 160px;
    padding: 4px;
}

.grid-cell .cell-total[b-z05ztb5640] {
    position: sticky;
    top: 64px; /* keep visible under headers when scrolling */
    float: right;
    margin: 2px 4px 0 0;
    padding: 2px 6px;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in oklab, var(--mud-palette-surface) 88%, var(--mud-palette-primary));
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    pointer-events: none; /* totals should not capture mouse during drag */
}

/* Ensure MudDropZone fills cell nicely */
.grid-cell > .mud-drop-zone[b-z05ztb5640] {
    display: block;
    width: 100%;
    min-height: 152px;
    padding: 4px;
    box-sizing: border-box;
}

/* Explicit class on zones to guarantee sizing even when empty */
.plan-dropzone[b-z05ztb5640] {
    display: block;
    width: 100%;
    min-height: 152px;
    padding: 4px;
    box-sizing: border-box;
    border-radius: 6px;
    pointer-events: auto;
}

/* Visual feedback when dragging over a zone */
.plan-dropzone-over[b-z05ztb5640] {
    outline: 2px dashed var(--mud-palette-primary);
    background: color-mix(in oklab, var(--mud-palette-primary) 10%, transparent);
}

/* Optional hover effect for drop cells */
.grid-cell:hover[b-z05ztb5640] { border-color: var(--mud-palette-primary); }

/* Legacy classes retained for any external reuse (safe no-op with grid) */
.plan-column-header[b-z05ztb5640] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 6px 8px 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 6px;
}
.plan-column-title[b-z05ztb5640] { font-weight: 600; font-size: 0.95rem; }
.plan-column-date[b-z05ztb5640] { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.plan-column-total[b-z05ztb5640] { margin-top: 2px; font-size: 0.78rem; font-weight: 600; color: var(--mud-palette-primary); }

/* Wrapper added by MudDropContainer around each item while dragging calc sizes */
.plan-card-wrapper[b-z05ztb5640] { margin: 6px 2px; }

/* Compact Jira-like card */
.plan-card[b-z05ztb5640] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-1);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

/* Header row inside card: checkbox + title */
.plan-card-head[b-z05ztb5640] { display: flex; align-items: center; gap: 8px; }
.plan-card-check[b-z05ztb5640] { width: 16px; height: 16px; cursor: pointer; }
.plan-card:hover[b-z05ztb5640] { box-shadow: var(--mud-elevation-3); }

/* Visual during dragging */
.plan-card-dragging[b-z05ztb5640] { opacity: 0.85; cursor: grabbing; }

.plan-card-title[b-z05ztb5640] {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: var(--mud-palette-primary);
}

.plan-card-meta[b-z05ztb5640] { font-size: 0.72rem; color: var(--mud-palette-text-secondary); }

.plan-card-hours[b-z05ztb5640] { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.plan-card-hours-label[b-z05ztb5640] { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.plan-card-hours-input[b-z05ztb5640] { width: 80px; padding: 4px 6px; font-size: 0.85rem; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; }

.plan-card-desc[b-z05ztb5640] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Visual while dragging */
.plan-card-dragging[b-z05ztb5640] { opacity: 0.7; transform: scale(1.02); }

/* Selected visual state when checkbox is checked */
.plan-card-selected[b-z05ztb5640] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 0;
    box-shadow: var(--mud-elevation-2);
}

/* Card background by LoggerType */
.plan-card.type-billable[b-z05ztb5640] {
    background: #e8f5e9; /* light green */
    border-left: 4px solid #66bb6a;
}

.plan-card.type-nonbillable[b-z05ztb5640] {
    background: #e3f2fd; /* light blue */
    border-left: 4px solid #42a5f5;
}

/* Keep type background when selected */
.plan-card.type-billable.plan-card-selected[b-z05ztb5640],
.plan-card.type-nonbillable.plan-card-selected[b-z05ztb5640] {
    background: inherit;
}
/* frontend/Components/SharedComponents/AI/AgentFrame.razor.rz.scp.css */
.agent-frame[b-j7rcxsbeuc] {
    flex: 1;
    width: 100%;
    min-height: 0;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
/* frontend/Components/SharedComponents/ats/AtsAdvancedFilterDrawer.razor.rz.scp.css */
.ats-adv[b-xn4myu9gd1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-adv-group[b-xn4myu9gd1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-adv-nested[b-xn4myu9gd1] {
    margin-inline-start: var(--space-12);
    padding: var(--space-8) var(--space-12);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface-subtle, transparent);
}

.ats-adv-grouphead[b-xn4myu9gd1],
.ats-adv-add[b-xn4myu9gd1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.ats-adv-empty[b-xn4myu9gd1] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-adv-leaf[b-xn4myu9gd1] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding: var(--space-8);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

.ats-adv-leafpick[b-xn4myu9gd1] {
    flex: 1;
    min-width: 160px;
}

.ats-adv-jsonbox[b-xn4myu9gd1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-top: var(--space-12);
    border-top: var(--border-w) solid var(--line);
}

.ats-adv-jsonhead[b-xn4myu9gd1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ats-adv-jsonhead h3[b-xn4myu9gd1] {
    margin: 0;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.ats-adv-json[b-xn4myu9gd1] {
    margin: 0;
    padding: var(--space-8);
    max-height: 200px;
    overflow: auto;
    font-size: var(--fs-small);
    white-space: pre-wrap;
    word-break: break-all;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

.ats-adv-jsonerr[b-xn4myu9gd1] {
    margin: 0;
    color: var(--danger, inherit);
    font-size: var(--fs-small);
}
/* frontend/Components/SharedComponents/ats/AtsAiQueryDrawer.razor.rz.scp.css */
.ats-ai[b-bum2veksf0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-ai-help[b-bum2veksf0] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-ai-turn[b-bum2veksf0] {
    margin: var(--space-4) 0;
}

.ats-ai-answer[b-bum2veksf0] {
    color: var(--text-secondary);
}

.ats-ai-busy[b-bum2veksf0] {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.ats-ai-tablewrap[b-bum2veksf0] {
    overflow: auto;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

.ats-ai-table[b-bum2veksf0] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}

.ats-ai-table th[b-bum2veksf0],
.ats-ai-table td[b-bum2veksf0] {
    padding: var(--space-8) var(--space-12);
    text-align: left;
    border-bottom: var(--border-w) solid var(--line);
    white-space: nowrap;
}

.ats-ai-table th[b-bum2veksf0] {
    font-weight: 600;
    color: var(--text-secondary);
}

.ats-ai-none[b-bum2veksf0] {
    margin: 0;
    padding: var(--space-12);
    color: var(--text-secondary);
    text-align: center;
}
/* frontend/Components/SharedComponents/ats/AtsAllJobsRequired.razor.rz.scp.css */
.ats-all-jobs-required-code[b-x0gl53n3pn] {
    display: block;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
}
/* frontend/Components/SharedComponents/ats/AtsApplicantAppliedAs.razor.rz.scp.css */
.ats-applied-as[b-wr31s8ulb1] {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-secondary);
}
/* frontend/Components/SharedComponents/ats/AtsBulkEmailDrawer.razor.rz.scp.css */
.ats-pl-email[b-231fqoy4wi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-pl-fielderror[b-231fqoy4wi] {
    margin: var(--space-4) 0 0;
    color: var(--error);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/SharedComponents/ats/AtsCandidateActionCenter.razor.rz.scp.css */
.ats-ac[b-rxossxins7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-ac-title[b-rxossxins7] {
    margin: 0;
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
}

.ats-ac-none[b-rxossxins7],
.ats-ac-line[b-rxossxins7],
.ats-ac-when[b-rxossxins7] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-ac-pills[b-rxossxins7] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.ats-ac-opener[b-rxossxins7] {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--accent);
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
}

.ats-ac-opener-plain[b-rxossxins7] {
    overflow-wrap: anywhere;
}

.ats-ac-link[b-rxossxins7] {
    color: var(--accent);
    margin-right: var(--space-8);
}

.ats-ac-copied[b-rxossxins7] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.ats-ac-menu[b-rxossxins7] {
    position: relative;
    display: inline-block;
}

.ats-extraction[b-rxossxins7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-extraction-state[b-rxossxins7] {
    font-weight: var(--fw-semibold);
}

.action-row[b-rxossxins7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: baseline;
    padding: var(--space-8) 0;
    border-bottom: var(--border-w) solid var(--line);
}

.action-row:last-child[b-rxossxins7] {
    border-bottom: none;
}

/* W:ats-core-fixes/T-06 (#35): Copy link and Cancel are one unit that never wraps. */
.ats-ac-pair[b-rxossxins7] {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-8);
    white-space: nowrap;
}
/* frontend/Components/SharedComponents/ats/AtsCandidateActionToolbar.razor.rz.scp.css */
.ats-tb[b-4vf420q4vb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
}

.ats-tb-menuwrap[b-4vf420q4vb] {
    position: relative;
    display: inline-flex;
}
/* frontend/Components/SharedComponents/ats/AtsCandidateEmailHistory.razor.rz.scp.css */
.ats-emh[b-rcwz8nw6hu] {
    margin-top: var(--space-16);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.ats-emh-head[b-rcwz8nw6hu] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-16);
    border-bottom: var(--border-w) solid var(--line);
}

.ats-emh-title[b-rcwz8nw6hu] {
    flex: 1;
    margin: 0;
    font-size: var(--fs-title);
    font-weight: 600;
}

.ats-emh-count[b-rcwz8nw6hu] {
    font-weight: 400;
    color: var(--text-secondary);
}

.ats-emh-actions[b-rcwz8nw6hu] {
    display: flex;
    gap: var(--space-8);
}

.ats-emh-body[b-rcwz8nw6hu] {
    display: flex;
}

/* W:ats-core-fixes/T-06 (#37): the fixed height belongs to a mailbox with threads; an empty one takes its content's height. */
.ats-emh-body-filled[b-rcwz8nw6hu] {
    height: 70vh;
    min-height: 500px;
}

.ats-emh-list[b-rcwz8nw6hu] {
    width: 340px;
    flex-shrink: 0;
    border-right: var(--border-w) solid var(--line);
    overflow-y: auto;
}

.ats-emh-read[b-rcwz8nw6hu] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: var(--space-16);
    background: var(--fill-1);
}

.ats-emh-none[b-rcwz8nw6hu] {
    color: var(--text-secondary);
    text-align: center;
    margin-top: var(--space-24);
}

.ats-emh-row[b-rcwz8nw6hu] {
    flex: 1;
    min-width: 0;
}

.ats-emh-row-sel .ats-emh-subject[b-rcwz8nw6hu] {
    font-weight: 600;
}

.ats-emh-row-top[b-rcwz8nw6hu],
.ats-emh-row-foot[b-rcwz8nw6hu] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.ats-emh-subject[b-rcwz8nw6hu] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ats-emh-snippet[b-rcwz8nw6hu],
.ats-emh-sender[b-rcwz8nw6hu] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-emh-sender[b-rcwz8nw6hu] {
    flex: 1;
}
/* frontend/Components/SharedComponents/ats/AtsCandidateWhatsAppHistory.razor.rz.scp.css */
/* AtsCandidateWhatsAppHistory — the chat thread is page code (gap G2: the layer has no chat-bubble row). Tokens only; no raw colours. */
.ats-wah[b-o3zc7n8vh2] {
    display: flex;
    flex-direction: column;
    background: var(--neutral-bg);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.ats-wah-head[b-o3zc7n8vh2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-16);
    background: var(--surface);
    border-bottom: var(--border-w) solid var(--line);
}

.ats-wah-who[b-o3zc7n8vh2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ats-wah-name[b-o3zc7n8vh2] {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.ats-wah-session[b-o3zc7n8vh2] {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--text-secondary);
}

.ats-wah-head-acts[b-o3zc7n8vh2] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.ats-wah-banner[b-o3zc7n8vh2] {
    padding: var(--space-8) var(--space-16) 0;
}

.ats-wah-body[b-o3zc7n8vh2] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-12) var(--space-16);
}

.ats-wah-empty[b-o3zc7n8vh2] {
    padding: var(--space-16);
    text-align: center;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

.ats-wah-date[b-o3zc7n8vh2] {
    text-align: center;
    margin: var(--space-8) 0;
}

.ats-wah-date span[b-o3zc7n8vh2] {
    padding: var(--space-2) var(--space-12);
    border-radius: var(--radius-pill);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--text-secondary);
    background: var(--info-bg);
}

.ats-wah-row[b-o3zc7n8vh2] {
    display: flex;
    width: 100%;
    margin-bottom: var(--space-4);
}

.ats-wah-bubble[b-o3zc7n8vh2] {
    max-width: 75%;
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius);
    border: var(--border-w) solid var(--line);
}

.ats-wah-out[b-o3zc7n8vh2] {
    margin-left: auto;
    background: var(--ok-bg);
}

.ats-wah-in[b-o3zc7n8vh2] {
    margin-right: auto;
    background: var(--surface);
}

.ats-wah-text[b-o3zc7n8vh2] {
    white-space: pre-wrap;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
}

.ats-wah-tpl[b-o3zc7n8vh2] {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-style: italic;
    color: var(--text-secondary);
}

.ats-wah-meta[b-o3zc7n8vh2] {
    text-align: right;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--text-secondary);
}

.ats-wah-tick[b-o3zc7n8vh2] {
    margin-left: var(--space-4);
}

.ats-wah-tick-read[b-o3zc7n8vh2] {
    color: var(--info);
}

.ats-wah-tick-failed[b-o3zc7n8vh2],
.ats-wah-tick-undelivered[b-o3zc7n8vh2] {
    color: var(--error);
}

.ats-wah-err[b-o3zc7n8vh2] {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--error);
}

.ats-wah-composer[b-o3zc7n8vh2] {
    padding: var(--space-8) var(--space-12);
    background: var(--surface);
    border-top: var(--border-w) solid var(--line);
}

.ats-wah-free[b-o3zc7n8vh2],
.ats-wah-pick[b-o3zc7n8vh2] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
}

.ats-wah-free > :first-child[b-o3zc7n8vh2],
.ats-wah-pick > :first-child[b-o3zc7n8vh2] {
    flex: 1 1 auto;
    min-width: 0;
}

.ats-wah-tplbar[b-o3zc7n8vh2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-wah-hint[b-o3zc7n8vh2] {
    margin: 0;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--text-secondary);
}

.ats-wah-form[b-o3zc7n8vh2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* Send Template never shrinks or wraps its label beside the picker (W:ats-core-fixes/T-05 #30). */
.ats-wah-pick[b-o3zc7n8vh2]  fluent-button {
    flex: none;
    white-space: nowrap;
}
/* frontend/Components/SharedComponents/ats/AtsClarifyAnswersDetail.razor.rz.scp.css */
.ats-clarify-detail[b-4nw67rvgwh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-clarify-detail-head[b-4nw67rvgwh] {
    margin: 0;
    font-size: var(--fs-body);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: baseline;
}

.ats-clarify-detail-when[b-4nw67rvgwh],
.ats-clarify-detail-none[b-4nw67rvgwh] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-clarify-detail-text[b-4nw67rvgwh] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ats-clarify-detail-tags[b-4nw67rvgwh] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}
/* frontend/Components/SharedComponents/ats/AtsClarifyBulkDrawer.razor.rz.scp.css */
.ats-cbd[b-ie68n4gq02] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-cbd-h[b-ie68n4gq02] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}

.ats-cbd-row[b-ie68n4gq02] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-12);
}

.ats-cbd-grow[b-ie68n4gq02] {
    flex: 1;
    min-width: 0;
}

.ats-cbd-expiry[b-ie68n4gq02] {
    width: 160px;
}

.ats-cbd-note[b-ie68n4gq02] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-cbd-rule[b-ie68n4gq02] {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: var(--border-w) solid var(--line);
}
/* frontend/Components/SharedComponents/ats/AtsClarifyDrawer.razor.rz.scp.css */
.ats-cd[b-ox3efhhyy2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-cd-h[b-ox3efhhyy2] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}

.ats-cd-row[b-ox3efhhyy2] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-12);
}

.ats-cd-grow[b-ox3efhhyy2] {
    flex: 1;
    min-width: 0;
}

.ats-cd-expiry[b-ox3efhhyy2] {
    width: 160px;
}

.ats-cd-note[b-ox3efhhyy2] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-cd-rule[b-ox3efhhyy2] {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: var(--border-w) solid var(--line);
}
/* frontend/Components/SharedComponents/ats/AtsClarifySection.razor.rz.scp.css */
.ats-cs[b-t0ftisfqfq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-cs-head[b-t0ftisfqfq] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ats-cs-title[b-t0ftisfqfq] {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.ats-cs-send[b-t0ftisfqfq] {
    margin-left: auto;
}

.ats-cs-empty[b-t0ftisfqfq],
.ats-cs-none[b-t0ftisfqfq] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-cs-vis[b-t0ftisfqfq] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-cs-body[b-t0ftisfqfq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-cs-dates[b-t0ftisfqfq] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-cs-answer[b-t0ftisfqfq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ats-cs-q[b-t0ftisfqfq] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-cs-a[b-t0ftisfqfq] {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    overflow-wrap: anywhere;
}

.ats-cs-note[b-t0ftisfqfq] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-cs-note-k[b-t0ftisfqfq] {
    font-weight: var(--fw-semibold);
}

.ats-cs-acts[b-t0ftisfqfq] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ats-cs-copied[b-t0ftisfqfq] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}
/* frontend/Components/SharedComponents/ats/AtsColumnChooser.razor.rz.scp.css */
.ats-colchooser[b-htu5jzfh8a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-colchooser-help[b-htu5jzfh8a] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-colchooser-group[b-htu5jzfh8a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-8);
    border-top: var(--border-w) solid var(--line);
}

.ats-colchooser-group h3[b-htu5jzfh8a] {
    margin: 0;
    font-size: var(--fs-small);
    font-weight: 600;
}
/* frontend/Components/SharedComponents/ats/AtsEInterviewDrawer.razor.rz.scp.css */
.ats-ei[b-rp0sp49dcg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-ei-hint[b-rp0sp49dcg] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-ei-sub[b-rp0sp49dcg] {
    margin: var(--space-8) 0 0;
    font-size: var(--fs-heading-sm);
    line-height: var(--lh-heading-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}
/* frontend/Components/SharedComponents/ats/AtsEmailAttachmentChip.razor.rz.scp.css */
.ats-attach[b-9voy6gjn2o] {
    display: inline-flex;
    text-decoration: none;
    border-radius: var(--radius);
}

.ats-attach:focus-visible[b-9voy6gjn2o] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}
/* frontend/Components/SharedComponents/ats/AtsEmailBodyField.razor.rz.scp.css */
.ats-bodyfield[b-qpn8uy81kx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}
/* frontend/Components/SharedComponents/ats/AtsEmailBounceBanner.razor.rz.scp.css */
.ats-bounce[b-whx31i75az] {
    margin: var(--space-8) 0;
}
/* frontend/Components/SharedComponents/ats/AtsEmailCcBccInput.razor.rz.scp.css */
.ats-cc[b-pebsnbj224] {
    margin-bottom: var(--space-8);
}

.ats-cc-rows[b-pebsnbj224] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-cc-row[b-pebsnbj224] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.ats-cc-label[b-pebsnbj224] {
    min-width: 34px;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-semibold);
}

.ats-cc-field[b-pebsnbj224] {
    flex: 1;
    min-width: 180px;
}

.ats-cc-error[b-pebsnbj224] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--error);
}
/* frontend/Components/SharedComponents/ats/AtsEmailComposePanel.razor.rz.scp.css */
.ats-compose[b-eww9vnlcjz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-12);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.ats-compose-title[b-eww9vnlcjz] {
    margin: 0;
    font-size: var(--fs-heading-sm);
    line-height: var(--lh-heading-sm);
    font-weight: var(--fw-semibold);
}

.ats-compose-subject[b-eww9vnlcjz],
.ats-compose-total[b-eww9vnlcjz],
.ats-compose-draft[b-eww9vnlcjz],
.ats-compose-sent[b-eww9vnlcjz] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-compose-sent[b-eww9vnlcjz] {
    color: var(--ok);
}

.ats-compose-over[b-eww9vnlcjz] {
    color: var(--error);
}

.ats-compose-files[b-eww9vnlcjz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.ats-compose-actions[b-eww9vnlcjz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.ats-compose-buttons[b-eww9vnlcjz] {
    display: flex;
    gap: var(--space-8);
}
/* frontend/Components/SharedComponents/ats/AtsEmailInternalNoteForm.razor.rz.scp.css */
.ats-note[b-c9pyq1telc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-12);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--warn-bg);
}

.ats-note-title[b-c9pyq1telc] {
    margin: 0;
    font-size: var(--fs-heading-sm);
    line-height: var(--lh-heading-sm);
    font-weight: var(--fw-semibold);
    color: var(--warn);
}

.ats-note-aside[b-c9pyq1telc] {
    font-weight: var(--fw-regular);
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.ats-note-saved[b-c9pyq1telc] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--ok);
}

.ats-note-actions[b-c9pyq1telc] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-8);
}
/* frontend/Components/SharedComponents/ats/AtsEmailMessageCard.razor.rz.scp.css */
.ats-msg[b-n3s1c4r7zp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    padding: var(--space-12);
    border: var(--border-w) solid var(--line);
    border-left-width: 4px;
    border-radius: var(--radius);
    background: var(--surface);
}

.ats-msg-in[b-n3s1c4r7zp] { border-left-color: var(--accent); }
.ats-msg-out[b-n3s1c4r7zp] { border-left-color: var(--line-hover); }
.ats-msg-note[b-n3s1c4r7zp] { border-left-color: var(--warn); background: var(--warn-bg); }

.ats-msg-head[b-n3s1c4r7zp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.ats-msg-subject[b-n3s1c4r7zp] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--fw-medium);
}

.ats-msg-date[b-n3s1c4r7zp],
.ats-msg-caption[b-n3s1c4r7zp] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
    white-space: nowrap;
}

.ats-msg-caption[b-n3s1c4r7zp] {
    white-space: normal;
}

.ats-msg-body[b-n3s1c4r7zp] {
    max-height: 600px;
    overflow-y: auto;
    padding: var(--space-8);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

.ats-msg-files[b-n3s1c4r7zp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
/* frontend/Components/SharedComponents/ats/AtsEmailTemplatePicker.razor.rz.scp.css */
.ats-tpl[b-0jlk62a9ou] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-tpl-body[b-0jlk62a9ou] {
    min-height: 120px;
}

.ats-tpl-group[b-0jlk62a9ou] {
    margin: var(--space-8) 0 var(--space-4);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}

.ats-tpl-empty[b-0jlk62a9ou] {
    margin: 0;
    padding: var(--space-12);
    text-align: center;
    color: var(--text-secondary);
}

.ats-tpl-item[b-0jlk62a9ou] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    text-align: left;
}

.ats-tpl-name[b-0jlk62a9ou] {
    font-weight: var(--fw-medium);
}

.ats-tpl-snippet[b-0jlk62a9ou] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}
/* frontend/Components/SharedComponents/ats/AtsEmailThreadCard.razor.rz.scp.css */
.ats-thread[b-jc14n3agmn] {
    margin-bottom: var(--space-12);
    border: var(--border-w) solid var(--line);
    border-left-width: 4px;
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.ats-thread-unread[b-jc14n3agmn] {
    border-left-color: var(--accent);
}

.ats-thread-head[b-jc14n3agmn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12);
    background: var(--fill-1);
}

.ats-thread-subject[b-jc14n3agmn] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ats-thread-subject-unread[b-jc14n3agmn] {
    font-weight: var(--fw-semibold);
}

.ats-thread-time[b-jc14n3agmn] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
    white-space: nowrap;
}

.ats-thread-body[b-jc14n3agmn] {
    padding: var(--space-12);
    border-top: var(--border-w) solid var(--line);
}

.ats-thread-actions[b-jc14n3agmn] {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-12);
}

.ats-thread-form[b-jc14n3agmn] {
    margin-top: var(--space-12);
}
/* frontend/Components/SharedComponents/ats/AtsFirstInfoBulkDrawer.razor.rz.scp.css */
.ats-fid[b-5mf8qwhtrq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-fid-body[b-5mf8qwhtrq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

/* a section that is switched off stays readable but inert (the switch is in the header, outside this block) */
.ats-fid-off[b-5mf8qwhtrq] {
    opacity: var(--disabled-opacity, 0.5);
    pointer-events: none;
}

.ats-fid-note[b-5mf8qwhtrq] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-fid-groups[b-5mf8qwhtrq] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-12);
}

.ats-fid-gh[b-5mf8qwhtrq],
.ats-fid-h[b-5mf8qwhtrq] {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}

.ats-fid-field[b-5mf8qwhtrq] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-height: 32px;
}

.ats-fid-row[b-5mf8qwhtrq] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-12);
}

.ats-fid-grow[b-5mf8qwhtrq] {
    flex: 1;
    min-width: 0;
}

.ats-fid-expiry[b-5mf8qwhtrq] {
    width: 160px;
}

.ats-fid-rule[b-5mf8qwhtrq] {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: var(--border-w) solid var(--line);
}
/* frontend/Components/SharedComponents/ats/AtsInfoRequestAnswersDetail.razor.rz.scp.css */
.ats-info-detail[b-uci3590zgw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-info-detail-head[b-uci3590zgw] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: baseline;
}

.ats-info-detail-when[b-uci3590zgw],
.ats-info-detail-none[b-uci3590zgw],
.ats-info-detail-hint[b-uci3590zgw] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-info-detail-none[b-uci3590zgw] {
    margin: 0;
}

.ats-info-detail-hint[b-uci3590zgw] {
    display: block;
}

.ats-info-detail-text[b-uci3590zgw] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ats-info-detail-links[b-uci3590zgw] {
    display: flex;
    gap: var(--space-8);
}
/* frontend/Components/SharedComponents/ats/AtsInfoRequestDrawer.razor.rz.scp.css */
.ats-ir[b-zzsk0pp49g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-ir-hint[b-zzsk0pp49g] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-ir-group[b-zzsk0pp49g] {
    margin: var(--space-8) 0 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}

.ats-ir-rows[b-zzsk0pp49g] {
    display: flex;
    flex-direction: column;
}

.ats-ir-row[b-zzsk0pp49g] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-height: 32px;
}

.ats-ir-template[b-zzsk0pp49g] {
    display: flex;
}
/* frontend/Components/SharedComponents/ats/AtsJobCreateDrawer.razor.rz.scp.css */
.ats-addjob[b-vuhfei4iuf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-addjob-row[b-vuhfei4iuf] {
    display: flex;
    gap: var(--space-8);
}

.ats-addjob h3[b-vuhfei4iuf] {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 600;
}

.ats-addjob-hint[b-vuhfei4iuf] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-addjob-weights[b-vuhfei4iuf],
.ats-addjob-desc[b-vuhfei4iuf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-addjob-grid[b-vuhfei4iuf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-8);
}
/* frontend/Components/SharedComponents/ats/AtsJobMatchDrawer.razor.rz.scp.css */
.ats-jm[b-f35uvyxvhv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-jm-busy[b-f35uvyxvhv] {
    min-height: 160px;
}

.ats-jm-count[b-f35uvyxvhv] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-jm-job[b-f35uvyxvhv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ats-jm-title[b-f35uvyxvhv] {
    font-weight: var(--fw-semibold);
}

.ats-jm-sub[b-f35uvyxvhv] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-jm-scores[b-f35uvyxvhv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

.ats-jm-score[b-f35uvyxvhv] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ats-jm-score-label[b-f35uvyxvhv] {
    width: 56px;
    flex-shrink: 0;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
}
/* frontend/Components/SharedComponents/ats/AtsJobPeopleTab.razor.rz.scp.css */
.ats-people[b-l837exw4bv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-people-add[b-l837exw4bv] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.ats-people-name[b-l837exw4bv] {
    display: flex;
    flex-direction: column;
}

.ats-people-note[b-l837exw4bv] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-people-warn[b-l837exw4bv] {
    color: var(--warning, var(--text-secondary));
}
/* frontend/Components/SharedComponents/ats/AtsMergeTagMenu.razor.rz.scp.css */
.ats-mtm[b-dree2ruxt2] {
    position: relative;
    display: inline-block;
}

.ats-mtm-pop[b-dree2ruxt2] {
    position: absolute;
    z-index: 5;
    top: 100%;
    left: 0;
}
/* frontend/Components/SharedComponents/ats/AtsPage.razor.rz.scp.css */
.ats-page-hold[b-izpw4y8xy6] {
    min-height: 160px;
}
/* frontend/Components/SharedComponents/ats/AtsQueryValueEditor.razor.rz.scp.css */
.ats-qve[b-x6pqvgkolm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 200px;
    flex: 1;
}

.ats-qve-wide[b-x6pqvgkolm] {
    min-width: 280px;
    flex: 2;
}

.ats-qve-row[b-x6pqvgkolm] {
    display: flex;
    gap: var(--space-8);
    flex: 1;
}

.ats-qve-skilltags[b-x6pqvgkolm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
/* frontend/Components/SharedComponents/ats/AtsQuickFilterBar.razor.rz.scp.css */
.ats-qf-slot[b-e69g2423v0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.ats-qf-slot-label[b-e69g2423v0] {
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.ats-qf-actions[b-e69g2423v0] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ats-qf-advanced[b-e69g2423v0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}
/* frontend/Components/SharedComponents/ats/AtsSelectionBar.razor.rz.scp.css */
.ats-selbar[b-5q30wxo1hi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--accent-soft);
}

.ats-selbar-count[b-5q30wxo1hi] {
    font-weight: 600;
    color: var(--text-primary);
}

.ats-selbar-view[b-5q30wxo1hi] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-selbar-acts[b-5q30wxo1hi] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    margin-left: auto;
}

.ats-selbar-menuwrap[b-5q30wxo1hi] {
    position: relative;
    display: inline-block;
}
/* frontend/Components/SharedComponents/ats/AtsShareableLinkDrawer.razor.rz.scp.css */
.ats-share[b-kn6gwjwspv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-share-busy[b-kn6gwjwspv] {
    min-height: 200px;
}

.ats-share-hint[b-kn6gwjwspv] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-share-made[b-kn6gwjwspv] {
    text-align: center;
}

.ats-share-title[b-kn6gwjwspv] {
    margin: 0;
    font-size: var(--fs-heading-md);
    line-height: var(--lh-heading-md);
    font-weight: var(--fw-semibold);
}

.ats-share-meta[b-kn6gwjwspv] {
    margin: var(--space-4) 0 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-share-url[b-kn6gwjwspv] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
}

.ats-share-url-field[b-kn6gwjwspv] {
    flex: 1;
    min-width: 0;
}

.ats-share-copied[b-kn6gwjwspv] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--ok);
}

.ats-share-mail[b-kn6gwjwspv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding-top: var(--space-8);
}
/* frontend/Components/SharedComponents/ats/AtsShareLinkDialog.razor.rz.scp.css */
.ats-share-dialog[b-yhwveqq1rj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-share-dialog-hint[b-yhwveqq1rj] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}
/* frontend/Components/SharedComponents/ats/AtsSkillGradeEditor.razor.rz.scp.css */
.ats-skill-grade-read[b-nvd8e63s19] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
/* frontend/Components/SharedComponents/ats/AtsSkillTagInput.razor.rz.scp.css */
.ats-skill-input[b-m0ts7indhn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ats-skill-input-find[b-m0ts7indhn] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
}

.ats-skill-input-box[b-m0ts7indhn] {
    flex: 1;
    min-width: 0;
}

.ats-skill-input-group[b-m0ts7indhn] {
    margin: var(--space-8) 0 0;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.ats-skill-input-chosen[b-m0ts7indhn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ats-skill-input-row[b-m0ts7indhn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}
/* frontend/Components/SharedComponents/ats/AtsSmartMatchScorePanel.razor.rz.scp.css */
.ats-scorepanel[b-2rtk3re8ya] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-scorepanel-caption[b-2rtk3re8ya] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-scorepanel-actions[b-2rtk3re8ya] {
    display: flex;
    gap: var(--space-8);
    padding-top: var(--space-12);
    border-top: var(--border-w) solid var(--line);
}
/* frontend/Components/SharedComponents/ats/AtsWhatsAppBulkDrawer.razor.rz.scp.css */
.ats-wab[b-1xjt6ixr06] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-wab-busy[b-1xjt6ixr06] {
    min-height: 80px;
}

.ats-wab-sent[b-1xjt6ixr06] {
    display: block;
}

.ats-wab-note[b-1xjt6ixr06] {
    display: block;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ats-wab-preview[b-1xjt6ixr06] {
    font-family: ui-monospace, monospace;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    white-space: pre-wrap;
}

.ats-wab-vars[b-1xjt6ixr06] {
    margin: 0;
    font-weight: var(--fw-semibold);
}

.ats-wab-hint[b-1xjt6ixr06] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-wab-var[b-1xjt6ixr06] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
}

.ats-wab-var-field[b-1xjt6ixr06] {
    flex: 1;
    min-width: 0;
}
/* frontend/Components/SharedComponents/ats/AtsWhatsAppComposerSection.razor.rz.scp.css */
.ats-wa[b-gvsosd518d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-wa-busy[b-gvsosd518d] {
    min-height: 80px;
}

.ats-wa-preview[b-gvsosd518d] {
    margin: 0;
    padding: var(--space-8);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--fill-1);
    font-family: ui-monospace, monospace;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
    white-space: pre-wrap;
}

.ats-wa-vars[b-gvsosd518d] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-semibold);
}

.ats-wa-var[b-gvsosd518d] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
}

.ats-wa-var-field[b-gvsosd518d] {
    flex: 1;
    min-width: 0;
}
/* frontend/Components/SharedComponents/ats/dashboard/AtsDashboardInterviewsTable.razor.rz.scp.css */
.ats-dash-note[b-w1mtphnajx] {
    display: inline-flex;
    color: var(--accent);
}
/* frontend/Components/SharedComponents/ats/dashboard/CeipalApplicantsWidget.razor.rz.scp.css */
.ats-dash-tiles[b-u173jrfpg7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-12);
}
/* frontend/Components/SharedComponents/ats/dashboard/InterviewsByBookingUrlWidget.razor.rz.scp.css */
.ats-dash-tiles[b-d93tz9ua44] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-12);
}

.ats-dash-controls[b-d93tz9ua44] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-12);
}

.ats-dash-hint[b-d93tz9ua44] {
    margin: var(--space-8) 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/SharedComponents/ats/dashboard/InterviewsLast30DaysWidget.razor.rz.scp.css */
.ats-dash-tiles[b-ca5hswxkmr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-12);
}
/* frontend/Components/SharedComponents/ats/dashboard/NewApplicationsWidget.razor.rz.scp.css */
.ats-dash-tiles[b-ot3s9rsvp6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-12);
}
/* frontend/Components/SharedComponents/ats/dashboard/PipelineOverviewWidget.razor.rz.scp.css */
.ats-dash-tiles[b-wyx8909xmo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-12);
}

.ats-dash-controls[b-wyx8909xmo] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-12);
}

.ats-dash-hint[b-wyx8909xmo] {
    margin: var(--space-8) 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/SharedComponents/ats/test/AtsCandidateTestsSection.razor.rz.scp.css */
.ats-tests[b-qgvzrggs2i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-tests-head[b-qgvzrggs2i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.ats-tests-title[b-qgvzrggs2i] {
    margin: 0;
    font-size: var(--fs-heading-sm);
    font-weight: var(--fw-semibold);
}

.ats-tests-none[b-qgvzrggs2i] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}
/* frontend/Components/SharedComponents/ats/test/AtsQuestionEditorDrawer.razor.rz.scp.css */
.ats-qeditor[b-qy6ia53l5r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-qeditor-row[b-qy6ia53l5r] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
}

.ats-qeditor-chips[b-qy6ia53l5r] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.ats-qeditor h3[b-qy6ia53l5r] {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 600;
}

.ats-qeditor-label[b-qy6ia53l5r] {
    font-size: var(--fs-small);
    font-weight: 600;
}
/* frontend/Components/SharedComponents/ats/test/AtsQuestionPickerDrawer.razor.rz.scp.css */
.ats-picker[b-quqx4unbn1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}
/* frontend/Components/SharedComponents/ats/test/AtsTestAttemptReview.razor.rz.scp.css */
.ats-attempt[b-djosrbykkg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-attempt-head[b-djosrbykkg],
.ats-attempt-q-head[b-djosrbykkg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: center;
}

.ats-attempt-fact[b-djosrbykkg],
.ats-attempt-note[b-djosrbykkg] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-attempt-q[b-djosrbykkg] {
    border: var(--border-w) solid var(--line);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-attempt-stem[b-djosrbykkg],
.ats-attempt-text[b-djosrbykkg] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ats-attempt-options[b-djosrbykkg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-attempt-opt[b-djosrbykkg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-8);
    border-left: 4px solid var(--line);
}

.ats-attempt-opt-correct[b-djosrbykkg] {
    border-left-color: var(--ok);
}

.ats-attempt-opt-wrong[b-djosrbykkg] {
    border-left-color: var(--error);
}

.ats-attempt-opt-text[b-djosrbykkg] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ats-attempt-accepted[b-djosrbykkg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}
/* frontend/Components/SharedComponents/ats/test/AtsTestDetailsPanel.razor.rz.scp.css */
.ats-testpanel[b-7x760fgms6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-testpanel-row[b-7x760fgms6] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.ats-testpanel-tags[b-7x760fgms6] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.ats-testpanel-hint[b-7x760fgms6] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/SharedComponents/ats/test/AtsTestProctoringPanel.razor.rz.scp.css */
.ats-testpanel[b-v2fdf8fj85] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-testpanel-row[b-v2fdf8fj85] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.ats-testpanel-tags[b-v2fdf8fj85] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.ats-testpanel-hint[b-v2fdf8fj85] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/SharedComponents/ats/test/AtsTestQuestionsPanel.razor.rz.scp.css */
.ats-testpanel[b-kjjuuku5dr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-testpanel-row[b-kjjuuku5dr] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.ats-testpanel-tags[b-kjjuuku5dr] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.ats-testpanel-hint[b-kjjuuku5dr] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ats-qgrip[b-kjjuuku5dr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    cursor: grab;
    color: var(--text-secondary);
    border-radius: var(--radius);
}

.ats-qgrip:focus-visible[b-kjjuuku5dr] {
    outline: var(--focus-ring, 2px solid var(--accent));
}

.ats-sronly[b-kjjuuku5dr] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* frontend/Components/SharedComponents/ats/test/AtsTestRequestDrawer.razor.rz.scp.css */
.ats-tr[b-77a8hecf3n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ats-tr-group[b-77a8hecf3n] {
    margin: var(--space-8) 0 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}

.ats-tr-tags[b-77a8hecf3n] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.ats-tr-caption[b-77a8hecf3n] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ats-tr-dups[b-77a8hecf3n] {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
}

.ats-tr-dups li[b-77a8hecf3n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-4) 0;
}
/* frontend/Components/SharedComponents/ats/test/AtsTestRulesPanel.razor.rz.scp.css */
.ats-testpanel[b-4s6pv0notn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ats-testpanel-row[b-4s6pv0notn] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.ats-testpanel-tags[b-4s6pv0notn] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.ats-testpanel-hint[b-4s6pv0notn] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/SharedComponents/cashflow/LedgerSidebarPanel.razor.rz.scp.css */
.ledger-card[b-2r4tt4zkry] {
    transition: transform 0.2s;
}

.ledger-card:hover[b-2r4tt4zkry] {
    transform: translateY(-2px);
}
/* frontend/Components/SharedComponents/crm/conversation/CrmChatSyncDoneConfirm.razor.rz.scp.css */
.chat-sync-refused[b-956uf8sfeu] {
    margin: var(--space-8) 0 0;
    padding-inline-start: var(--space-16);
    color: var(--text-secondary);
}
/* frontend/Components/SharedComponents/crm/conversation/CrmChatSyncStatusLine.razor.rz.scp.css */
.chat-sync[b-zkm68uml1l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.chat-sync-line[b-zkm68uml1l] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.chat-sync-actions[b-zkm68uml1l] {
    display: flex;
    justify-content: flex-end;
}
/* frontend/Components/SharedComponents/crm/conversation/CrmConversationPane.razor.rz.scp.css */
.pane[b-4x2vqyvr17] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.pane-head[b-4x2vqyvr17] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12);
}

.pane-status[b-4x2vqyvr17] {
    margin-inline-start: auto;
    min-width: 0;
}

.pane-partial-sentence[b-4x2vqyvr17] {
    margin: 0;
}

.pane-body[b-4x2vqyvr17] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-16);
}

.pane-body[b-4x2vqyvr17] >  .pane-identities {
    flex: 0 1 18rem;
}

.pane-thread[b-4x2vqyvr17] {
    flex: 1 1 24rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.pane-acts[b-4x2vqyvr17] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}
/* frontend/Components/SharedComponents/crm/conversation/CrmIdentitySwitches.razor.rz.scp.css */
.identity-switches[b-mct9b0u771] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.identity-switch-sentence[b-mct9b0u771],
.identity-switch-refusal[b-mct9b0u771] {
    margin: 0;
}
/* frontend/Components/SharedComponents/crm/conversation/CrmPaneIdentityList.razor.rz.scp.css */
.pane-identities[b-hfxa2t9hw3] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pane-identity[b-hfxa2t9hw3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-12);
    border-bottom: 1px solid var(--line);
}

.pane-identity[aria-current="true"][b-hfxa2t9hw3] {
    background: var(--accent-soft);
}

.pane-identity-count[b-hfxa2t9hw3] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.pane-identity-preview[b-hfxa2t9hw3] {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-small);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pane-identity-actions[b-hfxa2t9hw3] {
    display: flex;
    gap: var(--space-8);
}
/* frontend/Components/SharedComponents/crm/CrmColumnChooser.razor.rz.scp.css */
.crm-colchooser[b-asitv2jl6i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.crm-colchooser-help[b-asitv2jl6i] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.crm-colchooser-group[b-asitv2jl6i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-8);
    border-top: var(--border-w) solid var(--line);
}

.crm-colchooser-group h3[b-asitv2jl6i] {
    margin: 0;
    font-size: var(--fs-small);
    font-weight: 600;
}

.crm-colchooser-empty[b-asitv2jl6i] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/SharedComponents/crm/CrmCustomFields.razor.rz.scp.css */
.ccf-grid[b-cczpa8b40w] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-16);
}
/* frontend/Components/SharedComponents/crm/CrmFilterBuilder.razor.rz.scp.css */
.cfb-sep[b-etf92hr32n] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.cfb-note[b-etf92hr32n] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.cfb-row[b-etf92hr32n] {
    padding-bottom: var(--space-8);
}

.cfb-cell[b-etf92hr32n] {
    min-width: 200px;
    flex: 1 1 200px;
}

.cfb-json[b-etf92hr32n] {
    margin: 0;
    padding: var(--space-8);
    border: var(--border-w) solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    white-space: pre-wrap;
    word-break: break-word;
}
/* frontend/Components/SharedComponents/crm/CrmSelectionBar.razor.rz.scp.css */
.crm-selbar[b-pp8gi5inho] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--accent-soft);
}

.crm-selbar-count[b-pp8gi5inho] {
    font-weight: 600;
    color: var(--text-primary);
}

.crm-selbar-capped[b-pp8gi5inho] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.crm-selbar-acts[b-pp8gi5inho] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    margin-left: auto;
}

.crm-selbar-menuwrap[b-pp8gi5inho] {
    position: relative;
    display: inline-block;
}
/* frontend/Components/SharedComponents/crm/CrmTaskAddDrawer.razor.rz.scp.css */
.ct-add-opener[b-71kczg4a6z] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
}

.ct-add-reason[b-71kczg4a6z] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ct-add-inline-error[b-71kczg4a6z] {
    margin: 0;
    color: var(--error);
    font-size: var(--fs-small);
}
/* frontend/Components/SharedComponents/crm/CrmTaskDrawer.razor.rz.scp.css */
.ctd-body[b-n8uvy5lrjp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.ctd-permission[b-n8uvy5lrjp] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ctd-error[b-n8uvy5lrjp],
.ctd-delete-error[b-n8uvy5lrjp] {
    margin: 0;
    color: var(--error);
    font-size: var(--fs-small);
}

.ctd-actions[b-n8uvy5lrjp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8) var(--space-12);
}

.ctd-act-reason[b-n8uvy5lrjp],
.ctd-delete-reason[b-n8uvy5lrjp] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ctd-unresolved[b-n8uvy5lrjp] {
    color: var(--text-secondary);
}
/* frontend/Components/SharedComponents/crm/CrmTaskHistory.razor.rz.scp.css */
/* One History line inside ListRow: when, who and what in a wrapping row. Every colour and space is a token. */
.th-body[b-i9301hg7a9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-12);
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-8) 0;
}

.th-when[b-i9301hg7a9] {
    flex: none;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.th-who[b-i9301hg7a9] {
    flex: none;
}

.th-kind[b-i9301hg7a9] {
    flex: none;
    color: var(--text-secondary);
}
/* frontend/Components/SharedComponents/crm/CrmTaskList.razor.rz.scp.css */
.ctl-head[b-xl32q3hy5c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8) var(--space-12);
    margin-bottom: var(--space-8);
}

.ctl-heading[b-xl32q3hy5c] {
    margin: 0;
    font-size: var(--fs-title);
    line-height: var(--lh-title);
}

.ctl-heading:focus-visible[b-xl32q3hy5c] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ctl-body[b-xl32q3hy5c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-16);
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-8) 0;
}

.ctl-title[b-xl32q3hy5c] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--accent);
    cursor: pointer;
}

.ctl-title:hover[b-xl32q3hy5c] {
    text-decoration: underline;
}

.ctl-title:focus-visible[b-xl32q3hy5c] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ctl-title-done[b-xl32q3hy5c] {
    color: var(--text-secondary);
    font-weight: 400;
}

.ctl-due[b-xl32q3hy5c],
.ctl-assignee[b-xl32q3hy5c] {
    flex: none;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ctl-overdue[b-xl32q3hy5c] {
    color: var(--error);
}

.ctl-overdue-text[b-xl32q3hy5c] {
    margin-left: var(--space-8);
    font-weight: 600;
}

.ctl-act[b-xl32q3hy5c] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    flex: none;
}

.ctl-act-reason[b-xl32q3hy5c] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ctl-row-error[b-xl32q3hy5c] {
    flex-basis: 100%;
    color: var(--error);
    font-size: var(--fs-small);
}
/* frontend/Components/SharedComponents/crm/CrmTaskRecordPicker.razor.rz.scp.css */
.ct-picker[b-jol840w215] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ct-picker-preset[b-jol840w215] {
    padding: var(--space-8) 0;
    color: var(--text);
}

.ct-picker-kind[b-jol840w215] {
    color: var(--text-secondary);
}
/* frontend/Components/SharedComponents/crm/CrmTasksSection.razor.rz.scp.css */
.cts[b-kyihpw46ku] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.cts-head[b-kyihpw46ku] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-8) var(--space-12);
}

.cts-heading[b-kyihpw46ku] {
    margin: 0;
    font-size: var(--fs-title);
    line-height: var(--lh-title);
}

.cts-heading:focus-visible[b-kyihpw46ku] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.cts-overdue-count[b-kyihpw46ku] {
    color: var(--error);
    font-size: var(--fs-small);
    font-weight: 600;
}

.cts-assignees-error[b-kyihpw46ku] {
    color: var(--error);
    font-size: var(--fs-small);
}
/* frontend/Components/SharedComponents/crm/CrmTasksSectionRow.razor.rz.scp.css */
.cts-body[b-2binwjkn8m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-16);
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-8) 0;
}

.cts-what[b-2binwjkn8m],
.cts-record[b-2binwjkn8m] {
    display: flex;
    flex-direction: column;
    flex: 1 1 12rem;
    min-width: 0;
}

.cts-title[b-2binwjkn8m] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--accent);
    cursor: pointer;
}

.cts-title:hover[b-2binwjkn8m] {
    text-decoration: underline;
}

.cts-title:focus-visible[b-2binwjkn8m] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.cts-talking-points[b-2binwjkn8m],
.cts-record-secondary[b-2binwjkn8m],
.cts-no-record[b-2binwjkn8m],
.cts-act-reason[b-2binwjkn8m] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.cts-due[b-2binwjkn8m] {
    flex: none;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.cts-overdue[b-2binwjkn8m] {
    color: var(--error);
}

.cts-overdue-text[b-2binwjkn8m] {
    margin-left: var(--space-8);
    font-weight: 600;
}

.cts-acts[b-2binwjkn8m] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    flex: none;
}

.cts-row-error[b-2binwjkn8m] {
    flex: 1 1 100%;
    color: var(--error);
    font-size: var(--fs-small);
}
/* frontend/Components/SharedComponents/crm/LeadDueDateCell.razor.rz.scp.css */
/* The overdue day: the danger text token, nothing else. */
.ldc-overdue[b-i89dr4f8nl] {
    color: var(--error);
}
/* frontend/Components/SharedComponents/crm/LeadHistory.razor.rz.scp.css */
/* One History line inside ListRow: the facts in a wrapping row, the reason under them. Every colour is a token. */
.lh-icon[b-idyusp3g4d] {
    flex: none;
    color: var(--text-secondary);
}

.lh-who[b-idyusp3g4d] {
    flex: none;
}

.lh-who-system[b-idyusp3g4d],
.lh-when[b-idyusp3g4d] {
    color: var(--text-secondary);
}

.lh-when[b-idyusp3g4d] {
    font-size: var(--fs-small);
    white-space: nowrap;
    flex: none;
}

.lh-field[b-idyusp3g4d] {
    flex: none;
    color: var(--text-secondary);
}

.lh-reason[b-idyusp3g4d] {
    flex-basis: 100%;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.lh-body[b-idyusp3g4d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-12);
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-8) 0;
}
/* frontend/Components/SharedComponents/crm/messages/CrmCallView.razor.rz.scp.css */
.crm-call-card[b-0i0kda9s4x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    width: 100%;
    margin-bottom: var(--space-8);
    padding: var(--space-8) var(--space-12);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-body);
}

.crm-call-card-planned[b-0i0kda9s4x] {
    background: var(--accent-soft);
}

.crm-call-head[b-0i0kda9s4x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.crm-call-time[b-0i0kda9s4x] {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.crm-call-duration[b-0i0kda9s4x] {
    color: var(--text-secondary);
}

.crm-call-text[b-0i0kda9s4x] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.crm-call-origin[b-0i0kda9s4x] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.crm-call-cancelled[b-0i0kda9s4x] {
    margin-bottom: var(--space-8);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.crm-call-error[b-0i0kda9s4x] {
    color: var(--error);
}
/* frontend/Components/SharedComponents/crm/messages/CrmConversationThread.razor.rz.scp.css */
.crm-thread[b-jgnx56m8ii] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.crm-open-group[b-jgnx56m8ii] {
    margin-top: var(--space-16);
    padding-top: var(--space-12);
    border-top: var(--border-w) solid var(--line);
}

.crm-open-heading[b-jgnx56m8ii] {
    margin: 0 0 var(--space-8);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
}
/* frontend/Components/SharedComponents/crm/messages/CrmEmailView.razor.rz.scp.css */
.crm-email-row[b-stj5oy88sw] {
    display: flex;
    margin-bottom: var(--space-8);
}

.crm-email-row-out[b-stj5oy88sw] {
    justify-content: flex-end;
}

.crm-email-row-in[b-stj5oy88sw] {
    justify-content: flex-start;
}

.crm-email-card[b-stj5oy88sw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 80%;
    max-width: 100%;
    padding: var(--space-12);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-body);
}

.crm-email-row-out .crm-email-card[b-stj5oy88sw] {
    background: var(--accent-soft);
}

.crm-email-head[b-stj5oy88sw] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-8);
}

.crm-email-time[b-stj5oy88sw],
.crm-email-address-label[b-stj5oy88sw] {
    color: var(--text-secondary);
}

.crm-email-address[b-stj5oy88sw] {
    overflow-wrap: anywhere;
}

.crm-email-body[b-stj5oy88sw] {
    overflow-wrap: anywhere;
}

.crm-email-unsafe[b-stj5oy88sw] {
    color: var(--text-secondary);
}
/* frontend/Components/SharedComponents/crm/messages/CrmMessageActs.razor.rz.scp.css */
.crm-acts[b-bgwct3c0pd] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-8);
    margin-top: var(--space-4);
}

.crm-acts-menu[b-bgwct3c0pd] {
    position: relative;
}

.crm-act-refusal[b-bgwct3c0pd] {
    margin-top: var(--space-4);
    color: var(--error);
    font-size: var(--fs-small);
    text-align: right;
}
/* frontend/Components/SharedComponents/crm/messages/CrmMessageItem.razor.rz.scp.css */
.crm-item[b-b3wgilah79] {
    margin-bottom: var(--space-12);
}

.crm-item-plain[b-b3wgilah79] {
    color: var(--text);
    font-size: var(--fs-body);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.crm-item-error[b-b3wgilah79] {
    padding: var(--space-8) var(--space-12);
    border: var(--border-w) solid var(--error);
    border-radius: var(--radius);
    color: var(--error);
    font-size: var(--fs-small);
}

.crm-item-meta[b-b3wgilah79] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-12);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.crm-item-meta-out[b-b3wgilah79] {
    justify-content: flex-end;
}

.crm-item-refusal[b-b3wgilah79] {
    color: var(--error);
}

.crm-item-cancelled[b-b3wgilah79] {
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius);
    background: var(--fill-1);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.crm-item-time[b-b3wgilah79] {
    color: var(--text-secondary);
}
/* frontend/Components/SharedComponents/crm/messages/CrmTextSetView.razor.rz.scp.css */
.crm-bubble-row[b-7fzp1klurj] {
    display: flex;
    margin-bottom: var(--space-8);
}

.crm-bubble-row-out[b-7fzp1klurj] {
    justify-content: flex-end;
}

.crm-bubble-row-in[b-7fzp1klurj] {
    justify-content: flex-start;
}

.crm-bubble-column[b-7fzp1klurj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 70%;
}

.crm-bubble-row-out .crm-bubble-column[b-7fzp1klurj] {
    align-items: flex-end;
}

.crm-bubble-row-in .crm-bubble-column[b-7fzp1klurj] {
    align-items: flex-start;
}

.crm-bubble-channel[b-7fzp1klurj] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.crm-bubble[b-7fzp1klurj] {
    display: inline-flex;
    align-items: flex-end;
    gap: var(--space-4);
    max-width: 100%;
    padding: var(--space-8) var(--space-12);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-body);
}

.crm-bubble-row-out .crm-bubble[b-7fzp1klurj] {
    background: var(--accent-soft);
}

.crm-bubble-text[b-7fzp1klurj] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.crm-bubble-synced[b-7fzp1klurj] {
    display: inline-flex;
    color: var(--text-secondary);
}
/* frontend/Components/SharedComponents/crm/messages/CrmTextWithSubjectView.razor.rz.scp.css */
.crm-bubble-row[b-wbf8as23o4] {
    display: flex;
    margin-bottom: var(--space-8);
}

.crm-bubble-row-out[b-wbf8as23o4] {
    justify-content: flex-end;
}

.crm-bubble-row-in[b-wbf8as23o4] {
    justify-content: flex-start;
}

.crm-bubble[b-wbf8as23o4] {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 70%;
    padding: var(--space-8) var(--space-12);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-body);
}

.crm-bubble-row-out .crm-bubble[b-wbf8as23o4] {
    background: var(--accent-soft);
}

.crm-bubble-inmail[b-wbf8as23o4] {
    color: var(--text-secondary);
}

.crm-bubble-subject[b-wbf8as23o4],
.crm-bubble-text[b-wbf8as23o4] {
    overflow-wrap: anywhere;
}

.crm-bubble-text[b-wbf8as23o4] {
    white-space: pre-wrap;
}
/* frontend/Components/SharedComponents/digest/DigestBoard.razor.rz.scp.css */
.digest-board-head[b-y6g9cu5ttk] {
    position: sticky;
    top: var(--topbar-h);
    z-index: 5;
    background: var(--page);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.digest-board-title[b-y6g9cu5ttk] {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.digest-board-title-text[b-y6g9cu5ttk] {
    flex: 1 1 auto;
    min-width: 0;
}

.digest-board-filters[b-y6g9cu5ttk],
.digest-board-verdict[b-y6g9cu5ttk] {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: var(--space-8);
}

.digest-board-chips[b-y6g9cu5ttk] {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: var(--space-4);
}

.digest-board-sections[b-y6g9cu5ttk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}
/* frontend/Components/SharedComponents/digest/DigestTypeSection.razor.rz.scp.css */
.digest-type-head[b-vo8ftxjl39],
.digest-block[b-vo8ftxjl39] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin-block-end: var(--space-12);
}

.digest-type-head[b-vo8ftxjl39] {
    flex-flow: row wrap;
    align-items: baseline;
    gap: var(--space-8);
}

.digest-type-name[b-vo8ftxjl39],
.digest-block-title[b-vo8ftxjl39] {
    margin: 0;
}

.digest-type-meta[b-vo8ftxjl39],
.digest-count[b-vo8ftxjl39],
.digest-field[b-vo8ftxjl39] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.digest-row[b-vo8ftxjl39] {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: var(--space-8);
    padding-block: var(--space-4);
    border-block-end: var(--border-w) solid var(--line);
}

.digest-row-body[b-vo8ftxjl39],
.digest-row-acted[b-vo8ftxjl39],
.digest-row-acts[b-vo8ftxjl39] {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: var(--space-8);
}

.digest-reason[b-vo8ftxjl39] {
    flex-basis: 100%;
}

.digest-row[data-state="done"] .digest-row-body[b-vo8ftxjl39] {
    text-decoration: line-through;
}

.digest-row-body[b-vo8ftxjl39]  .digest-field {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.digest-row-body[b-vo8ftxjl39]  code {
    font-size: var(--fs-small);
}

.digest-row-head[b-vo8ftxjl39] { display: flex; flex-flow: row wrap; gap: var(--space-8); font-size: var(--fs-small); color: var(--text-secondary); }

.digest-row-person[b-vo8ftxjl39] { display: flex; flex-flow: row wrap; align-items: center; gap: var(--space-8); }

.digest-row[data-state="done"] .digest-row-person[b-vo8ftxjl39] { text-decoration: line-through; }

.digest-done-here[b-vo8ftxjl39] { display: flex; flex-direction: column; gap: var(--space-4); }

.digest-done-here-title[b-vo8ftxjl39] { font-size: var(--fs-small); color: var(--text-secondary); }
/* frontend/Components/SharedComponents/digest/NextHolidayLines.razor.rz.scp.css */
.digest-holiday[b-fkpwvdjrip] {
    margin: 0;
    font-size: var(--fs-small);
}
/* frontend/Components/SharedComponents/digest/rows/ExpenseSubmittedRow.razor.rz.scp.css */
.expense-row-claim-group[b-aeqppapvkc] {
    display: flex;
    flex-flow: column;
    gap: var(--space-4);
}

.expense-row-claim-line[b-aeqppapvkc] {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: var(--space-8);
}

.expense-row-description[b-aeqppapvkc] {
    display: block;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--fs-small);
    text-align: left;
    cursor: pointer;
}

.expense-row-description[aria-expanded="false"][b-aeqppapvkc] {
    max-width: 36ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.expense-row-description[aria-expanded="true"][b-aeqppapvkc] {
    white-space: normal;
    overflow-wrap: anywhere;
}

.expense-row-receipts-failed[b-aeqppapvkc] {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: var(--space-8);
}
/* frontend/Components/SharedComponents/digest/rows/LeaveApplicationRow.razor.rz.scp.css */
.leave-row-lines[b-lbtpu71eg7] {
    flex: 1 1 100%;
    min-width: 0;
}

.leave-row-age[b-lbtpu71eg7] {
    flex: 1 1 100%;
    min-width: 0;
}
/* frontend/Components/SharedComponents/digest/rows/ManualTimeRequestRow.razor.rz.scp.css */
.manual-time-age[b-gip0mhjgma] {
    flex: 1 1 100%;
    min-width: 0;
}
/* frontend/Components/SharedComponents/Document/DocumentDiffView.razor.rz.scp.css */
/* Per-block status decoration for the sign-off compare view (plan 12.4 slice 9). */

.diff-block[b-4b87g2pco5] {
    border-left: 4px solid var(--mud-palette-lines-default);
}

.diff-block.diff-added[b-4b87g2pco5] {
    border-left-color: var(--mud-palette-success);
    background-color: rgba(76, 175, 80, 0.06);
}

.diff-block.diff-removed[b-4b87g2pco5] {
    border-left-color: var(--mud-palette-error);
    background-color: rgba(244, 67, 54, 0.06);
    opacity: 0.7;
}

/* A wholly-removed block is struck through to read as gone. */
.diff-block.diff-removed .tinymce-content[b-4b87g2pco5] {
    text-decoration: line-through;
    text-decoration-color: var(--mud-palette-error);
}

.diff-block.diff-modified[b-4b87g2pco5] {
    border-left-color: var(--mud-palette-warning);
    background-color: rgba(255, 152, 0, 0.06);
}

.diff-block.diff-moved[b-4b87g2pco5] {
    border-left-color: var(--mud-palette-info);
    background-color: rgba(33, 150, 243, 0.06);
}

/* Inline redline (htmldiff.net ins/del) inside a Modified rich-text block. The redline HTML is injected via
   MarkupString, so its ins/del elements do NOT carry the component's scope attribute — ::deep reaches them. */
.diff-redline[b-4b87g2pco5]  ins {
    background-color: rgba(76, 175, 80, 0.25);
    color: var(--mud-palette-success-darken, #1b5e20);
    text-decoration: none;
    border-radius: 2px;
    padding: 0 1px;
}

.diff-redline[b-4b87g2pco5]  del {
    background-color: rgba(244, 67, 54, 0.20);
    color: var(--mud-palette-error-darken, #b71c1c);
    text-decoration: line-through;
    border-radius: 2px;
    padding: 0 1px;
}
/* frontend/Components/SharedComponents/Document/DocumentList.razor.rz.scp.css */
.document-list-scroll[b-8721iqp6gh] {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
}

.document-list-scroll:hover[b-8721iqp6gh] {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Webkit browsers (Chrome, Safari, Edge) */
.document-list-scroll[b-8721iqp6gh]::-webkit-scrollbar {
    width: 6px;
}

.document-list-scroll[b-8721iqp6gh]::-webkit-scrollbar-track {
    background: transparent;
}

.document-list-scroll[b-8721iqp6gh]::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

.document-list-scroll:hover[b-8721iqp6gh]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
}
/* frontend/Components/SharedComponents/Document/DocumentView.razor.rz.scp.css */
.document-view-scroll[b-wymt18b7d4] {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
}

.document-view-scroll:hover[b-wymt18b7d4] {
    scrollbar-color: rgba(var(--mud-palette-primary-rgb), 0.35) transparent;
}

/* Webkit browsers (Chrome, Safari, Edge) */
.document-view-scroll[b-wymt18b7d4]::-webkit-scrollbar {
    width: 6px;
}

.document-view-scroll[b-wymt18b7d4]::-webkit-scrollbar-track {
    background: transparent;
}

.document-view-scroll[b-wymt18b7d4]::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

.document-view-scroll:hover[b-wymt18b7d4]::-webkit-scrollbar-thumb {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.35);
}
/* frontend/Components/SharedComponents/hr/cases/HrCaseDrawer.razor.rz.scp.css */
.hr-case-verdict[b-srwdniad1m] {
    margin: var(--space-8) 0;
    color: var(--text-secondary);
}

.hr-case-entry[b-srwdniad1m] {
    margin-bottom: var(--space-12);
}

.hr-case-entry-head[b-srwdniad1m] {
    display: flex;
    gap: var(--space-8);
    color: var(--text-secondary);
}

.hr-case-file-line[b-srwdniad1m] {
    margin: 0 0 var(--space-12);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.hr-case-evidence[b-srwdniad1m] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.hr-case-post[b-srwdniad1m] {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    padding-top: var(--space-8);
}
/* frontend/Components/SharedComponents/hr/cases/HrCaseFiles.razor.rz.scp.css */
.hr-case-file[b-9bvl9w7wcc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
    margin-bottom: var(--space-8);
}

.hr-case-file > span[b-9bvl9w7wcc] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.hr-case-no-files[b-9bvl9w7wcc] {
    margin: var(--space-8) 0;
}
/* frontend/Components/SharedComponents/hr/cases/HrCasesBlock.razor.rz.scp.css */
.hr-cases-stamp[b-kjc905mzv2] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.hr-cases-none[b-kjc905mzv2] {
    margin: 0 0 var(--space-8);
    font-size: var(--fs-small);
    color: var(--text-secondary);
}
/* frontend/Components/SharedComponents/hr/checklist/ChecklistInstanceView.razor.rz.scp.css */
/* One checklist instance, hosted by a consumer's page. Tokens only. */

.ck-iv[b-dinnf2q8vi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ck-iv-head[b-dinnf2q8vi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.ck-iv-title[b-dinnf2q8vi] {
    font-weight: var(--fw-semibold);
}

.ck-iv-when[b-dinnf2q8vi],
.ck-iv-flag[b-dinnf2q8vi],
.ck-iv-desc[b-dinnf2q8vi],
.ck-iv-tick[b-dinnf2q8vi] {
    color: var(--text-secondary);
}

.ck-iv-lines[b-dinnf2q8vi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ck-iv-line[b-dinnf2q8vi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.ck-iv-voided .ck-iv-line[b-dinnf2q8vi]  label,
.ck-iv-voided .ck-iv-desc[b-dinnf2q8vi] {
    text-decoration: line-through;
}

.ck-iv-void-mark[b-dinnf2q8vi] {
    color: var(--text-secondary);
    font-style: italic;
}

.ck-iv-prev[b-dinnf2q8vi] {
    margin: 0;
    padding-left: var(--space-12);
}
/* frontend/Components/SharedComponents/hr/overview/FamilyDatesLine.razor.rz.scp.css */
.family-dates-line[b-29lnn6lq02] {
    margin: 0;
    font-size: var(--fs-small);
    overflow-wrap: anywhere;
}
/* frontend/Components/SharedComponents/hr/overview/HrNextHolidayLines.razor.rz.scp.css */
.hr-lines-row[b-n43egqplob] {
    margin: 0;
    font-size: var(--fs-small);
    overflow-wrap: anywhere;
}
/* frontend/Components/SharedComponents/hr/pay/PayStructureDrawer.razor.rz.scp.css */
/* The pay structure drawer. Tokens only; the drawer's own measures come from the layer. */

.psd-form[b-lbwk4asyal] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.psd-row[b-lbwk4asyal] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: end;
}

.psd-currency-code[b-lbwk4asyal] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.psd-changes[b-lbwk4asyal] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.psd-change[b-lbwk4asyal] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.psd-more[b-lbwk4asyal] {
    align-self: flex-start;
}
/* frontend/Components/SharedComponents/hr/performance/PerformanceView.razor.rz.scp.css */
/* The performance view's measure: the hero (the person, then the tile cells in a row that wraps), the caption under a tile, and the stack of hero over tabs. Tokens only; narrow is below 900px. */
.pv[b-umvoou6irt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    min-width: 0;
}

.pv-hero[b-umvoou6irt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
}

.pv-who[b-umvoou6irt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.pv-name[b-umvoou6irt] {
    margin: 0;
    font-size: var(--fs-heading-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-tiles[b-umvoou6irt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--select-w), 1fr));
    gap: var(--space-16);
}

.pv-tile[b-umvoou6irt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.pv-caption[b-umvoou6irt] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

@media (max-width: 899.98px) {
    .pv[b-umvoou6irt] {
        gap: var(--space-16);
    }

    .pv-tiles[b-umvoou6irt] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-12);
    }
}
/* frontend/Components/SharedComponents/hr/performance/PerformanceViewCycles.razor.rz.scp.css */
/* The cycles part's measure: the subtitles, a table's heading, one line to a cell with an ellipsis, the held first column's frame that scrolls on its own, the change marks and the key. Tokens only. */
.pvc[b-6t5g0x03xt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
}

.pvc-title[b-6t5g0x03xt] {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}

.pvc-group[b-6t5g0x03xt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.pvc-group-name[b-6t5g0x03xt] {
    margin: 0;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}

.pvc-cell[b-6t5g0x03xt] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pvc-cell[data-state="average"][b-6t5g0x03xt] {
    font-weight: var(--fw-semibold);
}

.pvc-scroll[b-6t5g0x03xt] {
    overflow-x: auto;
    min-width: 0;
}

.pvc-mark[data-state="up"][b-6t5g0x03xt] {
    color: var(--ok);
}

.pvc-mark[data-state="down"][b-6t5g0x03xt] {
    color: var(--error);
}

.pvc-none[b-6t5g0x03xt],
.pvc-key[b-6t5g0x03xt] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/SharedComponents/hr/performance/PerformanceViewGoals.razor.rz.scp.css */
.pvg-body[b-s57o1408zm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    min-width: 0;
}

.pvg-head[b-s57o1408zm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-12);
}

.pvg-by[b-s57o1408zm],
.pvg-target[b-s57o1408zm] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.pvg-target[data-state="overdue"][b-s57o1408zm] {
    color: var(--error);
    font-weight: var(--fw-semibold);
}

.pvg-none[b-s57o1408zm] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.pvg-comment[b-s57o1408zm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-left: var(--space-12);
}

.pvg-add[b-s57o1408zm] {
    display: flex;
    justify-content: flex-end;
    padding-bottom: var(--space-8);
}

.pvg-composer[b-s57o1408zm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-left: var(--space-12);
}

.pvg-composer-actions[b-s57o1408zm] {
    display: flex;
    justify-content: flex-end;
}
/* frontend/Components/SharedComponents/hr/performance/PerformanceViewObservations.razor.rz.scp.css */
/* The observations part's measure: a row's text with its line breaks, a reversed row's strike and lower emphasis, and the lines under a row. Tokens only. */
.pvo-text[b-11w75l4w6e] { white-space: pre-wrap; }
.pvo-text[data-state="reversed"][b-11w75l4w6e] { text-decoration: line-through; color: var(--text-secondary); }
.pvo-when[b-11w75l4w6e], .pvo-reversed[b-11w75l4w6e] { color: var(--text-secondary); font-size: var(--fs-small); }
.pvo-reversed[b-11w75l4w6e] { margin: 0; }
/* frontend/Components/SharedComponents/notifications/HighBell.razor.rz.scp.css */
.hb[b-0nb1vv71ge] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.hb-count[b-0nb1vv71ge] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: var(--space-8);
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--error);
    color: var(--surface);
    font-size: var(--fs-caption);
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
}

.hb-list[b-0nb1vv71ge] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: 260px;
    padding: var(--space-8);
}

.hb-head[b-0nb1vv71ge] {
    font-weight: 600;
}

.hb-state[b-0nb1vv71ge] {
    margin: 0;
    overflow-wrap: anywhere;
}

.hb-code[b-0nb1vv71ge] {
    font-family: var(--font-mono);
    padding: 0 var(--code-pad-x);
}

.hb-item[b-0nb1vv71ge] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-8);
}

.hb-title[b-0nb1vv71ge] {
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

.hb-date[b-0nb1vv71ge],
.hb-asof[b-0nb1vv71ge] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

.hb-item-error[b-0nb1vv71ge] {
    flex-basis: 100%;
    margin: 0;
    color: var(--error);
    font-size: var(--fs-caption);
    overflow-wrap: anywhere;
}
/* frontend/Components/SharedComponents/projects/kanban/KanbanCard.razor.rz.scp.css */
[b-kgg9ibw2jn] .kanban-card {
    cursor: pointer;
    background-color: white;
    border-radius: 8px;
    border: none;
    border-left: 4px solid #594ae2;
    box-shadow: 0 2px 10px rgba(89, 74, 226, .12);
    transition: box-shadow 0.2s, transform 0.2s;
}

[b-kgg9ibw2jn] .kanban-card:hover {
    box-shadow: 0 4px 16px rgba(89, 74, 226, .22) !important;
    transform: translateY(-2px);
}

[b-kgg9ibw2jn] .overdue-task {
    border-left-color: #f44336;
}

[b-kgg9ibw2jn] .task-name-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 500;
    line-height: 1.3;
}

.kanban-card-container[b-kgg9ibw2jn] {
    position: relative;
}

.-space-x-2[b-kgg9ibw2jn] >  * + * {
    margin-left: -8px;
}

.kanban-type-badge[b-kgg9ibw2jn] {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    background: #eef0ff;
    color: #594ae2;
}

.kanban-progress-row[b-kgg9ibw2jn] {
    gap: 8px;
    margin: 4px 0;
}

.kanban-progress-bar[b-kgg9ibw2jn] {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: #eef0ff;
    overflow: hidden;
}

.kanban-progress-fill[b-kgg9ibw2jn] {
    height: 100%;
    background: #594ae2;
    border-radius: 3px;
}

.kanban-progress-label[b-kgg9ibw2jn] {
    font-size: 10px;
    color: #8a8a94;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 4px;
}

.kanban-footer-meta[b-kgg9ibw2jn] {
    gap: 10px;
    font-size: 11px;
    color: #8a8a94;
}

.kanban-meta-item[b-kgg9ibw2jn] {
    display: flex;
    align-items: center;
    gap: 3px;
}
/* frontend/Components/SharedComponents/projects/task/QuickTaskTracker.razor.rz.scp.css */
/* The Quick Task Tracker page. Tokens only, but the last comment's height, which the requirement gives in pixels. */
.qtt[b-p13vggb1i1] {
    display: flex;
    flex-direction: column;
}

.qtt-first[b-p13vggb1i1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
}

.qtt-title[b-p13vggb1i1] {
    margin-right: auto;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}

.qtt-menu-anchor[b-p13vggb1i1] {
    position: relative;
    display: inline-flex;
}

.qtt-body[b-p13vggb1i1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
}

.qtt-start-fields[b-p13vggb1i1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.qtt-start-actions[b-p13vggb1i1] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.qtt-list-head[b-p13vggb1i1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.qtt-list-title[b-p13vggb1i1] {
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

.qtt-card[b-p13vggb1i1] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    container-type: inline-size;
}

.qtt-card-head[b-p13vggb1i1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.qtt-card-title[b-p13vggb1i1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.qtt-card-name[b-p13vggb1i1] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: var(--fw-medium);
}

.qtt-card-sub[b-p13vggb1i1] {
    font-size: var(--fs-caption);
    color: var(--text-secondary);
}

.qtt-time[b-p13vggb1i1] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-caption);
    white-space: nowrap;
}

@container (max-width: 400px) {
    .qtt-card-head[b-p13vggb1i1] {
        flex-direction: column;
        align-items: flex-start;
    }
}

.qtt-box[b-p13vggb1i1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.qtt-box-actions[b-p13vggb1i1] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-8);
}

/* At most 150 px high: the requirement's own figure for this box. */
.qtt-last-comment[b-p13vggb1i1] {
    max-height: 150px;
    overflow-y: auto;
}
/* frontend/Components/SharedComponents/projects/task/TaskDetails.razor.rz.scp.css */
/* Scoped styles for TaskDetails component */
.task-details[b-t1hd0mzqyh] {
    --td-space: 8px; /* preferred vertical rhythm */
}

/* Normalize default gaps inside stacks for a tighter, consistent feel */
.task-details .mud-stack[b-t1hd0mzqyh] {
    gap: 8px;
}

/* Main column: enforce even vertical spacing between direct children */
.task-details .task-details-main > *[b-t1hd0mzqyh] {
    margin-top: 0 !important;
}
.task-details .task-details-main > * + *[b-t1hd0mzqyh] {
    margin-top: var(--td-space) !important;
}

/* Right aside column: same even spacing between blocks */
.task-details .task-details-aside-scroll > *[b-t1hd0mzqyh] {
    margin-top: 0 !important;
}
.task-details .task-details-aside-scroll > * + *[b-t1hd0mzqyh] {
    margin-top: var(--td-space) !important;
}

/* Tame outlier utility margins within the scoped area */
.task-details .mt-4[b-t1hd0mzqyh],
.task-details .mt-3[b-t1hd0mzqyh],
.task-details .mt-2[b-t1hd0mzqyh] {
    margin-top: var(--td-space) !important;
}
.task-details .my-4[b-t1hd0mzqyh] {
    margin-top: var(--td-space) !important;
    margin-bottom: var(--td-space) !important;
}

/* Keep small vertical spacers truly small for compact look */
.task-details .my-2[b-t1hd0mzqyh] {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* Reduce extra bottom margin on repeated cards/lists without flattening too much */
.task-details .mb-2[b-t1hd0mzqyh] { margin-bottom: 8px !important; }

/* Compact tabs variant for Comments / Activity / Work Log */
.task-details .compact-tabs .mud-tabs-toolbar[b-t1hd0mzqyh] {
    min-height: 34px; /* shorter tab bar */
    padding: 0 6px;   /* tighter horizontal padding */
}

.task-details .compact-tabs .mud-tab[b-t1hd0mzqyh] {
    min-height: 30px;     /* shorter tab button */
    padding: 2px 10px;    /* smaller button padding */
    min-width: unset;     /* avoid overly wide tabs */
}

.task-details .compact-tabs .mud-tab .mud-button-label[b-t1hd0mzqyh] {
    font-size: 0.875rem;  /* slightly smaller label */
}

.task-details .compact-tabs .mud-tabs-panels[b-t1hd0mzqyh] {
    padding-top: 6px;     /* less space between tabs and content */
}

/* Activity feed rows (Comments / Activity Log / Work Log / All): hairline divider instead of a
   flat grey card, so a long feed reads as one continuous list rather than stacked boxes. */
.task-details .activity-row[b-t1hd0mzqyh] {
    background-color: transparent;
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
}

.task-details .activity-row:last-child[b-t1hd0mzqyh] {
    border-bottom: none;
}

.mention-chip[b-t1hd0mzqyh] {
    color: #1976d2; /* MudBlazor Primary Blue */
    font-weight: 500;
    display: inline;
}

.file-thumbnail-grid[b-t1hd0mzqyh] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.file-thumbnail-wrapper[b-t1hd0mzqyh] {
    position: relative;
}

.file-thumbnail-delete[b-t1hd0mzqyh] {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: rgba(255, 255, 255, .85);
    opacity: 0;
    transition: opacity .12s ease-in-out;
}

.file-thumbnail-wrapper:hover .file-thumbnail-delete[b-t1hd0mzqyh] {
    opacity: 1;
}

@media (hover: none), (pointer: coarse) {
    .file-thumbnail-delete[b-t1hd0mzqyh] {
        opacity: 1;
    }
}

/* Description/comment HTML is injected via MarkupString, so its <img> elements do NOT carry the
   component's scope attribute (same reasoning as DocumentDiffView.razor.css's ::deep ins/del) —
   ::deep reaches them; a plain ".rich-content-preview img" selector would compile to
   ".rich-content-preview img[b-scope]" and never match. */
.rich-content-preview[b-t1hd0mzqyh]  img {
    max-height: 200px;
    max-width: 100%;
    object-fit: contain;
    cursor: pointer;
    border-radius: 4px;
    display: block;
}

.rich-content-preview[b-t1hd0mzqyh]  video {
    max-height: 200px;
    max-width: 100%;
    object-fit: contain;
    cursor: pointer;
    border-radius: 4px;
    display: block;
}

/* Child Tasks table (2026-07-27 polish): a static-looking per-column width so a long name/assignee-
   list/status truncates with an ellipsis instead of wrapping onto a second line and inflating row
   height. Capping each editor's displayed TEXT directly (.display-text is a child component's own
   markup, hence ::deep, same reasoning as .rich-content-preview ::deep img below) is what actually
   truncates the content; capping the CELL itself doesn't reliably work here (MudTable's own container
   keeps stretching to fill available space regardless of table-layout:fixed). Once the text itself can
   never render wider than its cap, the column's rendered width naturally stays consistent too — EXCEPT
   MudTable's table also defaults to width:100%, which under auto layout still lets the browser stretch
   each column's box beyond its (now-capped) content to fill that 100%, unevenly, leaving a visible gap
   after whichever column absorbed the most slack (Name, in practice). Forcing width:auto on the table
   stops that stretch — the table (and every column) sizes to its actual capped content instead. */
.child-tasks-table-wrapper[b-t1hd0mzqyh] {
    overflow-x: auto;
}

.child-tasks-table-wrapper[b-t1hd0mzqyh]  .mud-table-root {
    width: auto;
}

.child-tasks-table-wrapper[b-t1hd0mzqyh]  .display-text {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.child-tasks-table-wrapper[b-t1hd0mzqyh]  .mud-table-cell:nth-child(2) .display-text { max-width: 220px; } /* Name */
.child-tasks-table-wrapper[b-t1hd0mzqyh]  .mud-table-cell:nth-child(6) .display-text { max-width: 140px; } /* Status */
.child-tasks-table-wrapper[b-t1hd0mzqyh]  .mud-table-cell:nth-child(9) .display-text { max-width: 100px; } /* Start */
.child-tasks-table-wrapper[b-t1hd0mzqyh]  .mud-table-cell:nth-child(10) .display-text { max-width: 100px; } /* Due */

/* Assignees/Reporter/Watchers show AppAvatar rows now, not text, so they don't need ellipsis truncation
   — but they still go through the same .display-text wrapper, so a max-width keeps a many-avatar row
   from stretching the column indefinitely (it wraps onto additional lines within that width instead,
   via the avatar row's own flex-wrap, not clipped — .display-text has no fixed height). */
.child-tasks-table-wrapper[b-t1hd0mzqyh]  .mud-table-cell:nth-child(3) .display-text { max-width: 140px; white-space: normal; } /* Assignees */
.child-tasks-table-wrapper[b-t1hd0mzqyh]  .mud-table-cell:nth-child(4) .display-text { max-width: 40px; }                      /* Reporter */
.child-tasks-table-wrapper[b-t1hd0mzqyh]  .mud-table-cell:nth-child(5) .display-text { max-width: 100px; white-space: normal; } /* Watchers */

/* Column headers get the same "truncate instead of wrap/overflow" treatment as the cell content below
   them — e.g. "Assignees"/"Watchers" over a narrow avatar-only column. */
.child-tasks-table-wrapper[b-t1hd0mzqyh]  th.mud-table-cell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Hours column: each enabled category (Billable/Non-Billable/OT/OT w/o Pay) is its own line with a
   small gap, so it's unambiguous where one category ends and the next begins — previously they had no
   separation and ran together visually. */
.child-task-hours-line[b-t1hd0mzqyh] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.child-task-hours-line + .child-task-hours-line[b-t1hd0mzqyh] {
    margin-top: 3px;
}

/* Page-wide drag-and-drop visual affordance */
.task-details[b-t1hd0mzqyh] {
    position: relative;
}

.task-details.task-file-drop-active[b-t1hd0mzqyh]::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px dashed var(--mud-palette-primary);
    background-color: rgba(25, 118, 210, 0.08);
    pointer-events: none;
    z-index: 10;
}

/* Deep-link target (a single Comment/Work Log row opened via a copied link, see
   OPC_scrollIntoViewAndHighlight). MudPaper's rendered root does NOT carry this component's Blazor
   CSS-isolation scope attribute (same underlying reason as .rich-content-preview ::deep img above),
   so a plain `.task-details .activity-row` selector here would silently never match -- confirmed
   live: the existing (unrelated, pre-existing) .activity-row border/padding rule above has this
   exact same defect, computing to 0px/8px instead of its declared 1px/6px. ::deep is what actually
   reaches these rows. Background snaps to light-blue the instant the class is added (`transition:
   none` on the second rule overrides the first so the "in" is immediate, not a fade-in); ~5s later
   JS removes the class, and with only the first rule's transition still in effect the reversion
   animates into the intended fade-out instead of an abrupt cut. */
.task-details[b-t1hd0mzqyh]  .activity-row {
    transition: background-color 5s ease-out;
}

.task-details[b-t1hd0mzqyh]  .activity-row.opc-deep-link-highlight {
    background-color: #d0e8ff;
    transition: none;
}
/* frontend/Components/SharedComponents/projects/task/TimeTrackers/CaptureDock.razor.rz.scp.css */
/* The dock's capture icons, inside the activity bar's drag region. Tokens only. */

.cd-icons[b-ce0r4dgvoq] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* The bar's container is a drag region, so each button's wrapper opts out of it. */
.cd-nodrag[b-ce0r4dgvoq] {
    display: inline-flex;
    -webkit-app-region: no-drag;
}
/* frontend/Components/SharedComponents/projects/task/TimeTrackers/CaptureSlot.razor.rz.scp.css */
/* The strip's capture slot. Tokens only. */

.cs-root[b-a8ww9cxyn2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}

.cs-four[b-a8ww9cxyn2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.cs-line[b-a8ww9cxyn2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
    font-size: var(--fs-small);
    color: var(--text);
}

.cs-elapsed[b-a8ww9cxyn2] {
    font-family: var(--font-mono);
}

.cs-row[b-a8ww9cxyn2] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.cs-since[b-a8ww9cxyn2] {
    margin: 0;
    font-size: var(--fs-caption);
    color: var(--text);
}

.cs-row[b-a8ww9cxyn2]  .ui-banner-wrap {
    display: block;
    flex: 1 1 100%;
}
/* frontend/Components/SharedComponents/projects/task/TimeTrackers/PresenceBar.razor.rz.scp.css */
/* The presence strip. Tokens only. */

.qtt-strip[b-us4iaelpne] {
    border-bottom: var(--border-w) solid var(--line);
    padding: var(--space-8) var(--space-12);
}

.qtt-strip-spacer[b-us4iaelpne] {
    flex: 1 1 auto;
}

.qtt-strip-slot[b-us4iaelpne] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-4);
}

.qtt-strip-slot:empty[b-us4iaelpne] {
    display: none;
}

.qtt-strip-messages[b-us4iaelpne]  .ui-banner-wrap {
    display: block;
    margin-top: var(--space-8);
}
/* frontend/Components/SharedComponents/projects/tracker/ProjectTrackerLogsView.razor.rz.scp.css */
.opc-clamp-2[b-5ckh1ax91u] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.opc-clampable[b-5ckh1ax91u] {
    cursor: pointer;
}
/* frontend/Components/SharedComponents/report/TrackerReport/TrackerReport.razor.rz.scp.css */
/* The depth shading sets the row's --ui-grid-cell-bg, so the stuck Name and Total cells keep the shade. */
[b-un86g8kw4e] table.ui-grid > tbody > tr.trr-depth-0 { --ui-grid-cell-bg: var(--fill-1); }
[b-un86g8kw4e] table.ui-grid > tbody > tr.trr-depth-0 > td { background: var(--ui-grid-cell-bg); font-weight: var(--fw-semibold); }

[b-un86g8kw4e] table.ui-grid > tbody > tr.trr-depth-1 { --ui-grid-cell-bg: color-mix(in srgb, var(--fill-1) 66%, var(--surface)); }
[b-un86g8kw4e] table.ui-grid > tbody > tr.trr-depth-1 > td { background: var(--ui-grid-cell-bg); font-weight: var(--fw-semibold); }

[b-un86g8kw4e] table.ui-grid > tbody > tr.trr-depth-2 { --ui-grid-cell-bg: color-mix(in srgb, var(--fill-1) 33%, var(--surface)); }
[b-un86g8kw4e] table.ui-grid > tbody > tr.trr-depth-2 > td { background: var(--ui-grid-cell-bg); }

[b-un86g8kw4e] table.ui-grid > tbody > tr.trr-depth-3 { --ui-grid-cell-bg: var(--surface); }
[b-un86g8kw4e] table.ui-grid > tbody > tr.trr-depth-3 > td { background: var(--ui-grid-cell-bg); }

/* A tinted or mixed figure fills its cell: the element cancels the cell's padding, as an in-cell field does. */
[b-un86g8kw4e] .trr-fill { position: relative; display: flex; align-items: center; height: 100%;
    margin: 0 calc(var(--ui-in-cell-inset) * -1); padding: 0 var(--ui-in-cell-inset); }
[b-un86g8kw4e] .trr-tone-ok { background: var(--ok-bg); }
[b-un86g8kw4e] .trr-tone-warn { background: var(--warn-bg); }
[b-un86g8kw4e] .trr-tone-error { background: var(--error-bg); }
[b-un86g8kw4e] .trr-tone-neutral { background: var(--neutral-bg); }

/* The row's stripe: the Grid's own row edge, in the tone's solid token. */
[b-un86g8kw4e] table.ui-grid > tbody > tr.trr-stripe-ok > td:first-child { box-shadow: inset var(--sel-edge-w) 0 0 var(--ok); }
[b-un86g8kw4e] table.ui-grid > tbody > tr.trr-stripe-warn > td:first-child { box-shadow: inset var(--sel-edge-w) 0 0 var(--warn); }
[b-un86g8kw4e] table.ui-grid > tbody > tr.trr-stripe-error > td:first-child { box-shadow: inset var(--sel-edge-w) 0 0 var(--error); }
[b-un86g8kw4e] table.ui-grid > tbody > tr.trr-stripe-neutral > td:first-child { box-shadow: inset var(--sel-edge-w) 0 0 var(--neutral); }

/* The mixed mark: a corner dot. */
[b-un86g8kw4e] .trr-mixed { position: absolute; top: var(--space-2); right: var(--space-2); line-height: 0; }
[b-un86g8kw4e] .trr-dot { display: block; width: var(--dot); height: var(--dot); border-radius: var(--radius-pill); background: var(--text-secondary); }

/* A row holding a status code grows as the code breaks over lines. The Grid forces every row to one height, so the
   two height rules below are forced too; nothing else is. The cell keeps the Grid's overflow, so the seam wraps inside
   its column and never spills into the next cell. */
[b-un86g8kw4e] table.ui-grid > tbody > tr.fluent-data-grid-row:has(.trr-code) { grid-template-rows: none !important; height: auto !important; }
[b-un86g8kw4e] table.ui-grid > tbody > tr.fluent-data-grid-row:has(.trr-code) > td { height: auto !important; min-height: var(--row-h-dense); flex-wrap: wrap; }
[b-un86g8kw4e] .trr-code { flex: 1 1 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; }

/* The lines naming what the report configuration locked and narrowed. */
.trr-lockline[b-un86g8kw4e] { color: var(--text-secondary); font-size: var(--fs-small); line-height: var(--lh-small); margin: var(--space-8) 0; }
.trr-lockline p[b-un86g8kw4e] { margin: 0; }

/* Only the screen part hides when printing; the paper is its own component. */
@media print { .trr-screen[b-un86g8kw4e] { display: none; } }
/* frontend/Components/SharedComponents/report/TrackerReport/TrackerReportPrint.razor.rz.scp.css */
/* The paper is hidden on screen and shown when printing. */
.trr-print[b-hiog1sv9bk] { display: none; }

@media print {
    .trr-print[b-hiog1sv9bk] { display: block; }
}

/* One page per slice; the last page ends the document. */
.trr-print-page:not(:last-child)[b-hiog1sv9bk] { break-after: page; }

[b-hiog1sv9bk] .trr-print-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

[b-hiog1sv9bk] .trr-print-table th,
[b-hiog1sv9bk] .trr-print-table td {
    padding: 0 var(--space-4);
    border: var(--border-w) solid var(--line);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    white-space: nowrap;
    text-align: right;
}

[b-hiog1sv9bk] .trr-print-table th[scope="row"],
[b-hiog1sv9bk] .trr-print-table thead th:first-child { text-align: left; }

[b-hiog1sv9bk] .trr-print-table thead th:first-child,
[b-hiog1sv9bk] .trr-print-table tbody th[scope="row"],
[b-hiog1sv9bk] .trr-print-table tfoot th[scope="row"] { width: var(--print-name-w); }

[b-hiog1sv9bk] .trr-print-table th.trr-print-d1 { padding-left: calc(var(--space-12) * 1); }
[b-hiog1sv9bk] .trr-print-table th.trr-print-d2 { padding-left: calc(var(--space-12) * 2); }
[b-hiog1sv9bk] .trr-print-table th.trr-print-d3 { padding-left: calc(var(--space-12) * 3); }
[b-hiog1sv9bk] .trr-print-table th.trr-print-d4 { padding-left: calc(var(--space-12) * 4); }

.trr-print-note[b-hiog1sv9bk] { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); }
/* frontend/Components/SharedComponents/report/TrackerReport/TrackerReportQuickBar.razor.rz.scp.css */
.trr-expand[b-6xihdey7lt] { position: relative; display: inline-flex; }
.trr-title[b-6xihdey7lt] { margin: 0; font-size: var(--fs-heading-md); line-height: var(--lh-heading-md); font-weight: var(--fw-semibold); }
/* frontend/Components/Ui/Accordion/AccordionItem.razor.rz.scp.css */
/* FPL-001/REQ-003, row 24 — Accordion/expander row. Ours in CSS AND markup (see AccordionItem.razor's
   own header comment for the supplier rejection). `::deep` is needed only for the expanded body,
   since ChildContent is caller-supplied; the row itself is entirely this component's own markup. */

/* Item 47 (FPL-001/REQ-017 FR-5): this row is a real <button> (see the .razor's own header comment — the whole-row hit-target the sheet's own div-based
   `.acc-row` never needed a UA border reset for). `background: none` and `font: inherit` were already reset here, but not the shorthand `border` — so
   the UA default border survived on the top/left/right sides (measured live, `2px outset rgb(0,0,0)`, both on this branch's own gallery and the review
   host). `border: 0` first, THEN the one side the sheet actually draws. */
.ui-accordion-row[b-9ehz5sl1qz] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-height: var(--row-h);
    width: 100%;
    padding: 0 var(--cell-pad-x);
    border: 0;
    border-bottom: var(--border-w) solid var(--line);
    font: inherit;
    font-size: var(--fs-body);
    color: var(--text);
    background: none;
    text-align: left;
    box-sizing: border-box;
}

.ui-accordion-row:hover[b-9ehz5sl1qz] {
    background: var(--fill-1);
}

/* FPL-001/REQ-018 (item 49) FR-1(a): drew the browser's default outline — outset, the layer's default. Grid's own
   (row 19, item 45) detail-row expand toggle reuses this class, so this fix reaches it too. */
.ui-accordion-row:focus-visible[b-9ehz5sl1qz] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

/* Item 47 (FPL-001/REQ-017 FR-5): the sheet's caret (§7, `#i-caret-right`: viewBox 16, path `M6.5 4.5v7L10.5 8z`, FILLED — never the outline ">" this row
   drew before) is a FILLED 4 x 7 triangle in a 16 px box, drawn from the sheet's own three points as percentages — Grid.razor.css's own
   `[row-expand-button]::after` (row 19's tree caret) copied verbatim, not re-derived (the two components share no ancestor to hold one rule from). */
/* Item 34 (FPL-001/REQ-006 FR-1): the header band when a page gives HeaderActions -- a row of TWO
   boxes, the toggle button (it keeps its whole box as the click target and grows to fill) and the
   slot (it never grows). Only drawn with a slot: a null slot renders no wrapper at all, so today's
   row is untouched. The hairline and the hover fill move from the button to the band so the slot
   sits inside the same row; the band's height stays --row-h (the button gives up the hairline's
   pixel), and the slot's small buttons/links are centred in it. */
.ui-accordion-band[b-9ehz5sl1qz] {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--row-h);
    border-bottom: var(--border-w) solid var(--line);
}

.ui-accordion-band:hover[b-9ehz5sl1qz] {
    background: var(--fill-1);
}

.ui-accordion-band > .ui-accordion-row[b-9ehz5sl1qz] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    min-height: calc(var(--row-h) - var(--border-w));
    border-bottom: 0;
}

.ui-accordion-band > .ui-accordion-row:hover[b-9ehz5sl1qz] {
    background: none;
}

.ui-accordion-actions[b-9ehz5sl1qz] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding-right: var(--cell-pad-x);
}

.ui-accordion-caret[b-9ehz5sl1qz] {
    display: inline-flex;
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
    color: var(--text-secondary);
}

.ui-accordion-caret[b-9ehz5sl1qz]::after {
    content: "";
    width: var(--icon-sm);
    height: var(--icon-sm);
    background: currentColor;
    clip-path: polygon(40.625% 28.125%, 40.625% 71.875%, 65.625% 50%);
    transition: transform var(--motion-micro) var(--ease);
}

.ui-accordion-caret-expanded[b-9ehz5sl1qz]::after {
    transform: rotate(90deg);
}

.ui-accordion-header[b-9ehz5sl1qz] {
    color: var(--text);
}

.ui-accordion-spacer[b-9ehz5sl1qz] {
    flex: 1 1 auto;
}

.ui-accordion-trailing[b-9ehz5sl1qz] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    flex: none;
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- this app has no global reset
   matching the sheet's own mockup-wide one, so a bordered rule with no box-sizing set is always at
   risk of the browser's content-box default adding its border/padding on top of any size a host
   later pins to this row; pinned here for consistency with the rest of this pass even though no
   width/height is declared on this rule today. */
.ui-accordion-body[b-9ehz5sl1qz] {
    box-sizing: border-box;
    padding: var(--space-12) var(--cell-pad-x) var(--space-16) var(--space-32);
    border-bottom: var(--border-w) solid var(--line);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-accordion-empty[b-9ehz5sl1qz] {
    color: var(--placeholder);
}
/* frontend/Components/Ui/ActionFooter/ActionFooter.razor.rz.scp.css */
/* FPL-001/REQ-003, row 18 — Action footer. Ours in markup and CSS; no supplier custom element, so
   the CSS-isolation scope attribute attaches directly to every selector below. */

.ui-actfoot[b-n21y3a6xr7] {
    display: flex;
    flex-direction: column;
}

.ui-actfoot-row[b-n21y3a6xr7] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-16);   /* the sheet's `.foot` (measured on 06): 12 / 16 — a 32px button row is 56 (+1 hairline) tall; built at 16 all round it was 64 */
    border-top: var(--border-w) solid transparent;   /* always present, transparent until content is under it — so the hairline appearing never moves the footer */
}

.ui-actfoot-spacer[b-n21y3a6xr7] {
    flex: 1 1 auto;
}

.ui-actfoot-note[b-n21y3a6xr7] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

/* "A state, not an action" (the sheet's own words) unless a click target is wired -- then it looks
   like the plain note above, but behaves like a link, matching the sheet's own "clicking it scrolls
   to and outlines the first changed field" note without visually promoting it to a Button. */
.ui-actfoot-note-btn[b-n21y3a6xr7] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
}

.ui-actfoot-note-btn:hover[b-n21y3a6xr7] {
    text-decoration-color: currentColor;
}

.ui-actfoot-note-btn:focus-visible[b-n21y3a6xr7] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

/* The failed-save line (state e): an alert line ABOVE the button row, inside this same component --
   deliberately not row 57's NamedError shape (a bordered seam block), a different, slimmer shape the
   sheet draws specifically for this footer context. */
.ui-actfoot-err[b-n21y3a6xr7] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-16) 0;
    color: var(--error);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-actfoot-err-ic[b-n21y3a6xr7] {
    flex: none;
    width: var(--lh-tight);
    height: var(--lh-tight);
    margin-top: var(--space-2);
}

.ui-actfoot-retry[b-n21y3a6xr7],
.ui-actfoot-code[b-n21y3a6xr7] {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.ui-actfoot-retry:hover[b-n21y3a6xr7],
.ui-actfoot-code:hover[b-n21y3a6xr7] {
    text-decoration-color: currentColor;
}

.ui-actfoot-code[b-n21y3a6xr7] {
    margin-left: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
}

.ui-actfoot-retry:focus-visible[b-n21y3a6xr7],
.ui-actfoot-code:focus-visible[b-n21y3a6xr7] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

/* Only a top hairline once content actually scrolls under the footer (the sheet's own rule, "no top
   hairline until content actually scrolls under it — then a single 1px line appears, never a
   shadow") -- the caller (the eventual edit drawer, row 16) owns detecting scroll and toggling this
   class; this component does not read its own host's scroll position. */
.ui-actfoot-scrolled .ui-actfoot-row[b-n21y3a6xr7] {
    border-top-color: var(--line);
}

/* FPL-001/REQ-025 FR-24 (item 60, Amended (1)): the foot note wraps rather than pushing the action
   buttons out of the footer or forcing it to scroll sideways. `flex: 0 1 auto` (no grow, so a SHORT
   note never stretches to fill the row's empty space -- it only claims what it needs, same visual
   weight as the plain ui-actfoot-note text beside it); `min-width: 0` overrides the flex item's
   default content-based floor, which is what actually lets it shrink below its own single-line
   width and wrap instead of overflowing. */
.ui-actfoot-footnote[b-n21y3a6xr7] {
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}

/* Amended (3) (planner review, 2026-09-27): unbounded shrinking was itself a defect -- a long note
   in a narrow footer collapsed to a 0-width, ~80-line vertical ribbon (one character per line,
   live-measured), not a readable wrap. "A long note wraps" means a READABLE wrap: the note never
   renders narrower than 16ch while SHARING a line with the buttons.

   A CSS container query was tried first and reverted: it collapsed this component's own rendered
   width to 0 across its whole ancestor chain -- `container-type: inline-size` applies layout
   containment, which stops an element's own intrinsic width from being derived from its children's
   content; this component's real hosts (the gallery's own `.gallery-row`, and plausibly EditDrawer/
   QuickDrawer's own internal layouts too) are themselves flex containers, making THIS component a
   shrink-to-fit flex ITEM whose only sizing signal containment then zeroed out -- confirmed live: it
   broke every OTHER ActionFooter demo state too (rest, busy, failed, readonly), not just the noted
   one, since the rule was unconditional. A fixed media-query breakpoint was considered next and
   also rejected: this row's own available width has no relationship to the PAGE's viewport width
   (QuickDrawer is a fixed 400px at any viewport; EditDrawer is `clamp(560px, 50vw, 960px)`), unlike
   FormField.md's own page-level grid case that breakpoint serves; and a single fixed threshold
   cannot be content-aware regardless of mechanism -- "room next to the buttons" depends on which
   optional buttons (Delete/Archive/Activate) a given caller actually shows.

   Fixed with `actionFooterNote.js`, mirroring FittingTagList's own measure-in-JS/decide-in-C# split:
   a real ResizeObserver reads this row's own required width (every OTHER child's rendered width,
   this rule's own 16ch floor read back via computed `min-width`, the row's own gaps) against its
   actual available width, and C# toggles `.ui-actfoot-row-stacked` below. `min-width: 16ch` here
   applies whenever a note exists (stacked or not) so the JS side always reads the INTENDED floor
   value, in px, from the browser's own font metrics -- never a hand-guessed number, and correct
   across every locale/font. */
.ui-actfoot-row-noted .ui-actfoot-footnote[b-n21y3a6xr7] {
    min-width: 16ch;
}

.ui-actfoot-row-stacked[b-n21y3a6xr7] {
    flex-wrap: wrap;
}

.ui-actfoot-row-stacked .ui-actfoot-footnote[b-n21y3a6xr7] {
    order: -1;
    flex-basis: 100%;
}

/* Companion to the rule above: while a note is present, the row's OWN action buttons must not also
   shrink under the same pressure (AC-65: "every button keeps its width").

   Corrected (whole-branch review, 2026-09-27): the first version of this rule,
   `.ui-actfoot-row-noted > ::deep fluent-button { flex: none; }`, was DEAD -- confirmed live, never
   applied. Two things were wrong with it, not one:
   1. `::deep` bypasses Blazor's scope-attribute requirement, but the `>` CHILD combinator in front
      of it is still a literal DOM combinator -- `display: contents` on `.ui-btn-wrap` removes it
      from the BOX tree (so it generates no flex item of its own), but it does NOT remove itself
      from the DOM tree for SELECTOR MATCHING -- `fluent-button` is still `.ui-btn-wrap`'s
      grandchild (via `.ui-tooltip-region`), never its direct child, so `>` could never match it
      regardless of `::deep`.
   2. Even fixed to a descendant combinator, `fluent-button` is the wrong TARGET: `.ui-btn-wrap`
      being `display: contents` promotes its own child, `.ui-tooltip-region`, to be the flex item
      that actually participates in this row's flex layout -- not `fluent-button`, which sits one
      level deeper still, inside `.ui-tooltip-region`. Confirmed by `.ui-tooltip-region` already
      having a real, effective box-model property one file over
      (`.ui-btn-wrap ::deep .ui-tooltip-region { width: fit-content; }`, Button.razor.css) --
      a `display: contents` element could not have that rule take visible effect on ITSELF, so the
      fact that rule visibly narrows the button's own hit area (REQ-012's own finding) is direct
      proof `.ui-tooltip-region` is the real box here, not a `display: contents` pass-through.
   Verified this rule genuinely APPLIES (headless Chromium, computed style read directly off
   `.ui-tooltip-region`, not inferred from rendered width): `flex-shrink` reads `0` here with this
   fix, `1` (the CSS default) on the pre-fix commit -- confirmed by reading the computed style on
   BOTH commits directly, not assumed from the selector text alone. See ActionFooter.md's own AC-65
   section for the full live account, including why this fix currently produces NO visible width
   difference for Delete/Cancel/Save specifically (Button's own single-word labels already have a
   CSS-enforced automatic minimum size no `flex-shrink` value can cross) and the separate proof
   (a `min-width: 0` override injected live) that the rule IS load-bearing once that unrelated floor
   is removed -- do not read "no visible difference in the gallery today" as "this rule doesn't
   matter."

   Scoped to `.ui-actfoot-row-noted` (added to the row ONLY when FootNote is set, see
   ActionFooter.razor) rather than unconditionally: today, with no note, a squeezed footer's buttons
   are already allowed to shrink -- making them rigid unconditionally would turn any such squeeze
   into sideways overflow for every EXISTING caller, a visual regression AC-64's markup-identity
   claim alone would not catch. */
.ui-actfoot-row-noted[b-n21y3a6xr7]  .ui-tooltip-region {
    flex: none;
}
/* frontend/Components/Ui/AsOfLine/AsOfLine.razor.rz.scp.css */
/* FPL-001/REQ-003, row 60 — Staleness / as-of line. Ours in CSS AND markup, no supplier for the
   line itself. Composes <Button> (Open intent) for the Failed state's Retry action only -- no
   ::deep concern of its own, Button already wraps its own supplier tag. */

.ui-asof[b-evm6m5s01v] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-asof-age[b-evm6m5s01v] {
    font-weight: var(--fw-medium);
}

.ui-asof-stale[b-evm6m5s01v] {
    color: var(--warn);
}

.ui-asof-bad[b-evm6m5s01v] {
    color: var(--error);
}

.ui-asof-icbtn[b-evm6m5s01v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    flex: none;
    border: none;
    background: none;
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--motion-micro) var(--ease);
}

.ui-asof-icbtn:hover:not(:disabled)[b-evm6m5s01v] {
    background: var(--fill-1);
    color: var(--text);
}

.ui-asof-icbtn:disabled[b-evm6m5s01v] {
    cursor: default;
}

.ui-asof-icbtn:focus-visible[b-evm6m5s01v] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-asof-ic[b-evm6m5s01v] {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

/* The refresh arc turns with the layer's one rotation (FPL-001/REQ-046 FR-4: `.ui-spin` in wwwroot/css/ring.css -- same keyframes, duration and reduced-motion rule as the ring); `.ui-asof-spin` is only this component's own hook. */
/* frontend/Components/Ui/AuditLog/AuditLog.razor.rz.scp.css */
/* FPL-001/REQ-003, row 33 — Audit / change-log list. Ours in CSS AND markup. No `::deep` needed:
   every class below styles THIS component's own markup (the content composed inside ListRow's
   ChildContent) — Blazor's CSS-isolation scope attribute follows the markup's own authoring file,
   not whichever component it renders inside of. Every text element sets its own explicit colour
   from a token (the row-20/List leak class). */

.ui-audit-avatar[b-5bqtnw2ks9] {
    flex: none;
}

.ui-audit-who[b-5bqtnw2ks9] {
    color: var(--text);
    font-weight: var(--fw-semibold);
    flex: none;
}

.ui-audit-who-system[b-5bqtnw2ks9] {
    color: var(--text-secondary);
    font-weight: var(--fw-regular);
}

.ui-audit-when[b-5bqtnw2ks9] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    white-space: nowrap;
    flex: none;
}

.ui-audit-diff[b-5bqtnw2ks9] {
    color: var(--text);
    min-width: 0;
}

.ui-audit-field[b-5bqtnw2ks9] {
    color: var(--text-secondary);
}

.ui-audit-diff s[b-5bqtnw2ks9] {
    font-weight: var(--fw-medium);
}

.ui-audit-to[b-5bqtnw2ks9] {
    font-weight: var(--fw-medium);
}
/* frontend/Components/Ui/Avatar/Avatar.razor.rz.scp.css */
/* FPL-001/REQ-003, row 25 — Avatar. Ours in CSS AND markup (DEC-015 §3's initial supplier map
   names "avatar" directly in the ours/no-supplier list). No `::deep`/wrapper-scoping concern here
   at all — no supplier custom element sits behind this component, so Blazor's own CSS-isolation
   scope attribute attaches directly to every element below exactly as written. */

.ui-avatar-wrap[b-is54d9hgb8] {
    position: relative;
    display: inline-flex;
    flex: none;
}

.ui-avatar[b-is54d9hgb8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar);
    height: var(--avatar);
    border-radius: var(--radius-pill);
    background: var(--neutral-bg);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    flex: none;
    overflow: hidden;
}

.ui-avatar-xs[b-is54d9hgb8] {
    width: var(--avatar-sm);
    height: var(--avatar-sm);
}

.ui-avatar-md[b-is54d9hgb8] {
    width: var(--avatar-md);
    height: var(--avatar-md);
    font-size: var(--fs-small);
}

.ui-avatar-lg[b-is54d9hgb8] {
    width: var(--avatar-lg);
    height: var(--avatar-lg);
    font-size: var(--fs-body);
}

.ui-avatar-is-off[b-is54d9hgb8] {
    opacity: var(--disabled-opacity);
}

.ui-avatar-photo[b-is54d9hgb8] {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-pill);
    object-fit: cover;
}

.ui-avatar-icon[b-is54d9hgb8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 60%;
}

.ui-avatar-icon svg[b-is54d9hgb8] {
    width: 100%;
    height: 100%;
}

.ui-avatar-dot[b-is54d9hgb8] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--avatar-dot);
    height: var(--avatar-dot);
    border-radius: var(--radius-pill);
    border: var(--avatar-dot-ring) solid var(--surface);
    box-sizing: content-box;
}

.ui-avatar-dot-ok[b-is54d9hgb8] {
    background: var(--ok);
}

.ui-avatar-dot-away[b-is54d9hgb8] {
    background: var(--series-4);
}

.ui-avatar-dot-off[b-is54d9hgb8] {
    background: var(--placeholder);
}
/* frontend/Components/Ui/Banner/Banner.razor.rz.scp.css */
/* FPL-001/REQ-003, row 55 — In-page banner. Fluent-backed (FluentMessageBar); host-level overrides
   only — measured live: the internal icon/dismiss layout is part-less, no `::part()` reaches it.
   `.ui-banner-wrap` (a plain <span> Banner.razor wraps its <FluentMessageBar> in) carries this
   file's own CSS scope attribute -- a CHILD COMPONENT's own root element never does (Button.razor's
   own header comment, same finding); `::deep` below has nothing to descend from without it. */

.ui-banner-wrap[b-txy9nu9q2n] {
    display: contents;
}

[b-txy9nu9q2n] .ui-banner {
    width: 100%;
    padding: var(--banner-pad-y) var(--banner-pad-x) !important;
    border-radius: var(--radius);
    font-size: var(--fs-body);
}

/* LEAK: Fluent's own icon renders as an inline <svg> at 20px with its own inline width/height
   attributes — a host-level class selector needs !important to win over an inline style. Sized to
   the sheet's 16px leading icon (--icon-sm, the same token NamedError's own icon uses). */
[b-txy9nu9q2n] .ui-banner svg:first-of-type {
    width: var(--icon-sm) !important;
    height: var(--icon-sm) !important;
}

/* LEAK: Fluent's own icon-to-text gap is 8px; the sheet's own banner uses 12px. */
[b-txy9nu9q2n] .ui-banner {
    gap: var(--space-12);
}

/* Scope has no Fluent intent of its own (MessageBarIntent.Custom) -- neutral treatment matching the
   sheet's own `.banner.scope` (a standing fact about the viewer's role, not an accent color). */
[b-txy9nu9q2n] .ui-banner-scope {
    background: var(--fill-1);
    border-color: var(--line);
    color: var(--text-secondary);
}

.ui-banner-external-ic[b-txy9nu9q2n] {
    width: var(--space-12);
    height: var(--space-12);
    margin-left: var(--space-4);
}

/* Scope's own leading icon -- composed as plain ChildContent markup, not a Fluent-drawn icon (see
   Banner.razor's header comment for why); sized and aligned to read like the other three kinds'
   own Fluent-drawn leading icon despite living in a different part of the DOM. */
.ui-banner-scope-ic[b-txy9nu9q2n] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
    vertical-align: text-bottom;
    margin-right: var(--space-12);
}
/* frontend/Components/Ui/Breadcrumb/Breadcrumb.razor.rz.scp.css */
.ui-crumbs[b-9906hy0ryu] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    flex-wrap: wrap;
}

.ui-crumbs-link[b-9906hy0ryu] {
    display: inline-block;
    max-width: var(--crumb-max-w);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: var(--accent);
    text-decoration: none;
}

.ui-crumbs-link:hover[b-9906hy0ryu] {
    text-decoration: underline;
}

/* FPL-001/REQ-052 FR-3/FR-7: a crumb without an address is a <button> and a crumb with one is an <a> — ONE look (sheet 05 `.crumbs a`): the button only needs the browser's button chrome taken off, and a visited link
   reads exactly like an unvisited one. */
button.ui-crumbs-link[b-9906hy0ryu] {
    border: 0;
    background: transparent;
    font: inherit;
    padding: 0;
    cursor: pointer;
}

.ui-crumbs-link:visited[b-9906hy0ryu] {
    color: var(--accent);
}

/* FPL-001/REQ-018 (item 49) FR-1(a): drew the browser's default outline — outset, the layer's default. */
.ui-crumbs-link:focus-visible[b-9906hy0ryu],
.ui-crumbs-ellipsis:focus-visible[b-9906hy0ryu] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-crumbs-current[b-9906hy0ryu] {
    display: inline-block;
    max-width: var(--crumb-max-w);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: var(--text);
    font-weight: var(--fw-medium);
}

.ui-crumbs-sep[b-9906hy0ryu] {
    color: var(--line);
}

.ui-crumbs-anchor[b-9906hy0ryu] {
    position: relative;
    display: inline-flex;
}

.ui-crumbs-ellipsis[b-9906hy0ryu] {
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.ui-crumbs-ellipsis:hover[b-9906hy0ryu] {
    text-decoration: underline;
}

/* frontend/Components/Ui/BusyIndicator/BusyIndicator.razor.rz.scp.css */
/* FPL-001/REQ-039 (#3637), row 87 — BusyIndicator. Scoped to this component's own markup (the container, content wrapper, overlay, ring, words
   and line are all elements of BusyIndicator.razor itself, so Blazor's scope attribute reaches them directly — no ::deep). Every value is a
   var(--token) of the sheet (03-feedback.html §6a, CSS at l.435-470); nothing of a supplier shows (FR-10).

   The container IS the host's area (the host's own class/style/id land on it): it is only ever `position: relative` so the overlay and the line
   can sit inside it — it never gets a size, a margin or a padding of its own (FR-2: the component never changes the area's box). */
.ui-busy[b-qfuufqce02] {
    position: relative;
}

/* The Line shape clips its two sweeping segments to the area (the sheet's `.bz-replace`). */
.ui-busy-linehost[b-qfuufqce02] {
    overflow: hidden;
    /* This host (overflow: hidden) is the scroll container of a Grid's sticky header inside it, so the page's top-bar offset (AppShell's
       --ui-grid-sticky-top) does not apply here: with it the header sat one top bar down its own table, over the first row. Zeroed as the Grid's own scrolling wrap does. */
    --ui-grid-sticky-top: 0px;
}

/* The layer's one focus ring, for the moment the Line shape moves focus here (script focus after keyboard use still matches :focus-visible, and the
   browser's default outline must never show). The container is tabindex="-1": programmatically focusable, never a Tab stop. */
.ui-busy:focus-visible[b-qfuufqce02] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

/* ---- Spinner shape: the ring + one line of words, centred over the area (the sheet's `.bz`) ---- */
.ui-busy-overlay[b-qfuufqce02] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    color: var(--text-secondary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    text-align: center;
    pointer-events: none;   /* a click on the area behind is the area's own */
}

/* The ring is the layer's shared one (FPL-001/REQ-046 FR-4, wwwroot/css/ring.css, drawn through <Ring />): the sheet's family 2 `.spinner`, once. `.ui-busy-ring` is only this component's own hook. */

/* ---- Line shape: a 2 px indeterminate line at the area's top edge, inside its border (the sheet's `.bz-bar`) ---- */
.ui-busy-line[b-qfuufqce02] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--gate-progress-h);
    background: var(--line);
    overflow: hidden;
    z-index: 1;
}

/* Two 40 % segments half a cycle apart, linear: one is always on the track — the sweep never pauses (AC-8). */
.ui-busy-line[b-qfuufqce02]::before,
.ui-busy-line[b-qfuufqce02]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: var(--accent);
    animation: ui-busy-indet-b-qfuufqce02 var(--indet-dur) linear infinite;
}

.ui-busy-line[b-qfuufqce02]::before {
    animation-delay: calc(var(--indet-dur) / -2);
}

@keyframes ui-busy-indet-b-qfuufqce02 {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

/* FR-1b: while the line shows, the old data is stale — dimmed, and inert (the attribute is set by the markup; no click, no hover, no Tab stop). */
.ui-busy-content[inert][b-qfuufqce02] {
    opacity: var(--disabled-opacity);
}

/* FR-5: under reduced motion both stay DRAWN — they are information, not decoration. The ring stops with its dark quarter showing; the line becomes ONE still,
   full-width line in the accent at --busy-opacity (never a partial still segment: it would read as a percentage). */
@media (prefers-reduced-motion: reduce) {

    .ui-busy-line[b-qfuufqce02]::before {
        content: none;
    }

    .ui-busy-line[b-qfuufqce02]::after {
        animation: none;
        transform: none;
        width: 100%;
        opacity: var(--busy-opacity);
    }
}
/* frontend/Components/Ui/Button/Button.razor.rz.scp.css */
/* FPL-001/REQ-003, row B1 — Button. Scoped to THIS component only, via Blazor CSS isolation's scope
   attribute on .ui-btn-wrap (a plain <span> Button.razor wraps its <FluentButton> in) — a CHILD
   COMPONENT's own root element never carries the parent's scope attribute, so ::deep needs a real
   HTML ancestor to scope from; measured live (a fresh publish showed neither the scope attribute
   nor any of this file's overrides reaching <fluent-button> until the wrapper was added). Never a
   DOM-order or page-id selector (FR-6). Every value is var(--token) (§6 of claude-docs/UI-LAYER.md);
   no literal outside the allowances.

   FPL-001/REQ-025 FR-4 (item 60, 2026-09-27): the Open intent's own rule, below, gained a dedicated
   higher-specificity override for the small size — see that rule's own comment for the full
   specificity arithmetic and Button.md's "Open padding fixed at every size" section for the write-up. */

.ui-btn-wrap[b-z38r8zvkv0] {
    display: contents;
}

/* REQ-012 (whole-branch review): the tooltip region around a Button is the button's box — `fit-content`, in a flex OR a block parent. It is a block-level flex box, and this wrapper is `display: contents`, so in a plain block
   parent nothing narrowed it: a disabled Button in a 600 px div got a 600 px focus ring around a 63 px button (and a 600 px hover area). Every call site in the app has a flex parent, so no page showed it. */
.ui-btn-wrap[b-z38r8zvkv0]  .ui-tooltip-region {
    width: fit-content;
}

[b-z38r8zvkv0] fluent-button.ui-btn {
    min-height: var(--control-h);
    min-width: 0;
    padding: 0 var(--btn-pad-x);
    /* The sheet's `.b` (02-actions.html:196): `font-weight: var(--fw-medium)` — the filled intents (primary, danger). Measured live on item 33's page (1280 × 900): Fluent's own 600 against the sheet's 500. */
    font-weight: var(--fw-medium);
}

/* …but the quiet intents are REGULAR in the sheet (02-actions.html:210, 213, 219, 221, 227: `.b-secondary`, `.b-ghost`, `.b-dangerghost`, `.b-toggle`, `.b-open` all `font-weight: var(--fw-regular)`; measured on the
   sheet: primary 500, secondary / ghost / open 400) — and a ghost's text is `--text` (#1f2933), not the supplier's `--colorNeutralForeground2` (#52606d): measured 400 / #1f2933 in the sheet against 500 / #52606d live. */
[b-z38r8zvkv0] fluent-button.ui-btn-secondary,
[b-z38r8zvkv0] fluent-button.ui-btn-ghost,
[b-z38r8zvkv0] fluent-button.ui-btn-dangerghost,
[b-z38r8zvkv0] fluent-button.ui-btn-toggle,
[b-z38r8zvkv0] fluent-button.ui-btn-open {
    font-weight: var(--fw-regular);
}

[b-z38r8zvkv0] fluent-button.ui-btn-ghost {
    color: var(--text);
}

[b-z38r8zvkv0] fluent-button.ui-btn-toggle[aria-pressed='true'] {
    font-weight: var(--fw-medium);   /* the sheet's `.b-toggle.is-on` */
}

/* …and `gap: var(--space-4)` between an icon and the label. The flex box that lays them out is INSIDE the supplier's shadow root (its one exposed part, "content"), so the gap goes there — a gap on the
   host reaches nothing (measured: host gap 4px, icon-to-text 0 — the "+" touched the "N" of "New representative"). */
[b-z38r8zvkv0] fluent-button.ui-btn::part(content) {
    gap: var(--space-4);
}

/* Fluent sizes a slotted svg at 20px; the sheet's `.ic` is --icon-sm (16px) — measured 20 against 16 on the same button. */
[b-z38r8zvkv0] fluent-button.ui-btn .ui-icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

[b-z38r8zvkv0] fluent-button.ui-btn[size='small'] {
    min-height: var(--control-h-sm);
    padding: 0 var(--btn-pad-x-sm);
}

[b-z38r8zvkv0] fluent-button.ui-btn[size='large'] {
    min-height: var(--control-h-lg);
}

/* LEAK (row B1): the focus ring is a hardcoded black box-shadow inside Fluent's own shadow
   stylesheet, unreachable by any custom property (measured at the spike, efca58a7d, and reconfirmed
   here: <fluent-button>'s shadow root exposes exactly one part, "content" -- there is no exposed
   part for the ring itself, so ::part() cannot reach it either). The host element IS the focusable
   surface (no wrapper needed for :focus-visible, unlike the sizing rules above which target the
   custom element's own attributes) -- targeting the host tag directly from outside, with
   !important, DOES win over the shadow root's internal :host(:focus-visible) rule (live-measured:
   see this component's Claude Code document for the before/after box-shadow values). */
[b-z38r8zvkv0] fluent-button.ui-btn:focus-visible {
    box-shadow: none !important;
    outline: var(--focus-w) solid var(--accent) !important;
    outline-offset: var(--focus-offset) !important;
}

/* Toggle intent's "on" state -- the sheet's accent-soft fill, not a Fluent appearance. */
[b-z38r8zvkv0] fluent-button.ui-btn-toggle[aria-pressed='true'] {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Open intent -- a link-styled button: no border, no fill, underline on hover. */
[b-z38r8zvkv0] fluent-button.ui-btn-open {
    background: none !important;
    border-color: transparent !important;
    color: var(--accent);
    min-width: 0;
    padding: 0;
}

/* FR-4 (FPL-001/REQ-025, item 60): 0 padding at EVERY size, found broken at Small. Raw
   specificity (Blazor's own scope attribute is identical on every ::deep rule here, so it cancels
   out of this comparison): the small-size rule above, `.ui-btn[size='small']`, is 1 class + 1
   attribute = 2 selector pieces; the Open rule right above this one, `.ui-btn-open`, is only 1 (a
   single class) -- so the small-size rule's own `0 var(--btn-pad-x-sm)` was winning the cascade
   over Open's `padding: 0` regardless of source order, giving a small Open button 10px of side
   padding per the `--btn-pad-x-sm` token's own value (not measured live here -- see the live check
   this fix's tests name). Default and Large were never actually broken
   -- neither carries a competing rule at Open's own specificity or higher (Default has no
   `[size=...]` rule at all; Large's own rule touches only `min-height`) -- so both already
   resolved correctly by a same-specificity TIE, Open's rule being declared later in this file. This
   rule fixes Small the same way any future size-specific rule could re-break it: by outranking it
   on specificity (2 classes + 1 attribute = 3 pieces, beating the small-size rule's 2) rather than
   depending on source order at all. `min-height` is untouched -- only `padding`. */
[b-z38r8zvkv0] fluent-button.ui-btn.ui-btn-open[size='small'] {
    padding: 0;
}

[b-z38r8zvkv0] fluent-button.ui-btn-open:hover {
    text-decoration: underline;
}

/* FPL-001/REQ-056 FR-2 (#3726; first for the Open intent by REQ-047 FR-2): the sheet's `.b-lg{height:var(--control-h-lg)}` changes the HEIGHT only -- the font is `.b`'s 14 / 20 at Default AND Large, every intent (measured at the
   anchored commit 4e9ae233d: the supplier's 16 / 22 at Large for all of them), and `.b-sm` changes the font SIZE only (the line height stays `.b`'s 20 -- the supplier drew 16). `min-height` (the `[size='large']` rule above)
   keeps the height. */
[b-z38r8zvkv0] fluent-button.ui-btn {
    line-height: var(--lh-body);
    min-width: var(--btn-min-w);   /* the sheet's `.b{min-width:var(--btn-min-w)}`: "OK" and "Save" keep a button's shape (the Open intent, `min-width: 0` below, is a link and has none) */
}

[b-z38r8zvkv0] fluent-button.ui-btn.ui-btn-open {
    min-width: 0;
}

[b-z38r8zvkv0] fluent-button.ui-btn[size='large'] {
    font-size: var(--fs-body);
}

[b-z38r8zvkv0] fluent-button.ui-btn[size='small'] {
    font-size: var(--fs-small);
}

/* FR-3: while pressed the Open intent draws sheet 02's `.b-open.is-pressed { color: var(--accent-press) }` -- the same colour the link already draws on `:active` below (measured at the anchored commit: held, it stayed --accent). */
[b-z38r8zvkv0] fluent-button.ui-btn-open:active {
    color: var(--accent-press);
}

/* A disabled Open (with its reason) does not press -- the same rule the link carries. */
[b-z38r8zvkv0] fluent-button.ui-btn-open.ui-btn-off:active {
    color: var(--accent);
}

/* Dash intent -- the sheet's own dashed-ghost "+ Add tier" button (added for RepeatingRowEditor,
   row 48, remainder item 13). No fill, dashed border, secondary text; accent on hover. */
[b-z38r8zvkv0] fluent-button.ui-btn-dash {
    border-style: dashed;
    border-color: var(--line);
    background: none !important;
    color: var(--text-secondary);
    font-weight: var(--fw-regular);
}

[b-z38r8zvkv0] fluent-button.ui-btn-dash:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Danger -- the sheet's own filled red (`.b-danger`, 02-actions.html 216-218), a genuinely distinct
   fill from Primary's accent purple -- found live (remainder item 21, R4): `ResolveAppearance()`
   maps Danger to the same `ButtonAppearance.Primary` as Primary itself, so without this override
   Danger rendered visually identical to Primary (measured: both the same computed background).
   One owner (here, on B1), so every row that reuses B1's own intents (IconButton/B2 already does)
   inherits the fix for free, never a per-consumer patch. */
[b-z38r8zvkv0] fluent-button.ui-btn-danger {
    background: var(--error) !important;
    border-color: transparent !important;
    color: var(--on-accent);
}

[b-z38r8zvkv0] fluent-button.ui-btn-danger:hover {
    background: var(--error-hover) !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-danger:active {
    background: var(--error-press) !important;
}

/* Danger-ghost -- transparent fill, error-colored text and hover wash. */
[b-z38r8zvkv0] fluent-button.ui-btn-dangerghost {
    background: none !important;
    border-color: transparent !important;
    color: var(--error);
}

[b-z38r8zvkv0] fluent-button.ui-btn-dangerghost:hover {
    background: var(--error-bg) !important;
}

/* Catalogue-wide finding (2026-09-19, planner audit): a disabled-with-reason control stays
   reachable by Tab and shows its reason on keyboard focus, not just hover. Button.razor hands the
   supplier `DisabledFocusable`, not `Disabled`, for this state (see its own header comment) -- the
   supplier's shadow stylesheet carries no visual at all for disabled-focusable (measured), so the
   `.4` look is entirely ours here, keyed off this class rather than `[disabled]`/`:disabled`. No
   `pointer-events: none` -- that would also suppress `:hover`, breaking the reason tooltip's hover
   half; interaction is blocked by the supplier's own disabled-focusable click/keypress guard plus
   Button.razor's own HandleClick guard, not by CSS. */
[b-z38r8zvkv0] fluent-button.ui-btn-off {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

/* FPL-001/REQ-036 (#3634): the Open intent WITH an address -- our own light-DOM <a> (Button.razor's link branch), not <fluent-button>.
   Its look is the Open intent's, copied per size from sheet 02 (`.b-open`, `.b`, `.b-sm`, `.b-lg`: body 14/20 at Default and Large, small 12/16 at Small;
   regular weight, accent, no border, no fill, no side padding, underline on hover only). Nothing of the browser's link look shows: no default blue/underline/outline. */
a.ui-link[b-z38r8zvkv0],
button.ui-link[b-z38r8zvkv0] {
    display: inline;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-regular);
    color: var(--accent);
    background: none;
    border: var(--border-w) solid transparent;   /* the sheet's `.b` border, kept transparent as on `.b-open` -- AC-3 compares the computed border with the Open intent's */
    padding: 0;
    min-width: 0;
    text-decoration: none;
    outline: none;
    cursor: pointer;
}

a.ui-link.ui-link-small[b-z38r8zvkv0],
button.ui-link.ui-link-small[b-z38r8zvkv0] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

/* Large: the link is the Open intent's body 14 / 20 like every other size but Small (REQ-047 FR-2, #3677). Until then the live Open button measured 16 px at Large -- the supplier's own large size, not the
   sheet's `.b-lg`, which changes the height only -- and this file carried a `ui-link-large` rule that followed it (REQ-036 FR-2 / AC-3: the link equals the rendered Open intent). Both are 14 now; the rule is gone. */

/* FPL-001/REQ-051 FR-2 (#3684): the new-tab mark -- sheet 02 `#proposed-2026-10-05` item 1 A (`.pp-nt`): row 82's `external` glyph after the text, 16 px (--icon-sm), --space-4 after it, vertically middle (the line height is the
   text's own: a 16 px box in a 20 px line), in the link's colour in every state (the glyph is `fill: currentColor`; the link's own colour rules -- rest, visited, :active, disabled -- reach it). On hover only the TEXT underlines:
   an inline-block replaced box is not decorated, and neither is its margin. A U+2060 word joiner (rendered before it) keeps it from wrapping alone onto a new line. Rendered only with `NewTab`; a link without it is unchanged. */
a.ui-link[b-z38r8zvkv0]  svg.ui-icon {
    display: inline-block;
    flex: none;
    width: var(--icon-sm);
    height: var(--icon-sm);
    margin-left: var(--space-4);
    vertical-align: middle;
}

/* In a cell the glyph sits inside the link's own padding, at its right edge: the text (the link is the one box that ellipsises, and the tooltip measures it) is cut at the content edge, BEFORE the glyph, and the glyph --
   inside the padding box -- is never clipped (AC-8). A short text keeps the glyph right after it (the link shrinks to text + 20 px). */
a.ui-link.ui-link-incell:has(> svg.ui-icon)[b-z38r8zvkv0] {
    position: relative;
    padding-right: calc(var(--icon-sm) + var(--space-4));
}

a.ui-link.ui-link-incell[b-z38r8zvkv0]  svg.ui-icon {
    position: absolute;
    right: 0;
    top: calc((100% - var(--icon-sm)) / 2);
    margin-left: 0;
}

/* A visited link looks the same as an unvisited one. */
a.ui-link:visited[b-z38r8zvkv0] {
    color: var(--accent);
}

a.ui-link:hover[b-z38r8zvkv0],
button.ui-link:hover[b-z38r8zvkv0] {
    text-decoration: underline;
}

/* Pressed: the sheet's `.b-open.is-pressed { color: var(--accent-press) }` (02-actions.html:229). The link, the in-cell action and the Open button (`::deep fluent-button.ui-btn-open:active`
   above) all draw --accent-press while held. */
a.ui-link:active[b-z38r8zvkv0],
button.ui-link:active[b-z38r8zvkv0] {
    color: var(--accent-press);
}

/* The in-cell Open action is a real <button>: the browser's own button defaults the <a> does not have are reset here, so the link's rules above draw it identically. */
button.ui-link[b-z38r8zvkv0] {
    font-family: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    text-align: inherit;
    margin: 0;
    box-sizing: content-box;   /* the <a>'s own: the cell's max-width clips the content box, as it does for the link */
    appearance: none;
}

/* The layer's one focus ring -- the same declaration the fluent-button focus rule above uses. */
a.ui-link:focus-visible[b-z38r8zvkv0],
button.ui-link:focus-visible[b-z38r8zvkv0] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

/* In a Grid cell / Kv value: one line, an ellipsis, the full text in the layer's tooltip (only while truncated). The truncation tooltip measures its
   region's first child, so the <a> is that first child. */
a.ui-link.ui-link-incell[b-z38r8zvkv0],
button.ui-link.ui-link-incell[b-z38r8zvkv0] {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* The tooltip regions around an in-cell link (the truncation tooltip's and the disabled-reason one's) are flex boxes that size to the label's full width -- left alone the link
   never narrows, so never truncates (measured live: 289 px in a 140 px cell). They must shrink to the cell. */
.ui-btn-wrap[b-z38r8zvkv0]  .ui-tooltip-region:has(.ui-link-incell) {
    min-width: 0;
    max-width: 100%;
}

/* In a sentence (FR-7): the tooltip region is a block-level flex box, which would break the line around every link (seen in the gallery's first screenshot: each link on its own
   line). A link that is not in a cell makes its region(s) inline, so it sits on the text's baseline and wraps with it. */
.ui-btn-wrap[b-z38r8zvkv0]  .ui-tooltip-region:has(a.ui-link:not(.ui-link-incell)) {
    display: inline;
    width: auto;
}

/* Disabled with a reason: the 0.4 look, reachable, no address in the page, no underline, never a pointer. */
a.ui-link.ui-btn-off[b-z38r8zvkv0],
button.ui-link.ui-btn-off[b-z38r8zvkv0] {
    opacity: var(--disabled-opacity);
    cursor: default;
}

a.ui-link.ui-btn-off:hover[b-z38r8zvkv0],
button.ui-link.ui-btn-off:hover[b-z38r8zvkv0] {
    text-decoration: none;
}

a.ui-link.ui-btn-off:active[b-z38r8zvkv0],
button.ui-link.ui-btn-off:active[b-z38r8zvkv0] {
    color: var(--accent);   /* a disabled link does not press */
}

/* The new-tab suffix of the accessible name when no AriaLabel is given: read by assistive technology, never drawn. */
.ui-visually-hidden[b-z38r8zvkv0] {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* FPL-001/REQ-046 FR-3 (#3676): the busy ring. The sheet's `.spinner` (the layer's shared ring, <Ring Class="ui-btn-ring" />) is the FIRST thing in the button's content -- BEFORE the label, INSIDE the button, where a leading icon
   would be: the owner's rule (FPL-001/DEC-004, "spinner before name inside button, not outside button"). The label is kept and the button is exactly as wide busy as at rest. Measured at the anchored commit 698cfcf23 the supplier's
   Loading spinner floated 16 px over the label and the button jumped (51 -> 64 Small, 63 -> 96 Default, 67 -> 96 Large). The room comes from the button's own padding, never from a slot reserved at rest.
   No icon: start padding --space-4, then the ring's 14 px and the content's own --space-4 gap, and the end padding gives back exactly what they took (4 + 14 + 4 + label + 6 = 14 + label + 14 at Default and Large; at Small,
   whose padding is 10, the start padding is 0 and the end padding 2). The trailing space is 6 px while busy -- accepted (planner ruling, 2026-10-05). */
[b-z38r8zvkv0] fluent-button.ui-btn.ui-btn-busy {
    padding-inline-start: var(--space-4);
    padding-inline-end: calc(var(--btn-pad-x) * 2 - var(--space-4) - var(--spinner-size) - var(--space-4));
}

[b-z38r8zvkv0] fluent-button.ui-btn.ui-btn-busy[size='small'] {
    padding-inline-start: 0;
    padding-inline-end: calc(var(--btn-pad-x-sm) * 2 - var(--spinner-size) - var(--space-4));
}

/* Without an icon the ring is centred on the label's line: the button's content row is top-aligned (a 14 px ring in a 20 px line sat 3 px high at Default, 4 at Large -- found by the fresh reviewer). */
[b-z38r8zvkv0] fluent-button.ui-btn.ui-btn-busy .ui-btn-ring {
    align-self: center;
}

/* A leading icon (the element right after the ring): the ring REPLACES it, in its place, with NO padding change -- the icon is taken out of the flow and the ring takes its 16 px box (the ring's 14 px plus 1 px each side),
   so the label does not move and the width cannot change (AC-12c: the ring sits where the icon sat, within 1 px). */
[b-z38r8zvkv0] fluent-button.ui-btn.ui-btn-busy:has(> .ui-btn-ring + svg) {
    padding-inline-start: var(--btn-pad-x);
    padding-inline-end: var(--btn-pad-x);
}

[b-z38r8zvkv0] fluent-button.ui-btn.ui-btn-busy[size='small']:has(> .ui-btn-ring + svg) {
    padding-inline-start: var(--btn-pad-x-sm);
    padding-inline-end: var(--btn-pad-x-sm);
}

[b-z38r8zvkv0] fluent-button.ui-btn.ui-btn-busy > .ui-btn-ring + svg {
    display: none;
}

[b-z38r8zvkv0] fluent-button.ui-btn.ui-btn-busy:has(> .ui-btn-ring + svg) > .ui-btn-ring {
    align-self: auto;   /* exactly where the icon was, wherever the row puts it */
    margin: calc((var(--icon-sm) - var(--spinner-size)) / 2);
}

/* Sheet 02 `.b-primary .spinner, .b-danger .spinner`: on a filled intent the ring is white on a faint track. */
[b-z38r8zvkv0] fluent-button.ui-btn-primary .ui-btn-ring,
[b-z38r8zvkv0] fluent-button.ui-btn-danger .ui-btn-ring {
    border-color: var(--topbar-fill);
    border-top-color: var(--on-accent);
}

/* FPL-001/REQ-056 FR-2 / FR-3 (#3726): every intent's colours in every state are the sheet's tokens -- never the supplier's. Measured at the anchored commit 4e9ae233d against sheet 02's own rules (tools/button-sheet-check):
   Primary hover / pressed stayed --accent, pressed was the supplier's dark blue; Secondary had no fill at rest, hover or pressed and a grey border; Toggle's text was the supplier's grey; DangerGhost's pressed text stayed --error;
   a disabled or busy button took the supplier's grey (rgb(240,240,240) / rgb(189,189,189)) where the sheet keeps the intent's own colours and only dims (`.b.is-disabled{opacity:var(--disabled-opacity)}`,
   `.b.is-busy{opacity:var(--busy-opacity)}`). The supplier sets these on the host, so each is stated with !important, as the Danger and Open rules above already do. */
[b-z38r8zvkv0] fluent-button.ui-btn-primary,
[b-z38r8zvkv0] fluent-button.ui-btn-primary.ui-btn-off,
[b-z38r8zvkv0] fluent-button.ui-btn-primary.ui-btn-busy {
    background: var(--accent) !important;
    color: var(--on-accent) !important;
    border-color: transparent !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-primary:hover:not(.ui-btn-off):not(.ui-btn-busy) {
    background: var(--accent-hover) !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-primary:active:not(.ui-btn-off):not(.ui-btn-busy) {
    background: var(--accent-press) !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-secondary,
[b-z38r8zvkv0] fluent-button.ui-btn-secondary.ui-btn-off,
[b-z38r8zvkv0] fluent-button.ui-btn-secondary.ui-btn-busy {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-secondary:hover:not(.ui-btn-off):not(.ui-btn-busy) {
    background: var(--fill-1) !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-secondary:active:not(.ui-btn-off):not(.ui-btn-busy) {
    background: var(--neutral-bg) !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-toggle,
[b-z38r8zvkv0] fluent-button.ui-btn-toggle.ui-btn-off,
[b-z38r8zvkv0] fluent-button.ui-btn-toggle.ui-btn-busy {
    background: transparent !important;
    color: var(--text) !important;
    border-color: transparent !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-toggle:hover:not(.ui-btn-off):not(.ui-btn-busy) {
    background: var(--fill-1) !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-toggle:active:not(.ui-btn-off):not(.ui-btn-busy) {
    background: var(--neutral-bg) !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-toggle[aria-pressed='true']:not(.ui-btn-off):not(.ui-btn-busy) {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-toggle[aria-pressed='true']:hover:not(.ui-btn-off):not(.ui-btn-busy) {
    background: var(--accent-soft) !important;
    color: var(--accent-hover) !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-toggle[aria-pressed='true']:active:not(.ui-btn-off):not(.ui-btn-busy) {
    background: var(--accent-soft) !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-dangerghost:active:not(.ui-btn-off):not(.ui-btn-busy) {
    background: var(--error-bg) !important;
    color: var(--error-press) !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-ghost.ui-btn-off,
[b-z38r8zvkv0] fluent-button.ui-btn-ghost.ui-btn-busy,
[b-z38r8zvkv0] fluent-button.ui-btn-dangerghost.ui-btn-off,
[b-z38r8zvkv0] fluent-button.ui-btn-dangerghost.ui-btn-busy,
[b-z38r8zvkv0] fluent-button.ui-btn-open.ui-btn-off,
[b-z38r8zvkv0] fluent-button.ui-btn-open.ui-btn-busy,
[b-z38r8zvkv0] fluent-button.ui-btn-danger.ui-btn-off,
[b-z38r8zvkv0] fluent-button.ui-btn-danger.ui-btn-busy {
    border-color: transparent !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-danger.ui-btn-off,
[b-z38r8zvkv0] fluent-button.ui-btn-danger.ui-btn-busy {
    background: var(--error) !important;
    color: var(--on-accent) !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-dangerghost.ui-btn-off,
[b-z38r8zvkv0] fluent-button.ui-btn-dangerghost.ui-btn-busy {
    color: var(--error) !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-ghost.ui-btn-off,
[b-z38r8zvkv0] fluent-button.ui-btn-ghost.ui-btn-busy {
    color: var(--text) !important;
}

[b-z38r8zvkv0] fluent-button.ui-btn-open.ui-btn-off,
[b-z38r8zvkv0] fluent-button.ui-btn-open.ui-btn-busy {
    color: var(--accent) !important;
}

/* A busy button keeps its own colours and the whole button dims (sheet 02 `.b.is-busy`): the supplier's `Disabled` (what makes it inert) no longer brings its grey; the ring (REQ-046) is unchanged. */
[b-z38r8zvkv0] fluent-button.ui-btn.ui-btn-busy {
    opacity: var(--busy-opacity);
}
/* frontend/Components/Ui/Card/Card.razor.rz.scp.css */
/* FPL-001/REQ-003, row 12 — Card. Every value is var(--token) (UI-LAYER.md §6). Base surface values
   (background/border/radius/panel-pad) are sheet-specified; header/body/footer internal spacing is
   this component's own synthesis (planner-approved 2026-09-19) — see Card.md for the live measurement
   that confirms these compute as intended. */

.ui-card[b-f3s63ivxf3] {
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

.ui-card-header[b-f3s63ivxf3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--panel-pad) var(--panel-pad) 0 var(--panel-pad);
}

.ui-card-title[b-f3s63ivxf3] {
    margin: 0;
    font-size: var(--fs-heading-sm);
    line-height: var(--lh-heading-sm);
    font-weight: var(--fw-semibold);
}

.ui-card-header-actions[b-f3s63ivxf3] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 0 0 auto;
}

.ui-card-body[b-f3s63ivxf3] {
    padding: var(--panel-pad);
}

.ui-card-header + .ui-card-body[b-f3s63ivxf3] {
    padding-top: var(--space-16);
}

.ui-card-footer[b-f3s63ivxf3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-8);
    padding: var(--space-12) var(--panel-pad);
    border-top: var(--border-w) solid var(--line);
}
/* frontend/Components/Ui/ChannelPreviewCard/ChannelPreviewCard.razor.rz.scp.css */
/* FPL-001/REQ-003, row 78 — M6 channel preview card. Ours in CSS, ported from the sheet's own
   `.prev*` rules (08-page-parts.html 747-756, 831-843) under our own `ui-cpv-*` class names (this
   catalogue's own naming convention, not the sheet's bare literal ones). Never sets its own width --
   sizes to whatever column its host (TwoColumnPageLayout, row 77) gives it. */

.ui-cpv-card[b-k2w463krs0] {
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

.ui-cpv-head[b-k2w463krs0] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12);
    border-bottom: var(--border-w) solid var(--line);
}

.ui-cpv-name[b-k2w463krs0] {
    display: block;
    font-weight: var(--fw-semibold);
    line-height: var(--lh-body);
}

.ui-cpv-when[b-k2w463krs0] {
    display: block;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-cpv-body[b-k2w463krs0] {
    padding: var(--space-12);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.ui-cpv-body-empty[b-k2w463krs0] {
    color: var(--placeholder);
    padding: var(--space-24) var(--space-12);
}

.ui-cpv-tag[b-k2w463krs0] {
    color: var(--accent);
}

.ui-cpv-over[b-k2w463krs0] {
    color: var(--error);
}

.ui-cpv-imgs[b-k2w463krs0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--prev-img-gap);
    padding: 0 var(--space-12) var(--space-12);
}

/* box-sizing: border-box applied proactively (not rediscovered live) -- the identical defect class
   MiniHeatTrendRow's own header comment documents: this app carries no global box-sizing reset
   matching the sheet's own mockup-wide `*{box-sizing:border-box}`, so a declared height plus this
   tile's own 1px border would otherwise render 2px taller than --prev-img-h/--prev-img-h-wide. */
.ui-cpv-img[b-k2w463krs0] {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: var(--prev-img-h);
    background: var(--fill-1);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    color: var(--placeholder);
}

.ui-cpv-img-ic[b-k2w463krs0] {
    width: var(--icon-lg);
    height: var(--icon-lg);
}

/* 1 image: full width, taller -- the sheet's own "the single full-width image" rule. */
.ui-cpv-imgs-1[b-k2w463krs0] {
    grid-template-columns: 1fr;
}

.ui-cpv-imgs-1 .ui-cpv-img[b-k2w463krs0] {
    height: var(--prev-img-h-wide);
}

/* 2 and 4 images take the base 2-column rule with no override -- the sheet's own CSS defines none
   for `.n2`/`.n4` either; 4 items in 2 columns wrap into a 2x2 grid by pure grid arithmetic. */

/* 3 images: the first one spans both rows and stretches to match -- "it STRETCHES to the two beside
   it" (the sheet's own comment, verbatim). */
.ui-cpv-imgs-3 .ui-cpv-img:first-child[b-k2w463krs0] {
    grid-row: span 2;
    height: auto;
}

/* A single tile the writer's own upload could not be read back -- reuses Filmstrip's own
   THUMB_UNAVAILABLE shape (Compact NamedError), not a card the sheet never drew this small.
   Presentational only (no sheet specimen at this size exists, matching NamedError's own Compact
   rationale) -- left-aligned/readable rather than centered like the plain icon tile. */
.ui-cpv-img-unavailable[b-k2w463krs0] {
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--space-8);
    text-align: left;
}

.ui-cpv-count[b-k2w463krs0] {
    padding: 0 var(--space-12) var(--space-8);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-cpv-count-ic[b-k2w463krs0] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: var(--error);
    vertical-align: calc(var(--space-2) * -1);
}

.ui-cpv-count-over[b-k2w463krs0] {
    color: var(--error);
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app, so
   any rule combining a border with padding is a latent risk the moment a host later pins this
   footer to a fixed height; pinned here for consistency with `.ui-cpv-img` above even though this
   rule has no explicit height of its own today. */
.ui-cpv-foot[b-k2w463krs0] {
    box-sizing: border-box;
    padding: var(--space-8) var(--space-12);
    border-top: var(--border-w) solid var(--line);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
}
/* frontend/Components/Ui/ChartFrame/ChartFrame.razor.rz.scp.css */
/* Shared scaffolding for rows 65-70 — see ChartFrame.razor's own header comment. Matched
   05-data-display.html's own `.chart`/`.plot`/`.xaxis`/`.chart-note` verbatim at this row's own
   build, all values from already-declared tokens (tokens.css lines 108-111), none redeclared here.
   **No longer verbatim as of item 47 (FPL-001/REQ-017 FR-13, 2026-09-26)**: `.ui-chart-plot`/
   `.ui-chart-xaxis` both gained `justify-content: space-between` — the sheet's own raw `.plot`/
   `.xaxis` rules have none, but a real plot wider than its own bucket count packed every column
   against the left edge with the sheet's own rule unchanged (measured live: six columns in the left
   half of a ~600px plot). See each rule's own comment below for the full account.
   `.ui-chart-head`/`.ui-chart-title`/`.ui-chart-lbl` moved to `ChartHead` (item 27's own read-back,
   "one shape means one component" — see ChartHead.razor's own header comment) — composed here, not
   redeclared. */

.ui-chart[b-00zovji2ky] {
    padding: var(--space-16) var(--cell-pad-x);
}

.ui-chart-note[b-00zovji2ky] {
    padding: var(--space-24) var(--cell-pad-x);
    color: var(--text-secondary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* The zero baseline: a hairline `border-bottom`, always drawn, always at the plot's own bottom
   edge — "the baseline is a hairline and always starts at zero" (the sheet's own words). */
/* Whole-branch pass, box-sizing sweep -- checked, NOT fixed, a deliberate exception: this rule's
   own rendered (outer) box measures 165px against a "declared" 160px, the same +padding+border
   shape every other sweep finding shares. Here `content-box` (the default, left as-is) is
   semantically CORRECT, not a bug: `--plot-h` is the CONTENT height every row's own bar-height math
   (VerticalBar.razor's own `PlotHeightPx`, `BarHeightPx`) is computed against -- switching to
   `border-box` would shrink that content area to 155px while every row still draws bars up to
   160px tall, overflowing the plot by 5px on the tallest bucket. The outer 165px is the correct
   trade-off (a few px of hairline+padding beyond the plot itself), not something to "fix" here. */
.ui-chart-plot[b-00zovji2ky] {
    display: flex;
    align-items: flex-end;
    /* Item 47 (FPL-001/REQ-017 FR-13): with no justify-content, flex's own default (flex-start) packed
       every column against the plot's LEFT edge -- measured live: a "many" (nine-series) bucket set of
       six columns filled only the left half of a ~600px plot, the right half empty (row 65's own
       gallery demo). `space-between` flushes the first column to the plot's own left edge and the
       last to its right edge (AC-26's own words), distributing the REST of the width evenly between
       them on top of the base `--bar-gap`; a single-column chart is unaffected (space-between with one
       item behaves exactly like flex-start). */
    justify-content: space-between;
    gap: var(--bar-gap);
    height: var(--plot-h);
    padding-bottom: var(--space-4);
    border-bottom: var(--border-w) solid var(--line);
}

.ui-chart-plot-sm[b-00zovji2ky] {
    height: var(--plot-h-sm);
}

/* No explicit height, matching the sheet's own `.col` exactly -- a real bug found live: with
   `.ui-chart-plot`'s own `align-items:flex-end` (not `stretch`), a flex item's `height:100%` does
   NOT resolve against the container's definite height (it needs to be stretched for that), so a
   percentage-height bar inside an explicitly-100%-tall `.ui-chart-col` measured 0px live. The sheet
   itself never relies on this: each row's own column template sets an ABSOLUTE pixel height
   directly on the bar/segment element (computed from the bucket's own value against --plot-h in
   pixels), and `.ui-chart-col` only needs `justify-content:flex-end` to keep that content anchored
   to the baseline -- exactly the sheet's own technique, not a percentage at any level. */
.ui-chart-col[b-00zovji2ky] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: var(--bar-w);
}

.ui-chart-col-clickable[b-00zovji2ky] {
    cursor: pointer;
}

/* Item 26's own width variant (row 67, grouped/paired bar's two-bar-per-column shape) — matches
   the sheet's own `.plot.wide .col`/`.xaxis.wide span` exactly. Compound selector, not a bare class,
   so it reliably wins over `.ui-chart-col`'s own unconditional `width` regardless of source order. */
.ui-chart-col.ui-chart-col-wide[b-00zovji2ky] {
    width: calc(var(--bar-w-sm) * 2 + var(--bar-gap-sm));
}

.ui-chart-xaxis[b-00zovji2ky] {
    display: flex;
    /* Item 47 (FPL-001/REQ-017 FR-13), caught in review before merge: `.ui-chart-plot`'s own columns
       now spread with `justify-content: space-between` (below), but this row -- the label under each
       column -- did not, leaving every label packed left while its own bar moved right: measured live,
       a 378px misalignment on row 65's own six-column "many" specimen. Must always match
       `.ui-chart-plot`'s own justify-content so a label stays under its own bar regardless of column
       count. */
    justify-content: space-between;
    gap: var(--bar-gap);
    margin-top: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
}

.ui-chart-xaxis span[b-00zovji2ky] {
    width: var(--bar-w);
    text-align: center;
}

.ui-chart-xaxis span.ui-chart-xaxis-wide[b-00zovji2ky] {
    width: calc(var(--bar-w-sm) * 2 + var(--bar-gap-sm));
}

/* FPL-001/REQ-050: the plot as an inline-size container, only when a row asks (`InlineSizeContainer`) — row 66's value labels size against its width (cqw). Containment needs the plot's width from OUTSIDE, which it has (a block flex row). */
.ui-chart-plot-cq[b-00zovji2ky] {
    container-type: inline-size;
}
/* frontend/Components/Ui/ChartHead/ChartHead.razor.rz.scp.css */
/* Extracted from ChartFrame.razor.css on item 27's own read-back — see ChartHead.razor's own header
   comment. Matches 05-data-display.html's own `.chart-head` verbatim, all values from
   already-declared tokens, none redeclared here. */

.ui-chart-head[b-vrr2wetshf] {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
    padding: var(--space-8) var(--cell-pad-x);
    border-bottom: var(--border-w) solid var(--line);
}

.ui-chart-title[b-vrr2wetshf] {
    font-size: var(--fs-heading-sm);
    line-height: var(--lh-heading-sm);
    font-weight: var(--fw-semibold);
    margin: 0;
}

.ui-chart-lbl[b-vrr2wetshf] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Ui/Checkbox/Checkbox.razor.rz.scp.css */
/* FPL-001/REQ-003, row 41 — Checkbox. Ours in CSS AND markup (see Checkbox.razor's own header
   comment for why FluentCheckbox was rejected). No `::deep`/wrapper-scoping concern — there is no
   supplier custom element, so Blazor's own CSS-isolation scope attribute attaches directly to
   every element below exactly as written. */

.ui-ck[b-mzvhn4m858] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--check-gap);
    font-size: var(--fs-body);
    color: var(--text);
    cursor: pointer;
}

/* Catalogue-wide finding (2026-09-19, planner audit): a disabled-with-reason control must stay
   reachable by Tab and show its reason on keyboard focus too, not just hover -- `pointer-events:
   none` would also suppress `:hover` (pointer-events gates hover matching, not just click), which
   would silently break the hover half of this same requirement. Interaction is blocked at the
   input's own onclick instead (see Checkbox.razor's @onclick:preventDefault), not via CSS. */
.ui-ck-off[b-mzvhn4m858] {
    cursor: not-allowed;
}

/* REQ-012 FR-1: the label is NOT dimmed — its PARTS are (the box and the text) — so the label can draw the focus ring at full strength (opacity dims a control's own outline; see Tooltip.razor.css).
   Visually identical to dimming the label: the label paints nothing of its own. */
.ui-ck-off > .ui-ck-box[b-mzvhn4m858],
.ui-ck-off > .ui-ck-label[b-mzvhn4m858] {
    opacity: var(--disabled-opacity);
}

.ui-ck:has(> .ui-ck-input.ui-dis:focus-visible)[b-mzvhn4m858] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius);
}

/* Visually hidden but still focusable, tabbable and screen-reader-visible -- never display:none or
   visibility:hidden, both of which would remove it from the accessibility tree entirely and defeat
   the whole point of building on a real native input. */
.ui-ck-input[b-mzvhn4m858] {
    position: absolute;
    width: var(--check-size);
    height: var(--check-size);
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* pointer-events: none (found live, not assumed): the native input is absolutely positioned
   directly under this box at the same 16px rect, but as the LATER sibling in DOM order this box
   (and its child icon/dash) painted on top and intercepted the click before it ever reached the
   input -- confirmed via Playwright's own actionability check, which refused to click through it
   ("<i class="ui-ck-dash"> intercepts pointer events") rather than silently clicking the wrong
   thing. With pointer-events disabled here, every click anywhere in this box's rect lands directly
   on the input underneath; a click on the label TEXT still works via ordinary native
   <label>-to-<input> forwarding, since the text never overlapped the input in the first place. */
/* box-sizing: border-box (whole-branch pass) -- declared 16x16 + this rule's own 1px border
   rendered 18x18 live. Radio's own .ui-ck-box (a separate CSS-isolated file, same class name by
   convention) needs the identical fix independently -- see Radio.razor.css. */
.ui-ck-box[b-mzvhn4m858] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--check-size);
    height: var(--check-size);
    flex: none;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    pointer-events: none;
    transition: background var(--motion-micro) var(--ease), border-color var(--motion-micro) var(--ease);
}

.ui-ck:hover .ui-ck-box[b-mzvhn4m858] {
    border-color: var(--line-hover);
}

.ui-ck-ic[b-mzvhn4m858] {
    width: var(--check-mark);
    height: var(--check-mark);
    opacity: 0;
    color: var(--on-accent);
}

.ui-ck-dash[b-mzvhn4m858] {
    display: block;
    width: var(--check-mark);
    height: var(--check-dash);
    border-radius: var(--radius-pill);
    background: var(--on-accent);
    opacity: 0;
}

.ui-ck-input:checked + .ui-ck-box[b-mzvhn4m858],
.ui-ck-input:indeterminate + .ui-ck-box[b-mzvhn4m858] {
    background: var(--accent);
    border-color: var(--accent);
}

.ui-ck-input:checked + .ui-ck-box .ui-ck-ic[b-mzvhn4m858] {
    opacity: 1;
}

.ui-ck-input:indeterminate + .ui-ck-box .ui-ck-dash[b-mzvhn4m858] {
    opacity: 1;
}

.ui-ck-input:focus-visible:not(.ui-dis) + .ui-ck-box[b-mzvhn4m858] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-ck-label[b-mzvhn4m858] {
    line-height: var(--lh-body);
}

/* research #70: "the whole label is the hit target" -- no extra markup or JS needed for this, it's
   the native behavior of a real <label> wrapping a real <input>. */
/* frontend/Components/Ui/Combobox/Combobox.razor.rz.scp.css */
/* FPL-001/REQ-003, row 40 — Combobox / typeahead. Ours in CSS AND markup (see Combobox.razor's own
   header comment for the measured FluentAutocomplete rejection). No `::deep`/wrapper-scoping
   concern — no supplier custom element, so Blazor's own CSS-isolation scope attribute attaches
   directly to every element below exactly as written. */

.ui-fld[b-2htllymzae] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: var(--combo-w);
}

.ui-fld-w[b-2htllymzae] {
    width: 100%;
}

.ui-fld-lbl[b-2htllymzae] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
}

.ui-req[b-2htllymzae] {
    color: var(--accent);
}

.ui-cb-wrap[b-2htllymzae] {
    position: relative;
    width: 100%;
}

/* box-sizing: border-box (whole-branch pass) -- declared height 32px + this rule's own 1px border
   rendered 34px live. */
.ui-cb[b-2htllymzae] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    height: var(--control-h);
    padding: 0 var(--input-pad-x);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

.ui-cb:hover[b-2htllymzae] {
    border-color: var(--line-hover);
}

.ui-cb-open[b-2htllymzae] {
    border-color: var(--accent);
}

/* the border-only invalid shape (Invalid, added for the inline-editing shell): the same red frame TextInput's .ui-in-bad draws */
.ui-cb-bad:not(.ui-cb-open)[b-2htllymzae],
.ui-cb-bad:not(.ui-cb-open):hover[b-2htllymzae] {
    border-color: var(--error);
}

/* FPL-001/REQ-018 (item 49) FR-1(c): `.ui-cb-in` drew the browser's default outline. The input is an inner part of
   ONE composite whose FRAME (`.ui-cb`, the bordered box) is the visual control — the same shape as NumberStepper's
   own input (REQ-012 AC-30): the frame rings, the input itself draws none. `:not(.ui-dis)` matches NumberStepper's
   own guard exactly (`.ui-num:has(.ui-num-in:focus-visible:not(.ui-dis))`) — a disabled-with-reason Combobox's
   input carries `.ui-dis` (below) and is already ringed by the undimmed `.ui-tooltip-region` around it
   (Tooltip.razor.css, keyed on that same class); without this guard the frame drew a SECOND, dimmed ring on top
   of that one (whole-branch review finding, 2026-09-26). */
.ui-cb:has(.ui-cb-in:focus-visible:not(.ui-dis))[b-2htllymzae] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-cb-ic[b-2htllymzae] {
    flex: none;
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: var(--placeholder);
}

.ui-cb-in[b-2htllymzae] {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--fs-body);
    color: var(--text);
}

.ui-cb-in:focus-visible[b-2htllymzae] {
    outline: none;
}

.ui-cb-in[b-2htllymzae]::placeholder {
    color: var(--placeholder);
}

/* Catalogue-wide finding (2026-09-19, planner audit): a disabled-with-reason control stays
   reachable by Tab and shows its reason on keyboard focus, not just hover -- the native `disabled`
   attribute (and `pointer-events:none`, which also suppresses `:hover`) both remove that. Uses the
   HTML `readonly` attribute instead (see Combobox.razor's own <input>) -- keeps the field focusable
   and its text selectable/copyable while genuinely blocking edits at the platform level, unlike
   `disabled`. A class, not `:disabled`/`:has(:disabled)`, since the real attribute is never set
   here; OnInputClick already no-ops when Disabled (unchanged), and OnQueryInput now guards too. */
.ui-cb-off[b-2htllymzae] {
    position: relative;
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* FPL-001/REQ-054 FR-4 (owner's choice 4 on sheet 04 §4a, as the multiple Select does): a disabled field is NOT dimmed as one box any more -- the chosen tag keeps its own fill and hairline and only its TEXT dims. So the
   field's fill and border are drawn on a layer behind the content at --disabled-opacity (what the whole-box opacity used to do to them), and each part that is dimmed is dimmed on its own. */
.ui-cb-off[b-2htllymzae]::before {
    content: "";
    position: absolute;
    inset: calc(var(--border-w) * -1);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--fill-1);
    opacity: var(--disabled-opacity);
    pointer-events: none;
}

.ui-cb-off:hover[b-2htllymzae] {
    border-color: transparent;
}

.ui-cb-off > *[b-2htllymzae] {
    position: relative;
}

.ui-cb-off > .ui-cb-ic[b-2htllymzae],
.ui-cb-off > .ui-cb-in[b-2htllymzae] {
    opacity: var(--disabled-opacity);
}

.ui-cb-off[b-2htllymzae]  .ui-tag-body,
.ui-cb-off[b-2htllymzae]  .ui-tag-remove {
    opacity: var(--disabled-opacity);
}

.ui-cb-off[b-2htllymzae]  .ui-tag-remove {
    cursor: not-allowed;
}

/* The loading ring is the layer's shared one (FPL-001/REQ-046 FR-4, wwwroot/css/ring.css, drawn through <Ring />), in this component's own colours as it always was: the accent head on a --fill-1 track. */
.ui-cb[b-2htllymzae]  .ui-cb-spin {
    border-color: var(--fill-1);
    border-top-color: var(--accent);
}

/* FPL-001/REQ-054 (#3724): the chosen person is row 26's Tag (Combobox.razor composes it; nothing of its look is repeated here). This only PLACES it: a flex item that may shrink (`min-width: 0`) so a long name is cut inside the
   tag by the Tag's own `--tag-max-w` / ellipsis and the ✕ is never pushed out of the field -- the field's height and width never change. */
.ui-cb-tag[b-2htllymzae] {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    align-items: center;
}

.ui-cb-ro[b-2htllymzae] {
    display: flex;
    align-items: center;
    height: var(--control-h);
    color: var(--text);
    font-size: var(--fs-body);
}

/* box-sizing: border-box (whole-branch pass) -- declared width 320px + this rule's own 1px border
   and padding would otherwise render wider than declared; fixed proactively alongside .ui-cb above
   rather than waiting to open the menu and re-find it. */
.ui-cb-menu[b-2htllymzae] {
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    margin-top: var(--space-4);
    width: var(--combo-w);
    padding: var(--menu-pad);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-overlay);
}

.ui-cb-scroll[b-2htllymzae] {
    max-height: calc(var(--opt-h) * var(--opt-visible));
    overflow: auto;
}

.ui-cb-opt[b-2htllymzae] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    height: auto;
    padding: var(--space-4) var(--btn-pad-x-sm);
    border-radius: var(--radius);
    font-size: var(--fs-body);
    color: var(--text);
    text-align: left;
    transition: background var(--motion-menu) var(--ease);
}

.ui-cb-opt:hover[b-2htllymzae],
.ui-cb-opt-highlighted[b-2htllymzae] {
    background: var(--fill-1);
}

.ui-cb-opt-av[b-2htllymzae] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-sm);
    height: var(--avatar-sm);
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--neutral-bg);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
}

.ui-cb-opt-stack[b-2htllymzae] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.ui-cb-opt-stack b[b-2htllymzae] {
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-cb-opt-stack span[b-2htllymzae] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
}

.ui-cb-hint-row[b-2htllymzae] {
    padding: var(--space-8) var(--btn-pad-x-sm);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-cb-foot[b-2htllymzae] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding-top: var(--menu-pad);
    margin-top: var(--menu-pad);
    border-top: var(--border-w) solid var(--line);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-hint[b-2htllymzae] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/Ui/ConfirmationDialog/ConfirmationDialog.razor.rz.scp.css */
/* FPL-001/REQ-003, row 58 — Confirmation dialog. This component owns no new visual chrome of its
   own: the shell/spacing/typography all come from row 17 (Dialog)'s own CSS, the buttons from row
   B1, the reason field from row 54 (ReasonBox). The one real rule below exists because EmptyState's
   FailedLoad strip is sized for a full-width page context by default and reads oddly
   cramped/margin-heavy at the dialog's fixed 440px inside `.ui-dlg-body` without a negative margin
   to cancel the body's own padding on that one strip. */

.ui-cd-unavailable[b-0qb0c354r5] {
    margin: 0 calc(var(--dialog-pad) * -1);
}
/* frontend/Components/Ui/DatePicker/DatePicker.razor.rz.scp.css */
/* FPL-001/REQ-003, row 44 — Date picker. Hybrid: FluentCalendar for the popup grid only, ours for
   the field (TextInput) and the popup shell/foot. `::deep` reaches FluentCalendar's own supplier
   markup — a wrapper-scoping case exactly like Grid's own FluentDataGrid wrap (Button/B1's
   original lesson): FluentCalendar sits directly inside .ui-dp-pop with no extra plain-HTML layer
   in between other than .ui-dp-pop itself, which the scope attribute already attaches to.

   Found live (remainder item 5, row 45's own build), fixed here: the calendar suffix icon rendered
   at 0×0 — an <svg> with no width/height and no CSS sizing computes to zero inside TextInput's
   `.ui-affix-ic` flex box. A rule in TextInput.razor.css cannot reach it (Blazor CSS isolation only
   scopes to the declaring file's own attribute, and this <svg> is authored here, not there — see
   TextInput.razor.css's own note); sized directly on this file's own icon instead, same fix
   TimeField.razor.css carries for its clock icon. */
.ui-dp-ic[b-1vare4mx7g] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
}

/* Row 64/Popover now owns position/z-index/background/border/radius/shadow (see Popover.razor.css's
   own `.ui-pop`/`.ui-pop-wrap`) -- this file keeps only what is genuinely DatePicker's own: the
   wrapper's width (Popover's own default is `inline-flex`, not full-width) and the calendar-grid
   width (`--cal-cell * 7 + --cal-pad * 2`, unchanged from before this row -- the "matches the
   trigger's width" sentence in 04-data-entry.html:1025-1034 is Select's own open list, row 39, not
   this popover; see DatePicker.md's own resolved-ambiguity note). Combined selectors
   (`.ui-pop-wrap.ui-dp-wrap` / `.ui-pop.ui-dp-pop`), not bare `.ui-dp-wrap`/`.ui-dp-pop` -- both
   classes land on the SAME element via Popover's WrapClass/ContentClass, and a combined selector
   wins regardless of which stylesheet the bundler places first (see Popover.razor's own header
   comment). `::deep` is required now, not optional: these elements are rendered by Popover.razor's
   own markup, a CHILD component from this file's own scoping perspective -- exactly the same reason
   the FluentCalendar rule below already needed it, now true one level higher too. */
[b-1vare4mx7g] .ui-pop-wrap.ui-dp-wrap {
    display: inline-block;
    width: 100%;
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- this formula already bakes the
   popup's own padding INTO the declared width (the intent is "7 cells plus the padding around
   them"), so under the browser's content-box default the same padding was being added a SECOND time
   on top, rendering wider than either the formula states or the layout below assumes. */
[b-1vare4mx7g] .ui-pop.ui-dp-pop {
    box-sizing: border-box;
    width: calc(var(--cal-cell) * 7 + var(--cal-pad) * 2);
    padding: var(--cal-pad);
}

/* FluentCalendar's own header/grid sizing is supplier-default (unstyled) -- pin it to the sheet's
   32px cell (--cal-cell = --control-h already) and 7-column layout explicitly rather than assume
   the supplier's own default matches. */
[b-1vare4mx7g] .ui-dp-pop [class*="calendar"],
[b-1vare4mx7g] .ui-dp-pop table {
    width: 100%;
}

.ui-dp-day-inner[b-1vare4mx7g] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--cal-cell);
    width: 100%;
    border-radius: var(--radius);
    font-size: var(--fs-body);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.ui-dp-day-wk[b-1vare4mx7g] {
    color: var(--text-secondary);
}

.ui-dp-day-disabled[b-1vare4mx7g] {
    color: var(--placeholder);
    cursor: default;
}

.ui-dp-day-holiday[b-1vare4mx7g] {
    cursor: pointer;
}

.ui-dp-dot[b-1vare4mx7g] {
    position: absolute;
    bottom: var(--space-4);
    width: var(--cal-dot);
    height: var(--cal-dot);
    border-radius: var(--radius-pill);
    background: var(--warn);
}

.ui-dp-foot[b-1vare4mx7g] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: var(--border-w) solid var(--line);
}

.ui-dp-foot-spacer[b-1vare4mx7g] {
    flex: 1;
}

/* OpenOnFocus off: the calendar's icon is a real button (the time field's clock is the precedent) */
.ui-dp-btn[b-1vare4mx7g] {
    display: flex;
    cursor: pointer;
}
/* frontend/Components/Ui/DeterminateProgress/DeterminateProgress.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 59 — Determinate progress, matching .track/.prog-line/.done
   verbatim (03-feedback.html lines 391-398, 411-412). --progress-w/--progress-h/--radius-pill/
   --fill-1/--accent/--ok/--error/--space-4/--space-8/--space-12/--fs-small/--lh-small/--fw-medium/
   --icon-sm are all already-declared tokens; nothing new added here. */

.ui-dp-track[b-q9uactv9ku] {
    width: var(--progress-w);
    height: var(--progress-h);
    border-radius: var(--radius-pill);
    background: var(--fill-1);
    overflow: hidden;
}

.ui-dp-track i[b-q9uactv9ku] {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

.ui-dp-track-done i[b-q9uactv9ku] {
    background: var(--ok);
}

.ui-dp-track-bad i[b-q9uactv9ku] {
    background: var(--error);
}

.ui-dp-line[b-q9uactv9ku] {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    margin-top: var(--space-8);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-dp-line-bad[b-q9uactv9ku] {
    color: var(--error);
}

.ui-dp-done[b-q9uactv9ku] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--ok);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
}

.ui-dp-spacer[b-q9uactv9ku] {
    flex: 1;
}

.ic[b-q9uactv9ku] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
}
/* frontend/Components/Ui/Dialog/Dialog.razor.rz.scp.css */
/* FPL-001/REQ-003, row 17 — Dialog / modal. Ours in markup (a native <dialog>), CSS-isolation scope
   attribute attaches directly since there's no supplier custom element. Native top-layer promotion
   handles stacking order among overlays without a z-index fight; --z-dialog is kept on the host
   itself only so a page inspecting computed style sees the sheet's own declared value (06-overlays.html
   §2's --z-dialog:60), not because top-layer elements are compared by z-index at runtime. */

.ui-dlg[b-gm6l1z9brc] {
    width: var(--dialog-w);
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);   /* the UA's `dialog { color: CanvasText }` is black: without this the dialog's own text (the footer's unsaved count, any bare text) was #000 beside #1f2933 neighbours (measured live, item 33) */
    box-shadow: var(--shadow-overlay);
    z-index: var(--z-dialog);
}

/* The native ::backdrop sits in its own top-layer slot behind the <dialog>, one per instance, so two
   simultaneously-open dialogs each get their own dimming layer -- exactly FR-10's stacking rule,
   satisfied by the platform rather than a hand-authored .scrimlayer div. */
.ui-dlg[b-gm6l1z9brc]::backdrop {
    background: var(--scrim);
}

.ui-dlg-head[b-gm6l1z9brc] {
    padding: var(--dialog-pad) var(--dialog-pad) var(--space-8);
    font-size: var(--fs-heading-md);
    line-height: var(--lh-heading-md);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.ui-dlg-body[b-gm6l1z9brc] {
    padding: 0 var(--dialog-pad) var(--dialog-pad);
    color: var(--text-secondary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.ui-dlg-foot[b-gm6l1z9brc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-8);
    padding: 0 var(--dialog-pad) var(--dialog-pad);
}

/* Narrow width (Depth's "width per kind, narrow width"; planner ruling 2026-09-19 -- the base rule's
   own unconditional `max-width: calc(100vw - var(--space-24)*2)` was removed here: above 900px it
   never bound anything (440px is always under that cap), and below 900px it only contradicted this
   rule's own --space-16 gutter, silently capping the dialog 16px narrower than intended -- found by a
   real 375px measurement (327px rendered, not the 343px this rule alone implies) before this fix).
   Below the sitewide 900px breakpoint this layer already uses (Toolbar/M2/M3/FormField), the dialog
   goes full-bleed with a --page-gap side gutter, one rule, nothing else constraining it. */
@media (max-width: 900px) {
    .ui-dlg[b-gm6l1z9brc] {
        /* Both width AND max-width: the browser's own <dialog> UA stylesheet ships a default
           max-width (measured live: calc(100% - 38px), NOT related to any of our tokens) that
           silently wins over a plain `width` declaration alone -- found by a real 375px
           measurement landing at 337px instead of this rule's intended 343px, immediately after
           removing the old incorrect 24px cap below. An explicit max-width here is required to
           actually override the UA default, not optional polish. */
        width: calc(100vw - var(--space-16) * 2);
        max-width: calc(100vw - var(--space-16) * 2);
    }
}
/* frontend/Components/Ui/DisabledReasonTooltip/DisabledReasonTooltip.razor.rz.scp.css */
/* FPL-001/REQ-003 — DisabledReasonTooltip renders nothing of its own visual box (it's a thin
   wrapper around FluentTooltip, which teleports its own content via a tooltip-provider portal, not
   into this component's own DOM subtree) — no rule needed. File exists to satisfy FR-1's
   one-folder-three-files rule. */
/* frontend/Components/Ui/DistributionMiniChart/DistributionMiniChart.razor.rz.scp.css */
/* Catalogue row 69 (Distribution mini-chart 0-5) — the one thing this form adds to ChartFrame's own
   shared scaffolding: a single --series-N bar per bucket (N caller-supplied, defaulting to 1). No
   stacking, no hairline, no hover-outline -- one plain rounded-top bar, matching the sheet's own
   visual result even though its raw markup reuses .stackbar/.seg (a one-segment "stack" looks
   identical to a plain bar; not worth reusing that column-reverse/hairline machinery for one
   segment). Baseline/xaxis/tooltip/click/text-state/unavailable-state are ALL ChartFrame's own; see
   DistributionMiniChart.razor's own header comment. */
.ui-dist-bar[b-5cu697iwyn] {
    display: block;
    width: 100%;
    border-radius: var(--space-2) var(--space-2) 0 0;
}

.ui-dist-s1[b-5cu697iwyn] { background: var(--series-1); }
.ui-dist-s2[b-5cu697iwyn] { background: var(--series-2); }
.ui-dist-s3[b-5cu697iwyn] { background: var(--series-3); }
.ui-dist-s4[b-5cu697iwyn] { background: var(--series-4); }
/* frontend/Components/Ui/Divider/Divider.razor.rz.scp.css */
/* FPL-001/REQ-003, row 15 — Divider. Every value is var(--token) (UI-LAYER.md §6). */

.ui-divider[b-ucl38036gq] {
    display: block;
    border: 0;
    margin: 0;
    border-top: var(--border-w) solid var(--line);
}

.ui-divider-dashed[b-ucl38036gq] {
    border-top-style: dashed;
}

/* The labeled treatment replaces the single border-top with two dashed segments flanking the
   label, so the label itself sits directly on the line rather than beside it. */
.ui-divider-labeled[b-ucl38036gq] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    border-top: 0;
}

.ui-divider-seg[b-ucl38036gq] {
    flex: 1 1 auto;
    height: 0;
    border-top: var(--border-w) dashed var(--line);
}

.ui-divider-label[b-ucl38036gq] {
    flex: 0 0 auto;
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--text-secondary);
}
/* frontend/Components/Ui/EditDrawer/EditDrawer.razor.rz.scp.css */
/* FPL-001/REQ-003, row 16 -- Edit drawer. Ours (native <dialog>), CSS-isolation scope attribute
   attaches directly since there's no supplier custom element. Right-anchored, full height under the
   bar, --z-drawer (50) -- a fundamentally different container shape from Dialog/17's centered 440px
   box, which is why this component owns its own <dialog> rather than composing <Dialog> (see
   EditDrawer.razor's own header comment). */

.ui-drawer[b-ouzq8fz6b4] {
    box-sizing: border-box;   /* the sheet's `*{box-sizing:border-box}`: the drawer is 640 WIDE including its 1px left hairline (built content-box: 641 — measured live against sheet 09's 640) */
    position: fixed;
    inset: var(--topbar-h) 0 0 auto;   /* the sheet's `.dx { top: var(--topbar-h) }` (06-overlays.html): the top bar stays whole above the drawer (built at top 0 it hid the bar's right half — search, bell, avatar) */
    margin: 0;
    width: clamp(var(--drawer-min), var(--drawer-w-edit), var(--drawer-max));
    min-width: var(--drawer-min);
    max-width: var(--drawer-max);
    height: calc(100% - var(--topbar-h));
    max-height: calc(100% - var(--topbar-h));
    padding: 0;
    border: none;
    border-left: var(--border-w) solid var(--line);   /* the sheet's `.dx` left hairline */
    border-radius: 0;
    background: var(--surface);
    color: var(--text);   /* the UA's `dialog { color: CanvasText }` is black: without this the dialog's own text (the footer's unsaved count, any bare text) was #000 beside #1f2933 neighbours (measured live, item 33) */
    box-shadow: var(--shadow-overlay);
    z-index: var(--z-drawer);
}

/* Real bug found live (2026-09-19): an unconditional `display: flex` here overrides the native
   <dialog>'s own UA-stylesheet default (`display: none` while the `open` attribute is absent),
   which Dialog.razor's own CSS never needs to touch at all -- the browser sets visibility itself as
   part of `showModal()`. Scoping this to `[open]` was the fix; without it, a "closed" drawer stayed
   a fixed, full-height box over the right side of the viewport, invisible (background/box-shadow
   still painted, but layered under other content) yet still capturing pointer events there --
   reproduced live as Playwright's own "element intercepts pointer events" failures on completely
   unrelated buttons elsewhere on the page, well after this component's own C# state and the
   `open` HTML attribute both correctly reported closed. */
.ui-drawer[open][b-ouzq8fz6b4] {
    display: flex;
    flex-direction: column;
}

.ui-drawer[b-ouzq8fz6b4]::backdrop {
    background: var(--scrim);
    inset: var(--topbar-h) 0 0 0;   /* the scrim starts UNDER the bar (mockup 09: scrim y 49, the bar undimmed) */
}

/* Narrow width: full-bleed below the sitewide 900px breakpoint (06-overlays.html --overlay-narrow),
   not a fixed 560px minimum on a phone-width viewport. 899.98px, not 900: `max-width: 900px` is
   INCLUSIVE of exactly 900, which fired this rule one step too early against FR-1's own "at 900px
   and above they keep their sheet widths" (found live, item 58/FPL-001/REQ-023). Both LEFT and RIGHT
   insets (the base rule's `inset: var(--topbar-h) 0 0 auto` only ever set the right one), width
   `auto` -- not `width: 100vw`, which counts the classic scrollbar's own gutter that
   `document.documentElement.clientWidth` doesn't: with `right: 0` already anchoring the true right
   edge, a `100vw` width overshoots it and pushes `left` negative by exactly the scrollbar's width
   (measured live: left -10, width 10px over clientWidth, every narrow width tried). Two insets let
   the browser compute the width itself, from the true visible viewport, on both classic and overlay
   scrollbars -- no `vw` unit anywhere in this rule. */
@media (max-width: 899.98px) {
    .ui-drawer[b-ouzq8fz6b4] {
        inset: var(--topbar-h) 0 0 0;
        width: auto;
        max-width: none;
        min-width: 0;
    }
}

.ui-drawer-head[b-ouzq8fz6b4] {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: var(--space-12);   /* the sheet's `.dx-head` gap (06-overlays.html:553) */
    padding: var(--space-16);   /* the sheet's `.dx-head` / `.dx-body`: --space-16 (measured 16 on 06). Built with --dialog-pad (24) — the DIALOG's padding — one token step too large, everywhere in the drawer */
    border-bottom: var(--border-w) solid var(--line);
}

.ui-drawer-head-text[b-ouzq8fz6b4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);   /* the sheet's `.dx-sub { margin-top: var(--space-2) }` — the text block is 46 tall (title 28 + 2 + subtitle 16); built with --space-4 it was 48 and the head 81 against the sheet's 79 */
    /* Item 34 (FPL-001/REQ-006 FR-2): flex: 1 1 auto (was bare -- the head relied on the PARENT's
       own `justify-content: space-between` to push the two-child case apart) -- with a third child
       (HeaderActions) now possibly between this block and the close button, this block itself must
       be the one that grows to consume the leftover space, so the slot sits snug before the close
       button rather than centred by space-between across three items. Visually identical to before
       for the existing two-child case (this block already consumed every pixel space-between left
       it), so a null slot's rendered position is unchanged; the markup is unchanged either way (AC-7).
       The title truncates before the slot (FR-2's own words): min-width: 0 here is what lets it. */
    flex: 1 1 auto;
    min-width: 0;
}

.ui-drawer-title-row[b-ouzq8fz6b4] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}

/* Item 34b (FPL-001/REQ-006 Amended (2)): the title's own flex/min-width rules below (item 34)
   sit on .ui-drawer-title itself, but since that fix the title's REAL flex-row parent is
   .ui-tooltip-region (<Tooltip>'s own wrapping span, item 34b) -- .ui-drawer-title-row's DIRECT
   flex child, not .ui-drawer-title. Tooltip.razor.css's own shared `.ui-tooltip-region { display:
   flex }` rule carries no flex-grow/shrink override of its own (every OTHER Tooltip caller needs
   its own, different sizing), so left alone the region never shrinks past its OWN content's
   natural width -- confirmed live (item 34b's own measurement rig): a title wide enough to need
   truncation stayed un-truncated (scrollWidth == clientWidth at its full un-clipped width) until
   this rule was added. Scoped here, not in Tooltip.razor.css, so no other Tooltip composition in
   the app is affected.
   `::deep`, not a plain `>` combinator: <Tooltip>'s own root span is rendered BY Tooltip.razor,
   so it carries TOOLTIP's own CSS-isolation scope attribute, never EditDrawer's -- a bare
   `.ui-drawer-title-row > .ui-tooltip-region` compiles to requiring EditDrawer's scope attribute
   on BOTH sides and so never matches anything (confirmed live: computed style still showed the
   UA-default `flex: 0 1 auto; min-width: auto`, i.e. this rule silently applying to nothing, even
   though the correct byte-for-byte CSS was confirmed served). `::deep` drops the scope requirement
   on the far side, exactly like this file's own precedent two rules below
   (`.ui-drawer-head ::deep fluent-button:hover .ui-drawer-close-ic`) for reaching into a child
   component's internals. */
.ui-drawer-title-row[b-ouzq8fz6b4]  .ui-tooltip-region {
    flex: 1 1 auto;
    min-width: 0;
}

/* Item 34 (FPL-001/REQ-006 FR-2): "the title truncates before the slot" -- once HeaderActions
   competes for the head's width, a long title must shrink and ellipsize rather than wrap or push
   the slot/close button out. flex: 1 1 auto + min-width: 0 is what lets a flex item shrink below
   its own text's natural width at all; StatusPill (this row's own sibling in .ui-drawer-title-row)
   stays flex: none by default, so it is never the one that gives way. */
.ui-drawer-title[b-ouzq8fz6b4] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.ui-drawer-subtitle[b-ouzq8fz6b4] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

/* Item 34 (FPL-001/REQ-006 FR-2): the head's optional HeaderActions box -- never grows, never wraps
   under the title, sits between the title block and the close button. Only drawn with a slot: a
   null slot renders no wrapper at all, so today's head is untouched. */
.ui-drawer-actions[b-ouzq8fz6b4] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ui-drawer-close-ic[b-ouzq8fz6b4] {
    width: var(--lh-tight);
    height: var(--lh-tight);
    color: var(--text-secondary);   /* the sheet's `.icon-btn` glyph (06-overlays.html): --text-secondary, --text on hover */
}

.ui-drawer-head[b-ouzq8fz6b4]  fluent-button:hover .ui-drawer-close-ic {
    color: var(--text);
}

.ui-drawer-body[b-ouzq8fz6b4] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-16);
}

/* The sheet's own rule: no top hairline until content actually scrolls under the sticky footer --
   this component owns the scrolling container, so it detects it (drawerScroll.js) and forwards
   IsScrolled to ActionFooter, which owns rendering its own hairline class. */
.ui-drawer-body-scrolled[b-ouzq8fz6b4] {
    /* Marker class only -- ActionFooter's own .ui-actfoot-scrolled (fed via IsScrolled) is what
       actually draws the hairline; this class exists for any body-side visual this component
       itself might need later (none today) and to make the state inspectable live/in tests. */
}

.ui-drawer-fieldset[b-ouzq8fz6b4] {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.ui-drawer-loading[b-ouzq8fz6b4] {
    color: var(--text-secondary);
    font-size: var(--fs-body);
    padding: var(--space-24) 0;
}

.ui-drawer-changed[b-ouzq8fz6b4] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    margin-bottom: var(--space-16);
    background: var(--warn-bg);
    border: var(--border-w) solid var(--warn);
    border-radius: var(--radius);
    color: var(--text);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-drawer-changed-ic[b-ouzq8fz6b4] {
    flex: none;
    width: var(--lh-tight);
    height: var(--lh-tight);
    margin-top: var(--space-2);
    color: var(--warn);
}

.ui-drawer-reload[b-ouzq8fz6b4] {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

.ui-drawer-reload:hover[b-ouzq8fz6b4] {
    color: var(--accent-hover);
}

/* Depth (Navigation): an absent/deleted id -- neutral, not a warning (a WARN treatment would imply
   an active conflict to resolve; a record that simply doesn't exist has none). Reuses .ui-drawer-
   reload's own link style for "back to list" rather than a second button class. */
.ui-drawer-notfound[b-ouzq8fz6b4] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    margin-bottom: var(--space-16);
    background: var(--fill-1);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/Ui/EmojiPicker/EmojiPicker.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 52 — EmojiPicker is a STUB (see CATALOGUE.md): it renders nothing
   of its own, only the shared Stub/NamedError markup, which owns every rule that shape needs — no
   rule needed here. File exists to satisfy FR-1's one-folder-three-files rule. */
/* frontend/Components/Ui/EmptyState/EmptyState.razor.rz.scp.css */
/* FPL-001/REQ-003, row 28 — Empty state. Ours in CSS AND markup, no supplier. */

.ui-es-wrap[b-c6mqs74eie] {
    display: flex;
    flex-direction: column;
}

.ui-es-strip[b-c6mqs74eie] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-8) var(--cell-pad-x);
    background: var(--error-bg);
    border-bottom: var(--border-w) solid var(--banner-line-error);
    color: var(--error);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-es-strip-ic[b-c6mqs74eie] {
    flex: none;
    width: var(--icon-sm);
    height: var(--icon-sm);
    margin-top: var(--space-2);
}

[b-c6mqs74eie] .ui-es-strip .ui-btn-wrap {
    margin-left: auto;
    flex: none;
}

.ui-es[b-c6mqs74eie] {
    padding: var(--empty-pad-y) var(--cell-pad-x);
}

.ui-es-in[b-c6mqs74eie] {
    max-width: var(--empty-max-w);
}

.ui-es-t[b-c6mqs74eie] {
    font-size: var(--fs-heading-md);
    line-height: var(--lh-heading-md);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.ui-es-b[b-c6mqs74eie] {
    margin: var(--space-4) 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

[b-c6mqs74eie] .ui-es .ui-btn-wrap {
    margin-top: var(--space-16);
    display: inline-block;
}

.ui-es-action-ic[b-c6mqs74eie] {
    width: var(--icon-sm);
    height: var(--icon-sm);
}
/* frontend/Components/Ui/ExplanationCard/ExplanationCard.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 35 — Explanation card (DEC-030 inset). Matches
   05-data-display.html's own `.inset` rule (lines 715-719) and 08-page-parts.html's own token pair
   (`--inset-edge-w:3px; --inset-pad:16px`, line 348) verbatim -- both tokens already declared in
   tokens.css, nothing new added here. No max-height/overflow anywhere: "long text wraps and the
   card grows; it never scrolls inside itself" (05-data-display.html §12's own caption). */

.ui-exp-card[b-v2281oc3gr] {
    display: flex;
    gap: var(--space-12);
    padding: var(--inset-pad);
    background: var(--accent-soft);
    border-left: var(--inset-edge-w) solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* Sized directly, not left to the browser's own intrinsic sizing -- this codebase has shipped a
   0x0 caller-authored <svg> twice before (TimeField's clock, DatePicker's calendar icon; see each
   one's own .md), the same class of bug an unsized icon here would repeat. */
.ui-exp-ic[b-v2281oc3gr] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: var(--accent);
    flex: none;
    margin-top: var(--space-2);
}

.ui-exp-h[b-v2281oc3gr] {
    margin: 0;
    font-size: var(--fs-heading-sm);
    line-height: var(--lh-heading-sm);
    font-weight: var(--fw-semibold);
}

.ui-exp-body[b-v2281oc3gr] {
    margin-top: var(--space-4);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.ui-exp-link-wrap[b-v2281oc3gr] {
    margin: var(--space-8) 0 0;
}

.ui-exp-link-ic[b-v2281oc3gr] {
    width: var(--icon-sm);
    height: var(--icon-sm);
}
/* frontend/Components/Ui/Fieldset/Fieldset.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 13 — Section / fieldset + legend. Native <fieldset><legend>,
   measured from the sheet's own base rule (07-page-templates.html lines 628-631, applied verbatim
   across every drawn specimen in 04-data-entry/06-overlays/07-page-templates — checked directly,
   not assumed). */

.ui-fset[b-b39as3pljm] {
    margin: 0;   /* the sheet's `*{margin:0}`: a <fieldset>'s UA margin-inline is 2px — built without the reset the fieldset sat 2px in from each side (measured live in the drawer: x 658 against the sheet's 640 + 16 body pad) */
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-16);
    min-width: 0;
}

.ui-fset-legend[b-b39as3pljm] {
    padding: 0 var(--space-4);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-semibold);
}

/* FPL-001/REQ-025 FR-15 (item 60) -- the section is never a Tab stop (tabindex="-1"), but a page or
   row 79 (PageValidationSummary) can still move real focus to it by id. Without this rule the browser's
   own default outline would show instead of the layer's one focus ring (REQ-018) the moment that
   happens -- outset, matching RepeatingRowEditor's/Filmstrip's own outset shape, since the section
   itself is the bordered box (no clipping ancestor to worry about, unlike a strip's own inset tabs). */
.ui-fset:focus-visible[b-b39as3pljm] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

/* Between-SECTIONS spacing (04-data-entry.html §13's own caption: "16 px between fields, 24 px
   between sections"). FormField's own .ui-ffld-grid/.ui-ffld-grid-2 own the 16px between-FIELDS
   gap; FormField.razor.css's own comment names the 24px between-fieldsets gap explicitly as
   "a page/row-13 concern, not owned by any single grid instance" — this row owns it, the same
   established shape: a plain CSS utility the composing page applies around several <Fieldset>
   instances, not automatic wrapping. Pure layout, no behavior of its own. */
.ui-fieldset-stack[b-b39as3pljm] {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap-y);
}
/* frontend/Components/Ui/FieldValidation/FieldValidation.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 56 — Field validation error.
   Intentionally empty: this component is a timing rule only (DEC-010 §1) and renders no markup of
   its own besides a fixed CascadingValue — the error LINE is TextInput/36's, Select/39's or
   FormField/49's own `.ui-in-bad`/`.ui-ffld-bad` chrome, styled in those components' own stylesheets.
   A CSS file with nothing to style is kept, not omitted, per FR-1's folder rule and this layer's own
   practice of naming an absence rather than silently skipping the file. */
/* frontend/Components/Ui/FileUpload/FileUpload.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 50 — File upload / drop zone, matching .drop/.drop.is-over/
   .drop-t/.up-r/.up-n verbatim (04-data-entry.html lines 621-633). --drop-h/--space-4/--space-8/
   --space-12/--space-16/--border-w/--line/--radius/--surface/--text-secondary/--text/--fs-body/
   --fs-small/--lh-body/--lh-small/--placeholder/--accent/--accent-soft/--error/--icon-sm are all
   already-declared tokens; nothing new added here. */

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app, so
   this rule's own declared min-height plus its own padding and dashed border would otherwise stack
   on top of each other under the browser's content-box default, rendering taller than --drop-h. */
.ui-fu-drop[b-qmuov61s3x] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    min-height: var(--drop-h);
    padding: var(--space-16);
    border: var(--border-w) dashed var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    text-align: center;
}

.ui-fu-drop .ui-fu-ic[b-qmuov61s3x] {
    color: var(--placeholder);
}

.ui-fu-drop-t[b-qmuov61s3x] {
    color: var(--text);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.ui-fu-drop.is-over[b-qmuov61s3x] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.ui-fu-drop.is-over .ui-fu-ic[b-qmuov61s3x],
.ui-fu-drop.is-over .ui-fu-drop-t[b-qmuov61s3x] {
    color: var(--accent);
}

.ui-fu-rows[b-qmuov61s3x] {
    margin-top: var(--space-16);
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app;
   pinned for consistency with `.ui-fu-drop` above, even though this row has no explicit height of
   its own -- protects it the moment a caller/list wrapper starts pinning row height. */
.ui-fu-row[b-qmuov61s3x] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-8) 0;
    border-bottom: var(--border-w) solid var(--line);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-fu-name[b-qmuov61s3x] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.ui-fu-row.is-bad .ui-fu-name[b-qmuov61s3x] {
    color: var(--error);
}

.ui-fu-bad[b-qmuov61s3x] {
    flex: none;
    color: var(--error);
}

.ui-fu-ic[b-qmuov61s3x] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
}

.ui-fu-ic-muted[b-qmuov61s3x] {
    color: var(--placeholder);
}

.ui-fu-ic-bad[b-qmuov61s3x] {
    color: var(--error);
}

/* AX: "each file row is named" -- Remove/Retry both read only "Remove"/"Retry" visually (matching
   the sheet's own button text exactly), but need the file name in their own accessible name so a
   screen reader user tabbing through several rows can tell them apart. */
.ui-fu-sr-only[b-qmuov61s3x] {
    position: absolute;
    width: var(--border-w);
    height: var(--border-w);
    padding: 0;
    margin: calc(var(--border-w) * -1);
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* frontend/Components/Ui/Filmstrip/Filmstrip.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 34 — Filmstrip (the evidence-strip piece), matching .film/.thumb/
   .thumb.is-selected/.thumb span/.thumb-more verbatim (05-data-display.html lines 671-680), plus
   the zero-state's own bare .empty/.empty-t/.empty-b shape (built locally, not via EmptyState — see
   this file's own .razor header comment for why). --thumb-w/--thumb-h/--thumb-sel-w/--tip-bg/
   --tip-text/--fs-caption/--lh-caption/--space-24/--cell-pad-x/--empty-max-w/--fs-heading-md/
   --fs-body/--error are all already-declared tokens; nothing new added here. */

.ui-fs-empty[b-etedfzdjwx] {
    padding: var(--space-24) var(--cell-pad-x);
}

.ui-fs-empty-t[b-etedfzdjwx] {
    font-size: var(--fs-heading-md);
    line-height: var(--lh-heading-md);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.ui-fs-empty-b[b-etedfzdjwx] {
    margin: var(--space-4) 0 0;
    max-width: var(--empty-max-w);
    color: var(--text-secondary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.ui-fs-film[b-etedfzdjwx] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    overflow-x: auto;
    padding: var(--space-12) var(--cell-pad-x);
}

.ui-fs-thumb[b-etedfzdjwx] {
    display: block;
    flex: none;
}

.ui-fs-thumb-btn[b-etedfzdjwx] {
    box-sizing: border-box;
    position: relative;
    display: block;
    width: var(--thumb-w);
    height: var(--thumb-h);
    flex: none;
    border-radius: var(--radius);
    background: var(--neutral-bg);
    border: var(--thumb-sel-w) solid transparent;
    overflow: hidden;
    padding: 0;
}

.ui-fs-thumb.is-selected .ui-fs-thumb-btn[b-etedfzdjwx] {
    border-color: var(--accent);
}

/* FPL-001/REQ-018 (item 49) FR-1(a): drew the browser's default outline — outset, the layer's default. The button's
   own `overflow: hidden` (above) clips its CONTENT, not its own outline (outline paints outside the border box,
   never clipped by the element's own overflow) — no clipping ancestor measured either. */
.ui-fs-thumb-btn:focus-visible[b-etedfzdjwx] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-fs-img[b-etedfzdjwx] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-fs-time[b-etedfzdjwx] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--tip-bg);
    color: var(--tip-text);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    text-align: center;
    white-space: nowrap;   /* one line: a document's file name is cut with an ellipsis, never wider than the 64px frame (a time is short and never reaches it) */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* W:document-strip-and-pdf-panel/T-01: a PDF tile's mark, centred above the name slot (.ui-fs-time). Tokens only. */
.ui-fs-pdf-mark[b-etedfzdjwx] {
    position: absolute;
    inset: 0 0 var(--lh-caption) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

.ui-fs-unavailable[b-etedfzdjwx] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;   /* was center -- leaves .ui-fs-time's strip at the bottom clear (FPL-001/REQ-023
        FR-5, item 58: centred text's lower line sat under the time label, which paints after it). Correct
        whether or not a time label is actually present -- an unconditional layout fix, not a per-case one. */
    justify-content: center;
    padding: var(--space-2);
    color: var(--error);
    font-size: var(--fs-caption);
    line-height: 1.1;
    text-align: center;
    max-width: 100%;
    white-space: nowrap;   /* one line, truncated -- was word-break:break-all (wrapped across lines instead) */
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-fs-more[b-etedfzdjwx] {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--thumb-w);
    height: var(--thumb-h);
    flex: none;
    border: var(--border-w) dashed var(--line);
    border-radius: var(--radius);
    color: var(--accent);
    font-size: var(--fs-small);
}

button.ui-fs-more[b-etedfzdjwx] {
    background: transparent;
    padding: 0;
    font-family: inherit;
}

button.ui-fs-more:focus-visible[b-etedfzdjwx] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}
/* frontend/Components/Ui/Filmstrip/UploadThumbnailStrip.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 34 — UploadThumbnailStrip (the upload-row piece), matching
   .thumbs/.thumb/.thumb-x verbatim (04-data-entry.html lines 634-641). .thumb.is-drag is
   deliberately NOT reproduced here -- see this file's own .razor header comment (the mouse
   drag mechanic it belongs to is not built). --thumb/--check-size/--radius-pill/--tip-bg/--tip-text/
   --fill-1/--line/--placeholder/--accent/--space-2/--space-8/--fs-caption/--error are all
   already-declared tokens; nothing new added here. */

.ui-uts[b-8tkivvj5pe] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.ui-uts-thumb[b-8tkivvj5pe] {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--thumb);
    height: var(--thumb);
    flex: none;
    background: var(--fill-1);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    color: var(--placeholder);
}

.ui-uts-thumb:focus-visible[b-8tkivvj5pe] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-uts-x[b-8tkivvj5pe] {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--check-size);
    height: var(--check-size);
    border-radius: var(--radius-pill);
    background: var(--tip-bg);
    color: var(--tip-text);
    border: none;
    opacity: 0;
}

.ui-uts-thumb:hover .ui-uts-x[b-8tkivvj5pe],
.ui-uts-thumb:focus-within .ui-uts-x[b-8tkivvj5pe] {
    opacity: 1;
}

/* FPL-001/REQ-018 (item 49) FR-1(a): drew the browser's default outline — outset, the layer's default (no clipping ancestor measured). */
.ui-uts-x:focus-visible[b-8tkivvj5pe] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-uts-ic[b-8tkivvj5pe] {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.ui-uts-ic-sm[b-8tkivvj5pe] {
    width: var(--space-8);
    height: var(--space-8);
}

/* FPL-001/REQ-023 FR-5 (item 58): the same `word-break: break-all` wrap/clip bug the evidence
   strip's own `.ui-fs-unavailable` had (see Filmstrip.razor.css's own comment for the full
   mechanism) -- a second, separately-authored rule for the identical fixed literal, missed in
   that first pass. No time label here to clear (this piece has none), so only the one-line/
   truncated/titled half of that fix applies. */
.ui-uts-unavailable[b-8tkivvj5pe] {
    color: var(--error);
    font-size: var(--fs-caption);
    line-height: 1.1;
    text-align: center;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: var(--space-2);
}

.ui-uts-live[b-8tkivvj5pe] {
    position: absolute;
    width: var(--border-w);
    height: var(--border-w);
    padding: 0;
    margin: calc(var(--border-w) * -1);
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* frontend/Components/Ui/FilterStateRow/FilterStateRow.razor.rz.scp.css */
.ui-filterstate[b-63pngtiv43] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    margin-left: auto;
}

.ui-filterstate-narrow[b-63pngtiv43] {
    width: 100%;
    margin-left: 0;
}

.ui-filterstate-count[b-63pngtiv43] {
    display: inline-block;
    width: var(--count-w);
    text-align: right;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ui-filterstate-narrow .ui-filterstate-count[b-63pngtiv43] {
    width: auto;
    text-align: left;
}

/* UI-LAYER.md §15: the layer's one breakpoint (900px) applies automatically by viewport width, on
   top of the explicit .ui-filterstate-narrow class above, which stays as a host override for a
   component sitting inside a sub-900px CONTAINER even when the viewport itself is wide. */
@media (max-width: 900px) {
    .ui-filterstate[b-63pngtiv43] {
        width: 100%;
        margin-left: 0;
    }

    .ui-filterstate .ui-filterstate-count[b-63pngtiv43] {
        width: auto;
        text-align: left;
    }
}

.ui-filterstate-count-loading[b-63pngtiv43] {
    color: var(--placeholder);
}

.ui-filterstate-spacer[b-63pngtiv43] {
    flex: 1;
}

.ui-filterstate-caption[b-63pngtiv43] {
    margin: var(--space-4) 0 0;
    text-align: right;
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
}
/* frontend/Components/Ui/FormField/FormField.razor.rz.scp.css */
/* FPL-001/REQ-003, row 49 — Form layout. Ours in CSS (see FormField.razor's header comment for why
   FluentField was rejected). No supplier custom element, so Blazor's CSS-isolation scope attribute
   attaches directly to every selector below, same as TextInput's own stylesheet. */

.ui-ffld[b-le83nnxvxb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: var(--field-w);
}

.ui-ffld-w[b-le83nnxvxb] {
    width: 100%;
}

.ui-ffld-lbl[b-le83nnxvxb] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
}

.ui-ffld-req[b-le83nnxvxb] {
    color: var(--accent);
}

.ui-ffld-opt[b-le83nnxvxb] {
    color: var(--text-secondary);
    font-weight: var(--fw-regular);
    /* FPL-001/REQ-025 FR-25 (item 60, Amended (2)): "(optional)" never splits across lines -- a
       narrow label column could otherwise break the word itself ("(optio" / "nal)") at a line-wrap
       boundary; the real space that now precedes this span (FormField.razor's own <text> </text>,
       not this rule) is left free to wrap normally, only the marker's own three characters/word stay
       together. */
    white-space: nowrap;
}

.ui-ffld-hint[b-le83nnxvxb] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-ffld-bad[b-le83nnxvxb] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    color: var(--error);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-ffld-bad-ic[b-le83nnxvxb] {
    flex: none;
    width: var(--lh-tight);
    height: var(--lh-tight);
    margin-top: var(--space-2);
}

/* Read-only mirror: a <span>, not the editable control — no border, no fill, rendered as plain
   text under the label. Height matches the editable control (--control-h) so a page mixing
   editable and read-only fields keeps identical vertical rhythm (TextInput's own .ui-in-ro rule,
   reused here since the mirror is this component's own job for any wrapped control type). */
.ui-ffld-ro[b-le83nnxvxb] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--control-h);
    color: var(--text);
    font-size: var(--fs-body);
}

.ui-ffld-ro-ic[b-le83nnxvxb] {
    display: flex;
    color: var(--text-secondary);
}

/* A generic input-like child gets this class from the caller for the standard field surface —
   FormField itself renders no input; this is offered so ChildContent doesn't have to duplicate
   TextInput's six shared control rules (04-data-entry.html §13's "cap" note) by hand.

   `::deep` -- a real bug found live, whole-branch pass, box-sizing sweep: without it, this rule
   NEVER MATCHED ANYTHING. `ChildContent` is rendered as the CALLER's own markup, carrying the
   CALLER's own CSS-isolation scope attribute, not FormField's -- confirmed live (the rendered
   `<input class="ui-ffld-in">` in the gallery carries zero scope attributes at all) and by measuring
   its computed height at 21px (the browser's own intrinsic input sizing) against the declared 32px
   (`--control-h`). This is the SAME cross-scope-boundary shape `.ui-ffld-grid`/`.ui-ffld-grid-2`
   below already handle correctly with `::deep` -- this one set of rules was the one exception,
   silently defeating this component's own stated reason for existing (every consumer has been
   getting the browser's own default input chrome, not this component's declared field surface, for
   every row that composes it). Box-sizing (a second, smaller finding on the same rule): also added
   below, since this rule already declares both a fixed height and a border. */
[b-le83nnxvxb] .ui-ffld-in {
    box-sizing: border-box;
    width: 100%;
    height: var(--control-h);
    padding: 0 var(--input-pad-x);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--fs-body);
    color: var(--text);
}

[b-le83nnxvxb] .ui-ffld-in:hover:not(:disabled) {
    border-color: var(--line-hover);
}

[b-le83nnxvxb] .ui-ffld-in:focus-visible {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

/* The form grid (04-data-entry.html §13): 16 px between fields, matching the 2-up column gap;
   24 px between separate grids (i.e. between sections/fieldsets — a page/row-13 concern, not
   owned by any single grid instance). Plain CSS utilities, not a second component -- pure layout,
   no behavior of its own. Deep-scoped so a page can apply them directly around FormField instances
   without those instances needing to know they're inside a grid. */
[b-le83nnxvxb] .ui-ffld-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

[b-le83nnxvxb] .ui-ffld-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
}

/* Named limitation (see FormField.razor's header comment): keyed to the sitewide viewport
   breakpoint (900 px, Toolbar/M2/M3's own), not a container query on the drawer's real width. */
@media (max-width: 900px) {
    [b-le83nnxvxb] .ui-ffld-grid-2 {
        grid-template-columns: 1fr;
    }
}
/* frontend/Components/Ui/Gallery/Families/Family5.razor.rz.scp.css */
/* Gallery family 5 — the page-side drawing of row 30's CONTENT-mode specimen (sheet 05 §2a). A page draws what goes INSIDE a content cell on the tokens (DEC-021 addendum 2): the typed badge (an
   abbreviation + a colour swatch on a `--series-n` token), the ✓ mark, the word *open*, and the "+N" summary — never a catalogue component, so none of this lives in HeatGrid. Tokens only. */

.gal-cx[b-nj1sjzxe0f] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    vertical-align: middle;
}

.gal-cx-ok[b-nj1sjzxe0f] {
    display: inline-flex;
    color: var(--ok);
    vertical-align: middle;
}

.gal-cx-open[b-nj1sjzxe0f] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    font-style: italic;
}

/* The page's badge: colour is a swatch, the words stay --text on --surface (contrast is the text's, never the swatch's). */
.gal-hbadge[b-nj1sjzxe0f] {
    box-sizing: border-box;   /* the sheet's `*{box-sizing:border-box}`: 16 px high INCLUDES the hairline (content-box measured 18) */
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--badge);
    padding: 0 var(--space-4);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--space-2);
    color: var(--text);
    font-size: var(--fs-caption);
    line-height: var(--lh-tight);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gal-hbadge-sw[b-nj1sjzxe0f] {
    flex: none;
    width: var(--dot);
    height: var(--dot);
    border-radius: var(--space-2);
}

.gal-hbadge-more[b-nj1sjzxe0f] {
    background: var(--fill-1);
    color: var(--text-secondary);
}

.gal-s1[b-nj1sjzxe0f] { background: var(--series-1); }
.gal-s2[b-nj1sjzxe0f] { background: var(--series-2); }
.gal-s3[b-nj1sjzxe0f] { background: var(--series-3); }
.gal-s4[b-nj1sjzxe0f] { background: var(--series-4); }
.gal-s5[b-nj1sjzxe0f] { background: var(--series-5); }

/* FPL-001/REQ-050 — row 66's value-label specimens at the component's own, smallest pitch: six columns of --bar-w and five --bar-gap gaps make the plot 228 px wide (pitch 40, fit width 36), and the chart adds 12 px of padding
   each side. A wider chart only spreads the columns (the plot is space-between), so every label then fits more easily. */
.gal-vbar-pitch40[b-nj1sjzxe0f] {
    width: calc(var(--bar-w) * 6 + var(--bar-gap) * 5 + var(--space-12) * 2);
}
/* frontend/Components/Ui/Gallery/Row47/InlineEditSalaryExample.razor.rz.scp.css */
/* the page's own layout for its two fields: side by side in the value column (sheet 04 §9b Part 4 i, .ie-pair) */
.ui-ies-pair[b-0edyos6xax] {
    display: flex;
    gap: var(--space-8);
}

.ui-ies-amount[b-0edyos6xax],
.ui-ies-period[b-0edyos6xax] {
    flex: 1 1 0;
    min-width: 0;
}
/* frontend/Components/Ui/Gallery/Row47/InlineEditWorkingDaysExample.razor.rz.scp.css */
/* the page's own layout: the checkbox group laid inline, wrapping inside the value column (sheet 04 §9b Part 4 ii, .ck-inline); the read view's tags in a row */
.ui-iew-group[b-rri2jvsuqt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-24);
    padding: var(--space-4) 0;
}

.ui-iew-tags[b-rri2jvsuqt] {
    margin: -1px 0;   /* the tags are 22 px tall: the row stays 40 px (AC-100) */
    display: flex;
    align-items: center;
    gap: var(--space-4);
    overflow: hidden;
}
/* frontend/Components/Ui/Grid/Grid.razor.rz.scp.css */
/* FPL-001/REQ-003, row 19 — Table / grid. Scoped via .ui-grid-wrap (a plain <span> Grid.razor wraps
   its <FluentDataGrid> in — the Button/B1 lesson: a bare supplier component with no plain HTML
   ancestor gets none of its overrides applied). A SECOND wrong assumption, found here: unlike
   FluentButton/FluentTooltip (real custom elements), FluentDataGrid<T> renders as a PLAIN
   `<table class="fluent-data-grid ...">` — no `<fluent-data-grid>` tag exists at all. An initial
   `::deep fluent-data-grid.ui-grid` selector matched nothing (silently, same failure shape as the
   Button bug); the fix is `table.ui-grid`. `::deep` is still needed for Blazor's cross-component
   CSS-isolation scoping, even though there's no shadow root to pierce. */

.ui-grid-wrap[b-k6bo3wiale] {
    display: contents;
}

/* LEAK (measured at the render spike, efca58a7d, and here): FluentDataGrid sets row/header height
   via an INLINE style from a closed enum (24/32/44/58 body; 40 min-height header) -- neither the
   sheet's 40 (body) nor 36 (header) exists in that enum, so !important is structurally required to
   beat an inline style; both rules are scoped to THIS component only (FR-6), never a page-id
   selector like the spike's #grid, which breaks the moment a second instance exists on the page --
   Blazor's own scope attribute is baked in per component TYPE and safely covers every instance. */
/* --ui-in-cell-inset (2026-09-19, planner ruling from row 36/TextInput's disclosed gap): a plain,
   NOT a design token -- deliberately not in tokens.css/the 315-token manifest, so
   TOKEN_REDEFINED_OUTSIDE_LAYER never applies to it. It exists only to tell a descendant
   TextInput's `.ui-in-cell` mode which container padding to cancel out (see TextInput.razor.css) --
   scoped to Grid's own cells only, via ordinary CSS inheritance, never touching the shared token
   file. Any other future container wanting the same trick sets this same property on its own cells;
   TextInput never needs to know which container it's in. */
/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app, so
   this cell's own forced `height` plus its own `border-bottom` would otherwise stack under the
   browser's content-box default, rendering the row taller than --row-h; the !important on height
   above only wins the FluentDataGrid inline-style fight (see the LEAK note), it does not by itself
   change the box model. */
[b-k6bo3wiale] table.ui-grid td {
    box-sizing: border-box;
    height: var(--row-h) !important;
    padding: 0 var(--cell-pad-x) !important;
    border-bottom: var(--border-w) solid var(--line);
    --ui-in-cell-inset: var(--cell-pad-x);
}

/* THE TABLE IS THE SHEET'S CARD (found by the owner's live check of item 33, 2026-09-24): every sheet table sits on a white --surface box with a 1px --line hairline and a 4px radius (05 §1's `.spec`,
   07 P5's `.card`, both measured: bg #fff, border 1px #e4e7eb, radius 4px, overflow visible). The Grid drew the bare table on the page ground — no surface, no hairline — so the row-hover fill (--fill-1,
   #f5f7fa) landed on --page (#f7f8fa) and was invisible, and the header took Fluent's own #f0f0f0. The card is drawn here, on the table (it is `display: grid`, so a border and radius apply);
   `overflow` stays visible — a row's ⋯ popup must not be clipped — so the header's two top corners take the radius themselves. The last row drops its hairline (the card's border is the edge, as the sheet's
   `tbody tr:last-child td { border-bottom: 0 }`). The header fill is the sheet's --fill-1. */
[b-k6bo3wiale] table.ui-grid {
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

[b-k6bo3wiale] table.ui-grid thead th {
    background: var(--fill-1);
}

[b-k6bo3wiale] table.ui-grid thead th:first-child {
    border-top-left-radius: var(--radius);
}

[b-k6bo3wiale] table.ui-grid thead th:last-child {
    border-top-right-radius: var(--radius);
}

[b-k6bo3wiale] table.ui-grid tbody tr:last-child td {
    border-bottom: 0;
}

/* THE FOCUS RING IS ON THE ROW (05-data-display.html, "Keyboard focus on a row": `tr.is-focused { outline: var(--focus-w) solid var(--accent); outline-offset: var(--focus-offset) }` — "the focus is the
   ROW, not the cell", measured on the sheet: tr 414 x 40, outline 2px rgb(115,56,186), offset 2px, the ring OUTSIDE the row). The cell is still the tab stop (a row's ↑ ↓ Home/End, the focus-return target) — the
   supplier renders `tr` as `display: contents`, which has NO box, so an outline on it draws nothing (measured live: tr 0 x 0). A row is made a SUBGRID of the table's own grid (same columns, one row, spanning
   all of them): the cell boxes do not move (measured: the five columns' x / width identical before and after) and the `tr` gets a real 1214 x 40 box to carry the sheet's ring. The cell's own outline is cleared —
   one ring, on the row, never two. (First built as the cell ring, inset: the owner's reviewer read it as "the ring is not the sheet's".) */
[b-k6bo3wiale] table.ui-grid tbody tr.fluent-data-grid-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
}

[b-k6bo3wiale] table.ui-grid td:focus-visible {
    outline: none;
}

[b-k6bo3wiale] table.ui-grid tbody tr:has(> td:focus-visible) {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

/* --ui-grid-sticky-top (2026-09-19, found via the retroactive gallery-verification pass on this
   row): the supplier's own sticky header defaults to `top: 0`, which is correct for a Grid with
   nothing else fixed above it -- but measured live on the real Gallery page, the header stuck
   BEHIND the app's own fixed top bar (z-index 1300 vs. the header's 2), rendering it completely
   invisible once scrolled past (confirmed via screenshot, not assumed from computed styles alone).
   Same scoped-non-token-property shape as `--ui-in-cell-inset` above: default 0 here so a Grid with
   no fixed chrome above it is unaffected; a host page that DOES have one (every page in this app
   currently does, via the pre-REQ-004 MudBlazor shell) sets this locally -- see Gallery.razor's own
   `<style>` block for the current value and why it's a literal px, not a token. */
/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- same shape as `td` above: this
   header cell's own forced height/min-height plus its own border-bottom would otherwise stack
   under the browser's content-box default, rendering it taller than --row-head-h. */
[b-k6bo3wiale] table.ui-grid th {
    box-sizing: border-box;
    height: var(--row-head-h) !important;
    min-height: var(--row-head-h) !important;
    padding: 0 var(--cell-pad-x) !important;
    border-bottom: var(--border-w) solid var(--line);
    top: var(--ui-grid-sticky-top, 0px);
}

/* Item 33 (found by the first real page, live, 2026-09-24): the sheet's table text (05-data-display.html:389-402) — `td` is
   --fs-body/--text, `th` is --fs-small/--fw-medium/--text-secondary and sits at the cell's own left edge, so a header label lines up
   with the text under it. The built Grid set the heights and paddings but left the type to inherit the app's 16px black: measured, a
   plain header ("Identities") and every cell read 16px black beside the sortable headers' 14px/600 grey, and the sortable label sat
   19px right of the cell text (wrapper 6px + the subtle button's own 12px). One rule set for both header kinds; the sorted column
   goes to --text (th.sorted). */
[b-k6bo3wiale] table.ui-grid td {
    font-size: var(--fs-body);
    color: var(--text);
    white-space: nowrap;
}

[b-k6bo3wiale] table.ui-grid th > div {
    padding: 0 !important;
    /* Fluent sizes this wrapper to its content: a sortable header's 32px button filled the 36px header, a plain header's 14px label did not and
       sat at the TOP of it (measured live: "Identities" 10px above its neighbours). The wrapper is the header's own height and centres what is in it. */
    min-height: var(--row-head-h);
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid th [col-sort-button] {
    padding: 0 !important;
    min-width: 0;
}

/* A plain (non-sortable) header wraps its label in `div[col-title]` with a padding of its own — measured 12px, on top of the th's —
   and a different baseline from the sort button's; centre it and drop the padding. */
[b-k6bo3wiale] table.ui-grid th [col-title] {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 !important;
}

[b-k6bo3wiale] table.ui-grid th [col-title-text],
[b-k6bo3wiale] table.ui-grid th [col-sort-button] {
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    white-space: nowrap;
}

[b-k6bo3wiale] table.ui-grid th[aria-sort="ascending"] [col-title-text],
[b-k6bo3wiale] table.ui-grid th[aria-sort="descending"] [col-title-text],
[b-k6bo3wiale] table.ui-grid th[aria-sort="ascending"] [col-sort-button],
[b-k6bo3wiale] table.ui-grid th[aria-sort="descending"] [col-sort-button] {
    color: var(--text);
}

[b-k6bo3wiale] table.ui-grid-dense td {
    height: var(--row-h-dense) !important;
}

/* Hover — the sheet's fill, never a zebra stripe (no nth-child rule exists here on purpose). */
[b-k6bo3wiale] table.ui-grid tbody tr:hover td {
    background: var(--fill-1);
}

/* Row-error line and selected-row 3px edge -- caller-applied via the RowClass parameter. */
[b-k6bo3wiale] table.ui-grid tr.ui-grid-row-error td {
    background: var(--error-bg);
}

[b-k6bo3wiale] table.ui-grid tr.ui-grid-row-error td:first-child {
    box-shadow: inset var(--sel-edge-w) 0 0 var(--error);
}

/* Found live, remainder item 17b (opcenterplan-90's own read-back correction — the row this rule
   belongs to is row 19/Grid itself, not row 20/List, an earlier mislabeling now fixed everywhere it
   landed): the sheet's own selected-row rule (`05-data-display.html:405`, `08-page-parts.html:641`)
   is `tr.is-selected td{background:var(--accent-soft)}` PLUS the edge below on the first cell only —
   this file had only the edge, never the background tint. Row 35/ExplanationCard's own build found
   this while confirming "the same tint as a selected row" against the sheet's own bytes for its own
   reference point, not by testing this component directly. */
[b-k6bo3wiale] table.ui-grid tr.ui-grid-row-selected td {
    background: var(--accent-soft);
}

[b-k6bo3wiale] table.ui-grid tr.ui-grid-row-selected td:first-child {
    box-shadow: inset var(--sel-edge-w) 0 0 var(--accent);
}

/* Item 55 (FPL-001/REQ-021 AC-12/13/14, planner ruling): a later reload's own dim window, while
   rows already on screen stay visible during the latest request. Item 33's own live-measured
   finding applies again here -- Fluent's own <tr> is `display: contents`, so `opacity` on it does
   nothing at all; it goes on the CONTENT (the td's own children), never the row or the cell
   itself, so a sticky edge cell's own required opaque fill (section 1's own wall rule) is
   untouched. */
[b-k6bo3wiale] table.ui-grid tr.ui-grid-row-loading td > * {
    opacity: var(--busy-opacity);
}

/* DEC-004, applied to the Grid's own sort header: the spinner sits before the label, inline,
   never floating beside or over the control. */
[b-k6bo3wiale] table.ui-grid th .ui-grid-header-spinner {
    margin-right: var(--space-4);
    vertical-align: middle;
}

/* AC-12 (item 55): FluentDataGrid stays mounted (still issues its own request) but hidden while
   the skeleton shows -- CSS only, so the steady-state markup GridFlatModeGoldenTests pins (always
   with the skeleton inactive) is untouched. */
[b-k6bo3wiale] .ui-grid-skel-active table.ui-grid {
    display: none;
}

/* AC-12 (item 55): first load of a whole section only (03-feedback.html §1c, quoted exactly) --
   the real header row, the real 40px row height, the real column rhythm. Literal markup in
   Grid.razor itself, not inside a supplier shadow root -- no `::deep` needed, matching the
   narrow-collapse rule immediately below in this same file. */
.ui-grid-skel-head[b-k6bo3wiale] {
    height: var(--row-head-h);
    background: var(--fill-1);
    border-bottom: var(--border-w) solid var(--line);
}

.ui-grid-skel-row[b-k6bo3wiale] {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    height: var(--row-h);
    padding: 0 var(--cell-pad-x);
    border-bottom: var(--border-w) solid var(--line);
}

.ui-grid-skel[b-k6bo3wiale] {
    display: block;
    background: var(--skel-bg);
    border-radius: var(--skel-radius);
    height: var(--skel-h);
    background-image: linear-gradient(90deg, var(--skel-bg), var(--skel-sheen), var(--skel-bg));
    background-size: var(--skel-sweep) 100%;
    background-repeat: repeat-x;
    animation: ui-grid-skel-sheen-b-k6bo3wiale var(--skel-dur) linear infinite;
}

@keyframes ui-grid-skel-sheen-b-k6bo3wiale {
    to { background-position: var(--skel-sweep) 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-grid-skel[b-k6bo3wiale] { animation: none; background-image: none; }
}

/* Narrow-collapse (2026-09-19, row 19's own card list — see Grid.razor's header comment for why
   `Narrow` is a host-set bool, never a `@media` query). Literal markup written directly in
   Grid.razor, not inside a supplier shadow root, so plain scoped selectors apply -- no `::deep`
   needed here, unlike every other rule in this file. */
/* Grid's own outer wrapper is `display: contents` (needed for FluentDataGrid's own CSS-isolation
   overrides, see the top of this file) -- which flattens narrow mode's own children into whatever
   layout the HOST places Grid in (measured live: a flex host row laid the Toolbar and card list out
   side by side instead of stacked). This shell forces them to stay one block, always stacked,
   regardless of the host's own layout. */
.ui-grid-narrow-shell[b-k6bo3wiale] {
    display: block;
    width: 100%;
}

.ui-grid-narrow[b-k6bo3wiale] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ui-grid-card[b-k6bo3wiale] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--cell-pad-x);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
}

/* FPL-001/REQ-019 FR-4 (item 54): Dense's own narrow-mode counterpart -- the wide table's
   `ui-grid-dense` tightens row height (--row-h-dense); a card has no row height to tighten, so
   Dense tightens the card's own padding/internal gap and the list's own gap between cards instead,
   same direction, same tokens this file already uses elsewhere. */
.ui-grid-narrow.ui-grid-narrow-dense[b-k6bo3wiale] {
    gap: var(--space-4);
}

.ui-grid-narrow-dense .ui-grid-card[b-k6bo3wiale] {
    padding: var(--space-8);
    gap: var(--space-2);
}

.ui-grid-card-title[b-k6bo3wiale] {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.ui-grid-card-subtitle[b-k6bo3wiale] {
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.ui-grid-card-meta[b-k6bo3wiale] {
    display: flex;
    gap: var(--space-4);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-grid-card-meta-k[b-k6bo3wiale] {
    color: var(--text-secondary);
}

.ui-grid-card-meta-v[b-k6bo3wiale] {
    color: var(--text);
}

.ui-grid-narrow-sort-label[b-k6bo3wiale] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

/* ===== Item 45 (FPL-001/REQ-007) — tree rows, the footer, sticky edges, the detail row (sheet 05-data-display.html, sections 1c and 1d) =====
   SCOPE. Every rule below that names a row or a cell reaches only THIS Grid's own table: `table.x > tbody > tr > td` (child combinators), never a descendant `td` — a host may put a table, or a whole Grid, in a
   cell or in a detail row (the "child table" use), and a descendant selector would re-pad, re-height and stick the nested table's cells too (review finding). The supplier's toggle rules are attribute selectors
   (`[row-expand-button]`), present only where the supplier draws a toggle; a nested Grid's own toggles are meant to look the same. Everything is keyed on a class the Grid puts on ITS table (`ui-grid-tree`,
   `ui-grid-with-detail`, `ui-grid-sticky-first` / `-last`, `ui-grid-in-scroller`), the row classes it stamps (`ui-grid-depth-N`, `ui-grid-tree-open`, `ui-grid-footer`, `ui-grid-detail-open`) or the supplier's own
   attributes, so a flat Grid's applied styles do not move (FR-4). */

/* ---- tree rows ---- */

/* The tree lives in the host's FIRST column only, drawn by the supplier's own row-details toggle (`[row-toggle-container]`, present only when the Grid sets `RowDetails` — a tree, or a detail row): a button for a row
   with children, an empty same-width spacer for a leaf. The first cell is the sheet's `.tw`: a flex row, `gap: var(--space-8)` (8 px), the caret then the content, centred on the row. */
[b-k6bo3wiale] table.ui-grid-tree > tbody > tr > td:first-child {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}

/* Depth N indents the first cell's content N steps of --tree-indent beyond the cell's own 12 px (the sheet's `.tw.dpN`, section 1c). Five levels means depth 0 to 4: there is no fifth rule, a sixth level is
   GRID_TREE_DEPTH_EXCEEDED. !important because the base cell rule above sets the padding with it. */
[b-k6bo3wiale] table.ui-grid-tree > tbody > tr.ui-grid-depth-1 > td:first-child {
    padding-left: calc(var(--cell-pad-x) + var(--tree-indent)) !important;
}

[b-k6bo3wiale] table.ui-grid-tree > tbody > tr.ui-grid-depth-2 > td:first-child {
    padding-left: calc(var(--cell-pad-x) + var(--tree-indent) * 2) !important;
}

[b-k6bo3wiale] table.ui-grid-tree > tbody > tr.ui-grid-depth-3 > td:first-child {
    padding-left: calc(var(--cell-pad-x) + var(--tree-indent) * 3) !important;
}

[b-k6bo3wiale] table.ui-grid-tree > tbody > tr.ui-grid-depth-4 > td:first-child {
    padding-left: calc(var(--cell-pad-x) + var(--tree-indent) * 4) !important;
}

/* The caret is the sheet's (section 7 / 1c): a FILLED 4 x 7 triangle in a 16 px box (`#i-caret-right`: viewBox 16, path `M6.5 4.5v7L10.5 8z`) in --text-secondary, a quarter turn when open
   (`.rot`). The supplier draws an OUTLINE chevron in its own svg, 12 px wide and dark — measured, not the sheet's glyph, and the sheet's bytes win (DEC-011) — so its svg is hidden and the
   triangle is drawn on the button by CSS from the sheet's own three points (as percentages of the 16 x 16 box). */
[b-k6bo3wiale] table.ui-grid [row-toggle-container] {
    display: inline-flex;
    flex: none;
    align-items: center;
    width: var(--icon-sm);
    height: var(--icon-sm);
    /* the supplier sets `position: relative; left: -6px`, pulling the caret 6 px out of the cell padding the sheet's caret sits inside */
    position: static;
    left: 0;
}

[b-k6bo3wiale] table.ui-grid [row-expander] {
    display: flex;
    width: var(--icon-sm);
    height: var(--icon-sm);
    /* the supplier also sets `position: relative; top: -1px` here — measured live: the caret sat 1 px above the sheet's centre (10.5 against 11.5 from the cell's top) */
    position: static;
    top: 0;
}

/* min-height because the supplier's own small button carries `min-height: 20px`, which beats a plain height. Hover draws no fill (the sheet draws none); the focus ring is the layer's own, as
   IconButton's — the shadow root exposes no part for the supplier's ring, so the host element takes it with !important. */
[b-k6bo3wiale] table.ui-grid [row-expand-button] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    min-width: 0;
    min-height: 0;
    padding: 0;
    color: var(--text-secondary);
    background: none !important;
    border-color: transparent !important;
    border-radius: var(--radius);
}

[b-k6bo3wiale] table.ui-grid [row-expand-button]:focus-visible {
    box-shadow: none !important;
    outline: var(--focus-w) solid var(--accent) !important;
    outline-offset: var(--focus-offset) !important;
}

[b-k6bo3wiale] table.ui-grid [row-expand-button] svg {
    display: none;
}

[b-k6bo3wiale] table.ui-grid [row-expand-button]::after {
    content: "";
    flex: none;
    width: var(--icon-sm);
    height: var(--icon-sm);
    background: currentColor;
    clip-path: polygon(40.625% 28.125%, 40.625% 71.875%, 65.625% 50%);
}

[b-k6bo3wiale] table.ui-grid > tbody > tr.ui-grid-tree-open > td:first-child [row-expand-button]::after {
    transform: rotate(90deg);
}

/* An expanded tree row makes the supplier draw an empty detail row under it (its details template renders nothing); a tree has no detail row, so it is not shown. The selector is as specific as the
   body-row subgrid rule above (`tbody tr.fluent-data-grid-row`, which also matches this row) — found live: with less, the row stayed a 25 px blank band under every expanded row. */
[b-k6bo3wiale] table.ui-grid-tree > tbody > tr.fluent-data-grid-row[row-state="detail-content"] {
    display: none;
}

/* ---- the scrolling wrap (sheet: `.tgw`) ----
   With a tree, a footer or a sticky edge THE WRAP is the scroller (`overflow: auto; max-height: var(--grid-scroll-h)` — never the page), so it takes the card the table drew itself in flat mode: the surface, the
   hairline and the radius move from the table to the wrap. They must — a sticky cell sticks to the wrap's padding edge, and with the border on the table every stuck header / column would sit 1 px off where it rests.
   The height is the token by default and a host may tune it with `--ui-grid-scroll-h` (a plain custom property, the shape of `--ui-grid-sticky-top` — not a token, so no token is redefined outside the layer).
   The page's app-bar offset for the sticky header does not apply inside a scroller: its top is the wrap's. The table carries `ui-grid-in-scroller` for the rules that follow (a nested Grid's table does not). */
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale] {
    display: block;
    overflow: auto;
    max-height: var(--ui-grid-scroll-h, var(--grid-scroll-h));
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    --ui-grid-sticky-top: 0px;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-in-scroller {
    border: 0;
    border-radius: 0;
}

/* The header stays above the stuck body cells while the wrap scrolls down (the sheet's `thead th { z-index: 3 }`). */
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-in-scroller > thead > tr > th {
    z-index: 3;
}

/* ---- the footer totals row (sheet: `tfoot`) ----
   A body row that sticks to the wrap's bottom (`position: sticky; bottom: 0; z-index: 3`), header-height (`--row-head-h`, not a body row's 40), on --fill-1, semibold, a hairline on top. !important on the height: the
   body-row rule forces --row-h with it. It is inert — no hover change (its fill is already --fill-1), and the Grid gives it no key class and no host row class, so it can neither activate nor select. */
[b-k6bo3wiale] table.ui-grid > tbody > tr.ui-grid-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
}

[b-k6bo3wiale] table.ui-grid > tbody > tr.ui-grid-footer > td {
    height: var(--row-head-h) !important;
    background: var(--fill-1);
    font-weight: var(--fw-semibold);
    border-top: var(--border-w) solid var(--line);
}

/* The footer's label sits at its cell's own left edge (the sheet's `tfoot .nm`), so the toggle spacer the supplier draws for a row that has no details is not drawn there. */
[b-k6bo3wiale] table.ui-grid > tbody > tr.ui-grid-footer [row-toggle-container] {
    display: none;
}

/* ---- sticky edge columns (sheet: `.tgrid .nm`, `.tgrid .tot`) ----
   The Grid cannot tag the host's columns (they are opaque supplier markup), so the TABLE carries `ui-grid-sticky-first` / `-last` and the first / last cell of every row — header, body, footer — is the one that
   sticks (measured live in the spike: it works on the supplier's grid cells and inside the row subgrids). The table is `width: max-content; min-width: 100%` (the wrap scrolls when it is wider): a width for the
   TABLE, never for a column (FR-9). */
[b-k6bo3wiale] table.ui-grid-sticky-first,
[b-k6bo3wiale] table.ui-grid-sticky-last {
    width: max-content;
    min-width: 100%;
}

/* A stuck cell is OPAQUE. Its fill is `--ui-grid-cell-bg` — the fill its row gives every cell, mirrored below as a custom property on the row (a plain property, not a token) — and the surface when the row has none.
   Reading the row's own fill, instead of painting the surface and racing the row-state rules (hover, selected, error, an open detail), is what keeps it right whatever those rules' specificity is: the two can never
   disagree, because both are the row's colour. Every fill is an opaque hex (pinned), so scrolled content never shows through. */
[b-k6bo3wiale] table.ui-grid-sticky-first > thead > tr > :first-child,
[b-k6bo3wiale] table.ui-grid-sticky-first > tbody > tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

[b-k6bo3wiale] table.ui-grid-sticky-last > thead > tr > :last-child,
[b-k6bo3wiale] table.ui-grid-sticky-last > tbody > tr > :last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

/* The row fills, mirrored. Order matters only among these (equal specificity, later wins) and follows the rules above: error, selected, then hover, then an open detail. */
[b-k6bo3wiale] table.ui-grid > tbody > tr.ui-grid-row-error {
    --ui-grid-cell-bg: var(--error-bg);
}

[b-k6bo3wiale] table.ui-grid > tbody > tr.ui-grid-row-selected {
    --ui-grid-cell-bg: var(--accent-soft);
}

[b-k6bo3wiale] table.ui-grid > tbody > tr:hover {
    --ui-grid-cell-bg: var(--fill-1);
}

[b-k6bo3wiale] table.ui-grid > tbody > tr.ui-grid-detail-open {
    --ui-grid-cell-bg: var(--accent-soft);
}

[b-k6bo3wiale] table.ui-grid > tbody > tr.ui-grid-footer {
    --ui-grid-cell-bg: var(--fill-1);
}

/* A stuck header or footer corner is above the body cells (`z-index: 4`) and keeps --fill-1. */
[b-k6bo3wiale] table.ui-grid-sticky-first > thead > tr > th:first-child,
[b-k6bo3wiale] table.ui-grid-sticky-last > thead > tr > th:last-child {
    z-index: 4;
    background: var(--fill-1);
}

[b-k6bo3wiale] table.ui-grid-sticky-first > tbody > tr.ui-grid-footer > :first-child,
[b-k6bo3wiale] table.ui-grid-sticky-last > tbody > tr.ui-grid-footer > :last-child {
    z-index: 4;
    background: var(--fill-1);
}

/* The hairline edge: a border (section 2's treatment — the sheet reserves elevation for overlays, so never a shadow) on the side where content is HIDDEN, and only then: the first column's right side once the wrap
   has scrolled away from its start, the last column's left side while more lies past its right edge — the sheet's `.tot { border-left }` at rest. The bridge keeps `data-edge-first` / `data-edge-last` on the
   wrap current (a table that fits shows neither). */
.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-sticky-first > thead > tr > :first-child,
.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-sticky-first > tbody > tr:not([row-state="detail-content"]) > :first-child {
    border-right: var(--border-w) solid var(--line);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-last][b-k6bo3wiale]  table.ui-grid-sticky-last > thead > tr > :last-child,
.ui-grid-wrap.ui-grid-scroll[data-edge-last][b-k6bo3wiale]  table.ui-grid-sticky-last > tbody > tr:not([row-state="detail-content"]) > :last-child {
    border-left: var(--border-w) solid var(--line);
}

/* ---- the expandable detail row (sheet: `.dgrid`, `tr.ui-grid-detail td`) ----
   With `Detail` set the table carries `ui-grid-with-detail` and the Grid adds ONE column — the toggle cell, `ui-grid-chevron`, its width declared in the column itself (`var(--grid-toggle-w)`, the one width the Grid
   owns; every other stays the host's). The supplier draws its row-details toggle inside that cell — the same 16 px triangle as the tree's above — and an open row's detail as its own row: ONE spanning cell
   (`grid-column: 1 / N`, inline) under the data row, which item 33's subgrid rule above already lays out. The sheet's `.ui-grid-detail` class is on the content wrapper the Grid renders inside that cell (the supplier's
   `tr` takes no attributes; the row is addressed by its `row-state="detail-content"`). */

/* The toggle cell: no padding, the 16 px chevron centred in the 32 (8 + 16 + 8). !important because the base cell rule sets the padding with it. */
[b-k6bo3wiale] table.ui-grid-with-detail > thead > tr > th.ui-grid-chevron {
    padding: 0 !important;
}

[b-k6bo3wiale] table.ui-grid-with-detail > tbody > tr > td.ui-grid-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

/* The detail cell: as tall as its content (the one place content sets a row's height; a body row's is forced with !important, so this is too), the surface and, on the left, the toggle cell plus
   the cell padding — so the content starts under the first column's text. The hairline below is the base cell rule's; the one above is the data row's own. It is ONE spanning cell — the first AND last child of its row,
   so the sticky rules above reach it: this puts it back to static. It scrolls with the wrap. `> td`, so a table or a Grid the host puts INSIDE the detail keeps its own cells.
   The 12 / 16 / 12 / toggle-w+cell-pad-x padding moved OFF this cell and onto `.ui-grid-detail` itself (FPL-001/REQ-026 FR-9, item 61): this cell can now ALSO hold an always-open seam
   (`.ui-seam.ui-seam-row`, via NamedError's own Inline shape, already fully self-padded per the sheet's own `.seam-row` — see below), which needs ZERO extra padding of its own and a DIFFERENT
   (unindented, flush) shape than Detail's own indented one — a fixed padding on the shared cell could only ever be right for one of the two. Each content type now supplies its own complete spacing. */
[b-k6bo3wiale] table.ui-grid > tbody > tr[row-state="detail-content"] > td {
    position: static;
    z-index: auto;
    height: auto !important;
    white-space: normal;
    background: var(--surface);
    padding: 0 !important;
}

/* Detail's own full padding, relocated here from the shared cell above (same four values, unchanged) — so a seam sharing that cell (no wrapper of its own) is never forced into Detail's own indent. */
[b-k6bo3wiale] .ui-grid-detail {
    padding: var(--space-12) var(--space-16) var(--space-12) calc(var(--grid-toggle-w) + var(--cell-pad-x));
}

/* The seam row (FPL-001/REQ-026 FR-9, item 61): flush, not indented under the toggle cell — matching
   the sheet's own `tr.rowerr > td[colspan] > .seam.seam-row` (no toggle exists for it to align past).
   NamedError's own `.ui-seam.ui-seam-row` (via `Inline`) already supplies its own COMPLETE padding
   (`NamedError.razor.css`'s own `.ui-seam-row` rule) — this wrapper's ONLY job is carrying the `id`
   gridRows.js's own decorate() points `aria-describedby` at, and must declare NO padding of its own
   (whole-branch review, DEC-018: an earlier version of this rule ALSO declared the same padding here,
   which — since the wrapper and NamedError's own root are two DIFFERENT, nested boxes — genuinely
   doubled it, not merely duplicated a value harmlessly; caught before merge, never shipped). */
[b-k6bo3wiale] table.ui-grid > tbody > tr[row-state="detail-content"] > td > div[id^="ui-grid-seam-"] {
    padding: 0;
}

/* Sheet 05 §1's `tr.has-bad td{border-bottom:0}`: a data row carrying a seam reads as one item with
   it, no hairline between them. */
[b-k6bo3wiale] table.ui-grid > tbody > tr.ui-grid-has-bad > td {
    border-bottom: 0;
}

/* A seam-only row (no REAL Detail offered) still gets the supplier's own toggle-cell column for
   layout consistency across every row, but there is nothing for it to toggle — its own button is
   hidden (never a real affordance), which also removes it from the tab order and the accessibility
   tree, without collapsing the column's own width (keeping every row's columns aligned). */
[b-k6bo3wiale] table.ui-grid-with-detail > tbody > tr.ui-grid-seam-only > td.ui-grid-chevron [row-expand-button] {
    visibility: hidden;
}

/* No hover on the detail row: it is not a row to point at (the sheet: `tr.ui-grid-detail:hover td` stays the surface). */
[b-k6bo3wiale] table.ui-grid > tbody > tr[row-state="detail-content"]:hover > td {
    background: var(--surface);
}

/* The open data row reads as one thing with its detail (the sheet's section 7 tints an expander's parent, drawn with the selected-row treatment): --accent-soft and the 3 px accent edge on the first cell — the toggle
   cell — and the caret a quarter turn. */
[b-k6bo3wiale] table.ui-grid > tbody > tr.ui-grid-detail-open > td {
    background: var(--accent-soft);
}

[b-k6bo3wiale] table.ui-grid > tbody > tr.ui-grid-detail-open > td:first-child {
    box-shadow: inset var(--sel-edge-w) 0 0 var(--accent);
}

[b-k6bo3wiale] table.ui-grid > tbody > tr.ui-grid-detail-open > td:first-child [row-expand-button]::after {
    transform: rotate(90deg);
}

/* Sticky first column WITH a toggle cell: the toggle cell sticks at 0 (the rule above already sticks every first child) and the host's first column — the second cell — sticks beside it, at the toggle cell's width;
   the hairline goes on IT, not on the toggle cell (content hides behind the pair, and the pair's edge is the host column's). Its fill is the row's, like every stuck cell's. */
[b-k6bo3wiale] table.ui-grid-with-detail.ui-grid-sticky-first > thead > tr > :nth-child(2),
[b-k6bo3wiale] table.ui-grid-with-detail.ui-grid-sticky-first > tbody > tr > :nth-child(2) {
    position: sticky;
    left: var(--grid-toggle-w);
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

[b-k6bo3wiale] table.ui-grid-with-detail.ui-grid-sticky-first > thead > tr > th:nth-child(2),
[b-k6bo3wiale] table.ui-grid-with-detail.ui-grid-sticky-first > tbody > tr.ui-grid-footer > :nth-child(2) {
    z-index: 4;
    background: var(--fill-1);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-with-detail.ui-grid-sticky-first > thead > tr > :first-child,
.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-with-detail.ui-grid-sticky-first > tbody > tr:not([row-state="detail-content"]) > :first-child {
    border-right: 0;
}

.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-with-detail.ui-grid-sticky-first > thead > tr > :nth-child(2),
.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-with-detail.ui-grid-sticky-first > tbody > tr:not([row-state="detail-content"]) > :nth-child(2) {
    border-right: var(--border-w) solid var(--line);
}

/* ===== FPL-001/REQ-041 (#3639), ability 1 — several fixed columns at each edge (sheet 05 section 1e: `.fx1`..`.fx4`, `.fr`) =====
   One column at an edge keeps the `ui-grid-sticky-first` / `-last` rules above, byte for byte. Two or more use `ui-grid-sticky-left-multi` + `ui-grid-fl-T` (T = the number of fixed-left CELLS: the host's N, plus the
   Detail toggle cell, which belongs to the block and does not count toward N) and `ui-grid-sticky-right-multi` + `ui-grid-fr-M`. The table is `width: max-content; min-width: 100%` exactly as for one column.
   A cell sticks at the sum of the widths before it (left) / after it (right): `gridRows.js` `observeEdges` measures the table's grid tracks and sets `--ui-fl-k` / `--ui-fr-j` on the wrap (plain custom properties, not
   tokens). `:nth-child()` cannot take a custom property, so the rules are written out once per index — the cap of 8 fixed columns per edge (`GRID_STICKY_EDGES_TOO_MANY`) is what keeps this list finite.
   Every fixed cell is OPAQUE (its row's own fill, `--ui-grid-cell-bg`, else the surface), header cells and footer cells keep --fill-1 above the body cells, and the inner edge of each block takes the hairline only while content
   is hidden behind it (`data-edge-first` / `data-edge-last`, kept by the bridge): a 1 px `--line` border, never a shadow. A fixed block moves as one across the header, the body and the footer rows.
   The header rules carry the wrap prefix on purpose: the wrap's own `th { z-index: 3 }` (the header above the stuck body cells) outranks a bare `th:nth-child()` rule, and a scrolling header cell, later in the DOM at
   the same level, would then paint OVER a fixed one (found live: scrolled header text drawn across the fixed block). */
[b-k6bo3wiale] table.ui-grid-sticky-left-multi,
[b-k6bo3wiale] table.ui-grid-sticky-right-multi {
    width: max-content;
    min-width: 100%;
}
[b-k6bo3wiale] table.ui-grid-fl-2 > thead > tr > :nth-child(-n+2),
[b-k6bo3wiale] table.ui-grid-fl-2 > tbody > tr > :nth-child(-n+2) {
    position: sticky;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fl-2 > thead > tr > th:nth-child(-n+2),
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fl-2 > tbody > tr.ui-grid-footer > :nth-child(-n+2) {
    z-index: 4;
    background: var(--fill-1);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-fl-2 > thead > tr > :nth-child(2),
.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-fl-2 > tbody > tr:not([row-state="detail-content"]) > :nth-child(2) {
    border-right: var(--border-w) solid var(--line);
}
[b-k6bo3wiale] table.ui-grid-fl-3 > thead > tr > :nth-child(-n+3),
[b-k6bo3wiale] table.ui-grid-fl-3 > tbody > tr > :nth-child(-n+3) {
    position: sticky;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fl-3 > thead > tr > th:nth-child(-n+3),
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fl-3 > tbody > tr.ui-grid-footer > :nth-child(-n+3) {
    z-index: 4;
    background: var(--fill-1);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-fl-3 > thead > tr > :nth-child(3),
.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-fl-3 > tbody > tr:not([row-state="detail-content"]) > :nth-child(3) {
    border-right: var(--border-w) solid var(--line);
}
[b-k6bo3wiale] table.ui-grid-fl-4 > thead > tr > :nth-child(-n+4),
[b-k6bo3wiale] table.ui-grid-fl-4 > tbody > tr > :nth-child(-n+4) {
    position: sticky;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fl-4 > thead > tr > th:nth-child(-n+4),
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fl-4 > tbody > tr.ui-grid-footer > :nth-child(-n+4) {
    z-index: 4;
    background: var(--fill-1);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-fl-4 > thead > tr > :nth-child(4),
.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-fl-4 > tbody > tr:not([row-state="detail-content"]) > :nth-child(4) {
    border-right: var(--border-w) solid var(--line);
}
[b-k6bo3wiale] table.ui-grid-fl-5 > thead > tr > :nth-child(-n+5),
[b-k6bo3wiale] table.ui-grid-fl-5 > tbody > tr > :nth-child(-n+5) {
    position: sticky;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fl-5 > thead > tr > th:nth-child(-n+5),
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fl-5 > tbody > tr.ui-grid-footer > :nth-child(-n+5) {
    z-index: 4;
    background: var(--fill-1);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-fl-5 > thead > tr > :nth-child(5),
.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-fl-5 > tbody > tr:not([row-state="detail-content"]) > :nth-child(5) {
    border-right: var(--border-w) solid var(--line);
}
[b-k6bo3wiale] table.ui-grid-fl-6 > thead > tr > :nth-child(-n+6),
[b-k6bo3wiale] table.ui-grid-fl-6 > tbody > tr > :nth-child(-n+6) {
    position: sticky;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fl-6 > thead > tr > th:nth-child(-n+6),
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fl-6 > tbody > tr.ui-grid-footer > :nth-child(-n+6) {
    z-index: 4;
    background: var(--fill-1);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-fl-6 > thead > tr > :nth-child(6),
.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-fl-6 > tbody > tr:not([row-state="detail-content"]) > :nth-child(6) {
    border-right: var(--border-w) solid var(--line);
}
[b-k6bo3wiale] table.ui-grid-fl-7 > thead > tr > :nth-child(-n+7),
[b-k6bo3wiale] table.ui-grid-fl-7 > tbody > tr > :nth-child(-n+7) {
    position: sticky;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fl-7 > thead > tr > th:nth-child(-n+7),
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fl-7 > tbody > tr.ui-grid-footer > :nth-child(-n+7) {
    z-index: 4;
    background: var(--fill-1);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-fl-7 > thead > tr > :nth-child(7),
.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-fl-7 > tbody > tr:not([row-state="detail-content"]) > :nth-child(7) {
    border-right: var(--border-w) solid var(--line);
}
[b-k6bo3wiale] table.ui-grid-fl-8 > thead > tr > :nth-child(-n+8),
[b-k6bo3wiale] table.ui-grid-fl-8 > tbody > tr > :nth-child(-n+8) {
    position: sticky;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fl-8 > thead > tr > th:nth-child(-n+8),
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fl-8 > tbody > tr.ui-grid-footer > :nth-child(-n+8) {
    z-index: 4;
    background: var(--fill-1);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-fl-8 > thead > tr > :nth-child(8),
.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-fl-8 > tbody > tr:not([row-state="detail-content"]) > :nth-child(8) {
    border-right: var(--border-w) solid var(--line);
}
[b-k6bo3wiale] table.ui-grid-fl-9 > thead > tr > :nth-child(-n+9),
[b-k6bo3wiale] table.ui-grid-fl-9 > tbody > tr > :nth-child(-n+9) {
    position: sticky;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fl-9 > thead > tr > th:nth-child(-n+9),
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fl-9 > tbody > tr.ui-grid-footer > :nth-child(-n+9) {
    z-index: 4;
    background: var(--fill-1);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-fl-9 > thead > tr > :nth-child(9),
.ui-grid-wrap.ui-grid-scroll[data-edge-first][b-k6bo3wiale]  table.ui-grid-fl-9 > tbody > tr:not([row-state="detail-content"]) > :nth-child(9) {
    border-right: var(--border-w) solid var(--line);
}
[b-k6bo3wiale] table.ui-grid-fr-2 > thead > tr > :nth-last-child(-n+2),
[b-k6bo3wiale] table.ui-grid-fr-2 > tbody > tr > :nth-last-child(-n+2) {
    position: sticky;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fr-2 > thead > tr > th:nth-last-child(-n+2),
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fr-2 > tbody > tr.ui-grid-footer > :nth-last-child(-n+2) {
    z-index: 4;
    background: var(--fill-1);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-last][b-k6bo3wiale]  table.ui-grid-fr-2 > thead > tr > :nth-last-child(2),
.ui-grid-wrap.ui-grid-scroll[data-edge-last][b-k6bo3wiale]  table.ui-grid-fr-2 > tbody > tr:not([row-state="detail-content"]) > :nth-last-child(2) {
    border-left: var(--border-w) solid var(--line);
}
[b-k6bo3wiale] table.ui-grid-fr-3 > thead > tr > :nth-last-child(-n+3),
[b-k6bo3wiale] table.ui-grid-fr-3 > tbody > tr > :nth-last-child(-n+3) {
    position: sticky;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fr-3 > thead > tr > th:nth-last-child(-n+3),
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fr-3 > tbody > tr.ui-grid-footer > :nth-last-child(-n+3) {
    z-index: 4;
    background: var(--fill-1);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-last][b-k6bo3wiale]  table.ui-grid-fr-3 > thead > tr > :nth-last-child(3),
.ui-grid-wrap.ui-grid-scroll[data-edge-last][b-k6bo3wiale]  table.ui-grid-fr-3 > tbody > tr:not([row-state="detail-content"]) > :nth-last-child(3) {
    border-left: var(--border-w) solid var(--line);
}
[b-k6bo3wiale] table.ui-grid-fr-4 > thead > tr > :nth-last-child(-n+4),
[b-k6bo3wiale] table.ui-grid-fr-4 > tbody > tr > :nth-last-child(-n+4) {
    position: sticky;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fr-4 > thead > tr > th:nth-last-child(-n+4),
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fr-4 > tbody > tr.ui-grid-footer > :nth-last-child(-n+4) {
    z-index: 4;
    background: var(--fill-1);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-last][b-k6bo3wiale]  table.ui-grid-fr-4 > thead > tr > :nth-last-child(4),
.ui-grid-wrap.ui-grid-scroll[data-edge-last][b-k6bo3wiale]  table.ui-grid-fr-4 > tbody > tr:not([row-state="detail-content"]) > :nth-last-child(4) {
    border-left: var(--border-w) solid var(--line);
}
[b-k6bo3wiale] table.ui-grid-fr-5 > thead > tr > :nth-last-child(-n+5),
[b-k6bo3wiale] table.ui-grid-fr-5 > tbody > tr > :nth-last-child(-n+5) {
    position: sticky;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fr-5 > thead > tr > th:nth-last-child(-n+5),
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fr-5 > tbody > tr.ui-grid-footer > :nth-last-child(-n+5) {
    z-index: 4;
    background: var(--fill-1);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-last][b-k6bo3wiale]  table.ui-grid-fr-5 > thead > tr > :nth-last-child(5),
.ui-grid-wrap.ui-grid-scroll[data-edge-last][b-k6bo3wiale]  table.ui-grid-fr-5 > tbody > tr:not([row-state="detail-content"]) > :nth-last-child(5) {
    border-left: var(--border-w) solid var(--line);
}
[b-k6bo3wiale] table.ui-grid-fr-6 > thead > tr > :nth-last-child(-n+6),
[b-k6bo3wiale] table.ui-grid-fr-6 > tbody > tr > :nth-last-child(-n+6) {
    position: sticky;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fr-6 > thead > tr > th:nth-last-child(-n+6),
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fr-6 > tbody > tr.ui-grid-footer > :nth-last-child(-n+6) {
    z-index: 4;
    background: var(--fill-1);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-last][b-k6bo3wiale]  table.ui-grid-fr-6 > thead > tr > :nth-last-child(6),
.ui-grid-wrap.ui-grid-scroll[data-edge-last][b-k6bo3wiale]  table.ui-grid-fr-6 > tbody > tr:not([row-state="detail-content"]) > :nth-last-child(6) {
    border-left: var(--border-w) solid var(--line);
}
[b-k6bo3wiale] table.ui-grid-fr-7 > thead > tr > :nth-last-child(-n+7),
[b-k6bo3wiale] table.ui-grid-fr-7 > tbody > tr > :nth-last-child(-n+7) {
    position: sticky;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fr-7 > thead > tr > th:nth-last-child(-n+7),
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fr-7 > tbody > tr.ui-grid-footer > :nth-last-child(-n+7) {
    z-index: 4;
    background: var(--fill-1);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-last][b-k6bo3wiale]  table.ui-grid-fr-7 > thead > tr > :nth-last-child(7),
.ui-grid-wrap.ui-grid-scroll[data-edge-last][b-k6bo3wiale]  table.ui-grid-fr-7 > tbody > tr:not([row-state="detail-content"]) > :nth-last-child(7) {
    border-left: var(--border-w) solid var(--line);
}
[b-k6bo3wiale] table.ui-grid-fr-8 > thead > tr > :nth-last-child(-n+8),
[b-k6bo3wiale] table.ui-grid-fr-8 > tbody > tr > :nth-last-child(-n+8) {
    position: sticky;
    z-index: 2;
    background: var(--ui-grid-cell-bg, var(--surface));
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fr-8 > thead > tr > th:nth-last-child(-n+8),
.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid-fr-8 > tbody > tr.ui-grid-footer > :nth-last-child(-n+8) {
    z-index: 4;
    background: var(--fill-1);
}

.ui-grid-wrap.ui-grid-scroll[data-edge-last][b-k6bo3wiale]  table.ui-grid-fr-8 > thead > tr > :nth-last-child(8),
.ui-grid-wrap.ui-grid-scroll[data-edge-last][b-k6bo3wiale]  table.ui-grid-fr-8 > tbody > tr:not([row-state="detail-content"]) > :nth-last-child(8) {
    border-left: var(--border-w) solid var(--line);
}

/* The offsets: the k-th fixed cell from the left sticks at `--ui-fl-k`. Only a table that fixes AT LEAST k cells gets the rule (`:is(...)` over the classes `ui-grid-fl-k` .. `-9`): every header cell is also
   `position: sticky` (the supplier's sticky TOP), so a `left` on a cell that is not fixed would pin it horizontally too. */
[b-k6bo3wiale] table:is(.ui-grid-fl-2,.ui-grid-fl-3,.ui-grid-fl-4,.ui-grid-fl-5,.ui-grid-fl-6,.ui-grid-fl-7,.ui-grid-fl-8,.ui-grid-fl-9) > thead > tr > :nth-child(1),
[b-k6bo3wiale] table:is(.ui-grid-fl-2,.ui-grid-fl-3,.ui-grid-fl-4,.ui-grid-fl-5,.ui-grid-fl-6,.ui-grid-fl-7,.ui-grid-fl-8,.ui-grid-fl-9) > tbody > tr > :nth-child(1) {
    left: var(--ui-fl-1, 0px);
}

[b-k6bo3wiale] table:is(.ui-grid-fl-2,.ui-grid-fl-3,.ui-grid-fl-4,.ui-grid-fl-5,.ui-grid-fl-6,.ui-grid-fl-7,.ui-grid-fl-8,.ui-grid-fl-9) > thead > tr > :nth-child(2),
[b-k6bo3wiale] table:is(.ui-grid-fl-2,.ui-grid-fl-3,.ui-grid-fl-4,.ui-grid-fl-5,.ui-grid-fl-6,.ui-grid-fl-7,.ui-grid-fl-8,.ui-grid-fl-9) > tbody > tr > :nth-child(2) {
    left: var(--ui-fl-2, 0px);
}

[b-k6bo3wiale] table:is(.ui-grid-fl-3,.ui-grid-fl-4,.ui-grid-fl-5,.ui-grid-fl-6,.ui-grid-fl-7,.ui-grid-fl-8,.ui-grid-fl-9) > thead > tr > :nth-child(3),
[b-k6bo3wiale] table:is(.ui-grid-fl-3,.ui-grid-fl-4,.ui-grid-fl-5,.ui-grid-fl-6,.ui-grid-fl-7,.ui-grid-fl-8,.ui-grid-fl-9) > tbody > tr > :nth-child(3) {
    left: var(--ui-fl-3, 0px);
}

[b-k6bo3wiale] table:is(.ui-grid-fl-4,.ui-grid-fl-5,.ui-grid-fl-6,.ui-grid-fl-7,.ui-grid-fl-8,.ui-grid-fl-9) > thead > tr > :nth-child(4),
[b-k6bo3wiale] table:is(.ui-grid-fl-4,.ui-grid-fl-5,.ui-grid-fl-6,.ui-grid-fl-7,.ui-grid-fl-8,.ui-grid-fl-9) > tbody > tr > :nth-child(4) {
    left: var(--ui-fl-4, 0px);
}

[b-k6bo3wiale] table:is(.ui-grid-fl-5,.ui-grid-fl-6,.ui-grid-fl-7,.ui-grid-fl-8,.ui-grid-fl-9) > thead > tr > :nth-child(5),
[b-k6bo3wiale] table:is(.ui-grid-fl-5,.ui-grid-fl-6,.ui-grid-fl-7,.ui-grid-fl-8,.ui-grid-fl-9) > tbody > tr > :nth-child(5) {
    left: var(--ui-fl-5, 0px);
}

[b-k6bo3wiale] table:is(.ui-grid-fl-6,.ui-grid-fl-7,.ui-grid-fl-8,.ui-grid-fl-9) > thead > tr > :nth-child(6),
[b-k6bo3wiale] table:is(.ui-grid-fl-6,.ui-grid-fl-7,.ui-grid-fl-8,.ui-grid-fl-9) > tbody > tr > :nth-child(6) {
    left: var(--ui-fl-6, 0px);
}

[b-k6bo3wiale] table:is(.ui-grid-fl-7,.ui-grid-fl-8,.ui-grid-fl-9) > thead > tr > :nth-child(7),
[b-k6bo3wiale] table:is(.ui-grid-fl-7,.ui-grid-fl-8,.ui-grid-fl-9) > tbody > tr > :nth-child(7) {
    left: var(--ui-fl-7, 0px);
}

[b-k6bo3wiale] table:is(.ui-grid-fl-8,.ui-grid-fl-9) > thead > tr > :nth-child(8),
[b-k6bo3wiale] table:is(.ui-grid-fl-8,.ui-grid-fl-9) > tbody > tr > :nth-child(8) {
    left: var(--ui-fl-8, 0px);
}

[b-k6bo3wiale] table:is(.ui-grid-fl-9) > thead > tr > :nth-child(9),
[b-k6bo3wiale] table:is(.ui-grid-fl-9) > tbody > tr > :nth-child(9) {
    left: var(--ui-fl-9, 0px);
}

[b-k6bo3wiale] table:is(.ui-grid-fr-2,.ui-grid-fr-3,.ui-grid-fr-4,.ui-grid-fr-5,.ui-grid-fr-6,.ui-grid-fr-7,.ui-grid-fr-8) > thead > tr > :nth-last-child(1),
[b-k6bo3wiale] table:is(.ui-grid-fr-2,.ui-grid-fr-3,.ui-grid-fr-4,.ui-grid-fr-5,.ui-grid-fr-6,.ui-grid-fr-7,.ui-grid-fr-8) > tbody > tr > :nth-last-child(1) {
    right: var(--ui-fr-1, 0px);
}

[b-k6bo3wiale] table:is(.ui-grid-fr-2,.ui-grid-fr-3,.ui-grid-fr-4,.ui-grid-fr-5,.ui-grid-fr-6,.ui-grid-fr-7,.ui-grid-fr-8) > thead > tr > :nth-last-child(2),
[b-k6bo3wiale] table:is(.ui-grid-fr-2,.ui-grid-fr-3,.ui-grid-fr-4,.ui-grid-fr-5,.ui-grid-fr-6,.ui-grid-fr-7,.ui-grid-fr-8) > tbody > tr > :nth-last-child(2) {
    right: var(--ui-fr-2, 0px);
}

[b-k6bo3wiale] table:is(.ui-grid-fr-3,.ui-grid-fr-4,.ui-grid-fr-5,.ui-grid-fr-6,.ui-grid-fr-7,.ui-grid-fr-8) > thead > tr > :nth-last-child(3),
[b-k6bo3wiale] table:is(.ui-grid-fr-3,.ui-grid-fr-4,.ui-grid-fr-5,.ui-grid-fr-6,.ui-grid-fr-7,.ui-grid-fr-8) > tbody > tr > :nth-last-child(3) {
    right: var(--ui-fr-3, 0px);
}

[b-k6bo3wiale] table:is(.ui-grid-fr-4,.ui-grid-fr-5,.ui-grid-fr-6,.ui-grid-fr-7,.ui-grid-fr-8) > thead > tr > :nth-last-child(4),
[b-k6bo3wiale] table:is(.ui-grid-fr-4,.ui-grid-fr-5,.ui-grid-fr-6,.ui-grid-fr-7,.ui-grid-fr-8) > tbody > tr > :nth-last-child(4) {
    right: var(--ui-fr-4, 0px);
}

[b-k6bo3wiale] table:is(.ui-grid-fr-5,.ui-grid-fr-6,.ui-grid-fr-7,.ui-grid-fr-8) > thead > tr > :nth-last-child(5),
[b-k6bo3wiale] table:is(.ui-grid-fr-5,.ui-grid-fr-6,.ui-grid-fr-7,.ui-grid-fr-8) > tbody > tr > :nth-last-child(5) {
    right: var(--ui-fr-5, 0px);
}

[b-k6bo3wiale] table:is(.ui-grid-fr-6,.ui-grid-fr-7,.ui-grid-fr-8) > thead > tr > :nth-last-child(6),
[b-k6bo3wiale] table:is(.ui-grid-fr-6,.ui-grid-fr-7,.ui-grid-fr-8) > tbody > tr > :nth-last-child(6) {
    right: var(--ui-fr-6, 0px);
}

[b-k6bo3wiale] table:is(.ui-grid-fr-7,.ui-grid-fr-8) > thead > tr > :nth-last-child(7),
[b-k6bo3wiale] table:is(.ui-grid-fr-7,.ui-grid-fr-8) > tbody > tr > :nth-last-child(7) {
    right: var(--ui-fr-7, 0px);
}

[b-k6bo3wiale] table:is(.ui-grid-fr-8) > thead > tr > :nth-last-child(8),
[b-k6bo3wiale] table:is(.ui-grid-fr-8) > tbody > tr > :nth-last-child(8) {
    right: var(--ui-fr-8, 0px);
}

/* ===== FPL-001/REQ-041 (#3639), ability 2 — one footer row per group key (sheet 05 section 1e: `tfoot tr.ft-1`, `.ft-2`) =====
   Several footer rows are body rows with the class `ui-grid-footer ui-grid-footer-rows` and the single footer's own rules above (36 px = --row-head-h, --fill-1, semibold, a hairline on top, `position: sticky; z-index: 3`). What
   differs is carried by the row's INLINE style (Grid.razor ResolveRowStyle): `bottom: calc(var(--row-head-h) * k)` (the last row at 0, each one above it one footer row higher, so they pin TOGETHER), and the row's
   label and caption as CSS strings (`--ui-grid-footer-label`, `--ui-grid-footer-caption` — host data, quoted by GridCssString only).
   The label is drawn in the first host column's cell (cell 2 when the Grid's own detail toggle is cell 1) and the caption in the caption column's cell (`ui-grid-fcap-K` on the table says which; one rule per index, 64
   at most). The text is CSS-generated: the host's footer Item renders those two cells blank, and the text cannot be selected or copied (manager ruling (A), 2026-10-04). `content: var(--x)` with an unset custom property
   is invalid at computed-value time, so a row with no label / no caption draws nothing; the `0` fallback (the one DesignLayerLint allows for a custom property that is not a token) is
   also an invalid `content`, so the unset case is the same: no `::before` at all. */
[b-k6bo3wiale] table.ui-grid:not(.ui-grid-with-detail) > tbody > tr.ui-grid-footer-rows > :first-child::before,
[b-k6bo3wiale] table.ui-grid-with-detail > tbody > tr.ui-grid-footer-rows > :nth-child(2)::before {
    content: var(--ui-grid-footer-label, 0);
}

/* The body/footer junction is ONE hairline at every scroll position and whatever the scrollbar's width: the FIRST footer row lays a band of the row surface, --space-8 deep, over whatever body row is scrolling under its
   top edge, so a body row's own rule can never sit a pixel or two above the footer's own top rule. A mask in --surface, never an elevation, and it never reaches a row's words (a 40 px row keeps 12 px clear under its 20 px line). */
[b-k6bo3wiale] table.ui-grid > tbody > tr.ui-grid-footer-first > td {
    box-shadow: 0 calc(var(--space-8) * -1) 0 var(--surface);
}

[b-k6bo3wiale] table.ui-grid-fcap-1 > tbody > tr.ui-grid-footer-rows > :nth-child(1)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-2 > tbody > tr.ui-grid-footer-rows > :nth-child(2)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-3 > tbody > tr.ui-grid-footer-rows > :nth-child(3)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-4 > tbody > tr.ui-grid-footer-rows > :nth-child(4)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-5 > tbody > tr.ui-grid-footer-rows > :nth-child(5)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-6 > tbody > tr.ui-grid-footer-rows > :nth-child(6)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-7 > tbody > tr.ui-grid-footer-rows > :nth-child(7)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-8 > tbody > tr.ui-grid-footer-rows > :nth-child(8)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-9 > tbody > tr.ui-grid-footer-rows > :nth-child(9)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-10 > tbody > tr.ui-grid-footer-rows > :nth-child(10)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-11 > tbody > tr.ui-grid-footer-rows > :nth-child(11)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-12 > tbody > tr.ui-grid-footer-rows > :nth-child(12)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-13 > tbody > tr.ui-grid-footer-rows > :nth-child(13)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-14 > tbody > tr.ui-grid-footer-rows > :nth-child(14)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-15 > tbody > tr.ui-grid-footer-rows > :nth-child(15)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-16 > tbody > tr.ui-grid-footer-rows > :nth-child(16)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-17 > tbody > tr.ui-grid-footer-rows > :nth-child(17)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-18 > tbody > tr.ui-grid-footer-rows > :nth-child(18)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-19 > tbody > tr.ui-grid-footer-rows > :nth-child(19)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-20 > tbody > tr.ui-grid-footer-rows > :nth-child(20)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-21 > tbody > tr.ui-grid-footer-rows > :nth-child(21)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-22 > tbody > tr.ui-grid-footer-rows > :nth-child(22)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-23 > tbody > tr.ui-grid-footer-rows > :nth-child(23)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-24 > tbody > tr.ui-grid-footer-rows > :nth-child(24)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-25 > tbody > tr.ui-grid-footer-rows > :nth-child(25)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-26 > tbody > tr.ui-grid-footer-rows > :nth-child(26)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-27 > tbody > tr.ui-grid-footer-rows > :nth-child(27)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-28 > tbody > tr.ui-grid-footer-rows > :nth-child(28)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-29 > tbody > tr.ui-grid-footer-rows > :nth-child(29)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-30 > tbody > tr.ui-grid-footer-rows > :nth-child(30)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-31 > tbody > tr.ui-grid-footer-rows > :nth-child(31)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-32 > tbody > tr.ui-grid-footer-rows > :nth-child(32)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-33 > tbody > tr.ui-grid-footer-rows > :nth-child(33)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-34 > tbody > tr.ui-grid-footer-rows > :nth-child(34)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-35 > tbody > tr.ui-grid-footer-rows > :nth-child(35)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-36 > tbody > tr.ui-grid-footer-rows > :nth-child(36)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-37 > tbody > tr.ui-grid-footer-rows > :nth-child(37)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-38 > tbody > tr.ui-grid-footer-rows > :nth-child(38)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-39 > tbody > tr.ui-grid-footer-rows > :nth-child(39)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-40 > tbody > tr.ui-grid-footer-rows > :nth-child(40)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-41 > tbody > tr.ui-grid-footer-rows > :nth-child(41)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-42 > tbody > tr.ui-grid-footer-rows > :nth-child(42)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-43 > tbody > tr.ui-grid-footer-rows > :nth-child(43)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-44 > tbody > tr.ui-grid-footer-rows > :nth-child(44)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-45 > tbody > tr.ui-grid-footer-rows > :nth-child(45)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-46 > tbody > tr.ui-grid-footer-rows > :nth-child(46)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-47 > tbody > tr.ui-grid-footer-rows > :nth-child(47)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-48 > tbody > tr.ui-grid-footer-rows > :nth-child(48)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-49 > tbody > tr.ui-grid-footer-rows > :nth-child(49)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-50 > tbody > tr.ui-grid-footer-rows > :nth-child(50)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-51 > tbody > tr.ui-grid-footer-rows > :nth-child(51)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-52 > tbody > tr.ui-grid-footer-rows > :nth-child(52)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-53 > tbody > tr.ui-grid-footer-rows > :nth-child(53)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-54 > tbody > tr.ui-grid-footer-rows > :nth-child(54)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-55 > tbody > tr.ui-grid-footer-rows > :nth-child(55)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-56 > tbody > tr.ui-grid-footer-rows > :nth-child(56)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-57 > tbody > tr.ui-grid-footer-rows > :nth-child(57)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-58 > tbody > tr.ui-grid-footer-rows > :nth-child(58)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-59 > tbody > tr.ui-grid-footer-rows > :nth-child(59)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-60 > tbody > tr.ui-grid-footer-rows > :nth-child(60)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-61 > tbody > tr.ui-grid-footer-rows > :nth-child(61)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-62 > tbody > tr.ui-grid-footer-rows > :nth-child(62)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-63 > tbody > tr.ui-grid-footer-rows > :nth-child(63)::before {
    content: var(--ui-grid-footer-caption, 0);
}

[b-k6bo3wiale] table.ui-grid-fcap-64 > tbody > tr.ui-grid-footer-rows > :nth-child(64)::before {
    content: var(--ui-grid-footer-caption, 0);
}

/* ===== FPL-001/REQ-041 (#3639), ability 3 — grouped column headers (sheet 05 section 1e: `tr.hd-grp`, `th.grp`, `th.hd-span`, `.gb`) =====
   The supplier's header cannot carry a second tier (Grid.md "Supplier findings"), so the Grid draws ONLY the group tier — `.ui-grid-hg`, a real element above the table on the table's own column tracks
   (gridRows.js copies the table's `grid-template-columns` and width onto the tier ELEMENT as inline style — the Grid's CSS declares no column track or width of its own, only copies the host's) — and leaves the leaf header alone. The two tiers stick as ONE 72 px block: the tier at the wrap's top, the leaf header at `top: --row-head-h` under it.
   A column named by no group is one header cell spanning both tiers: its leaf th (`ui-grid-hgn-K` on the table) is stretched UP over the tier slot above it (`margin-top` of one tier, twice the height), and
   centred. A group cell is plain text: --fs-small, --text, weight 600, the leaf header's fill, no sort and no handler. A group over fixed columns is fixed with them; a scrolling group cell passing under a fixed block is
   covered by the fixed cells (opaque, above it) — cut at the block's inner edge. The tier is `pointer-events: none`: a click on the stretched leaf th's upper half reaches the leaf th (sort), as on the sheet. */
.ui-grid-hg[b-k6bo3wiale] {
    display: grid;
    height: var(--row-head-h);
    position: sticky;
    top: var(--ui-grid-sticky-top, 0px);
    z-index: 4;
    pointer-events: none;
}

.ui-grid-hg-cell[b-k6bo3wiale] {
    box-sizing: border-box;
    height: var(--row-head-h);
    display: flex;
    align-items: center;
    padding: 0 var(--cell-pad-x);
    background: var(--fill-1);
    color: var(--text);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    border-bottom: var(--border-w) solid var(--line);
    border-left: var(--border-w) solid var(--line);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-grid-hg-cell.ui-grid-hg-start[b-k6bo3wiale] {
    border-left: 0;
}

.ui-grid-hg-fl[b-k6bo3wiale],
.ui-grid-hg-fr[b-k6bo3wiale] {
    position: sticky;
    z-index: 2;
}

/* The hairline at a fixed block's inner edge is state, as for the leaf header and the body: only while content is hidden behind the block. */
.ui-grid-wrap.ui-grid-scroll[data-edge-first] .ui-grid-hg-fl-edge[b-k6bo3wiale] {
    border-right: var(--border-w) solid var(--line);
}

/* Stacking, found live (a scrolling stretched header painted over the fixed group cell while it was still partly under the block): the tier is ABOVE a scrolling header (the wrap gives it z-index 3) so the
   fixed group cells always cover whatever scrolls under them, and an ungrouped FIXED header (`ui-grid-hgf-K`) is above the tier (5) so it, in turn, covers a scrolling group cell passing under its stretched upper half. */
/* The leaf header sticks under the tier. */
[b-k6bo3wiale] table.ui-grid.ui-grid-with-groups > thead > tr > th {
    top: calc(var(--ui-grid-sticky-top, 0px) + var(--row-head-h));
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-1 > thead > tr > :nth-child(1) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-2 > thead > tr > :nth-child(2) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-3 > thead > tr > :nth-child(3) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-4 > thead > tr > :nth-child(4) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-5 > thead > tr > :nth-child(5) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-6 > thead > tr > :nth-child(6) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-7 > thead > tr > :nth-child(7) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-8 > thead > tr > :nth-child(8) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-9 > thead > tr > :nth-child(9) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-10 > thead > tr > :nth-child(10) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-11 > thead > tr > :nth-child(11) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-12 > thead > tr > :nth-child(12) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-13 > thead > tr > :nth-child(13) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-14 > thead > tr > :nth-child(14) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-15 > thead > tr > :nth-child(15) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-16 > thead > tr > :nth-child(16) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-17 > thead > tr > :nth-child(17) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-18 > thead > tr > :nth-child(18) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-19 > thead > tr > :nth-child(19) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-20 > thead > tr > :nth-child(20) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-21 > thead > tr > :nth-child(21) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-22 > thead > tr > :nth-child(22) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-23 > thead > tr > :nth-child(23) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-24 > thead > tr > :nth-child(24) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-25 > thead > tr > :nth-child(25) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-26 > thead > tr > :nth-child(26) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-27 > thead > tr > :nth-child(27) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-28 > thead > tr > :nth-child(28) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-29 > thead > tr > :nth-child(29) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-30 > thead > tr > :nth-child(30) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-31 > thead > tr > :nth-child(31) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-32 > thead > tr > :nth-child(32) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-33 > thead > tr > :nth-child(33) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-34 > thead > tr > :nth-child(34) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-35 > thead > tr > :nth-child(35) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-36 > thead > tr > :nth-child(36) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-37 > thead > tr > :nth-child(37) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-38 > thead > tr > :nth-child(38) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-39 > thead > tr > :nth-child(39) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-40 > thead > tr > :nth-child(40) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-41 > thead > tr > :nth-child(41) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-42 > thead > tr > :nth-child(42) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-43 > thead > tr > :nth-child(43) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-44 > thead > tr > :nth-child(44) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-45 > thead > tr > :nth-child(45) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-46 > thead > tr > :nth-child(46) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-47 > thead > tr > :nth-child(47) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-48 > thead > tr > :nth-child(48) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-49 > thead > tr > :nth-child(49) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-50 > thead > tr > :nth-child(50) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-51 > thead > tr > :nth-child(51) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-52 > thead > tr > :nth-child(52) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-53 > thead > tr > :nth-child(53) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-54 > thead > tr > :nth-child(54) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-55 > thead > tr > :nth-child(55) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-56 > thead > tr > :nth-child(56) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-57 > thead > tr > :nth-child(57) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-58 > thead > tr > :nth-child(58) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-59 > thead > tr > :nth-child(59) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-60 > thead > tr > :nth-child(60) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-61 > thead > tr > :nth-child(61) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-62 > thead > tr > :nth-child(62) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-63 > thead > tr > :nth-child(63) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgn-64 > thead > tr > :nth-child(64) {
    height: calc(var(--row-head-h) * 2) !important;
    min-height: calc(var(--row-head-h) * 2) !important;
    margin-top: calc(var(--row-head-h) * -1);
    top: var(--ui-grid-sticky-top, 0px);
    display: flex;
    align-items: center;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-with-groups > thead > tr > th > div {
    flex: 1 1 auto;
    min-width: 0;
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-2 > thead > tr > :nth-child(2) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-3 > thead > tr > :nth-child(3) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-4 > thead > tr > :nth-child(4) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-5 > thead > tr > :nth-child(5) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-6 > thead > tr > :nth-child(6) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-7 > thead > tr > :nth-child(7) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-8 > thead > tr > :nth-child(8) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-9 > thead > tr > :nth-child(9) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-10 > thead > tr > :nth-child(10) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-11 > thead > tr > :nth-child(11) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-12 > thead > tr > :nth-child(12) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-13 > thead > tr > :nth-child(13) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-14 > thead > tr > :nth-child(14) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-15 > thead > tr > :nth-child(15) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-16 > thead > tr > :nth-child(16) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-17 > thead > tr > :nth-child(17) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-18 > thead > tr > :nth-child(18) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-19 > thead > tr > :nth-child(19) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-20 > thead > tr > :nth-child(20) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-21 > thead > tr > :nth-child(21) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-22 > thead > tr > :nth-child(22) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-23 > thead > tr > :nth-child(23) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-24 > thead > tr > :nth-child(24) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-25 > thead > tr > :nth-child(25) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-26 > thead > tr > :nth-child(26) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-27 > thead > tr > :nth-child(27) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-28 > thead > tr > :nth-child(28) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-29 > thead > tr > :nth-child(29) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-30 > thead > tr > :nth-child(30) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-31 > thead > tr > :nth-child(31) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-32 > thead > tr > :nth-child(32) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-33 > thead > tr > :nth-child(33) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-34 > thead > tr > :nth-child(34) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-35 > thead > tr > :nth-child(35) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-36 > thead > tr > :nth-child(36) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-37 > thead > tr > :nth-child(37) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-38 > thead > tr > :nth-child(38) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-39 > thead > tr > :nth-child(39) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-40 > thead > tr > :nth-child(40) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-41 > thead > tr > :nth-child(41) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-42 > thead > tr > :nth-child(42) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-43 > thead > tr > :nth-child(43) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-44 > thead > tr > :nth-child(44) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-45 > thead > tr > :nth-child(45) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-46 > thead > tr > :nth-child(46) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-47 > thead > tr > :nth-child(47) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-48 > thead > tr > :nth-child(48) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-49 > thead > tr > :nth-child(49) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-50 > thead > tr > :nth-child(50) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-51 > thead > tr > :nth-child(51) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-52 > thead > tr > :nth-child(52) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-53 > thead > tr > :nth-child(53) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-54 > thead > tr > :nth-child(54) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-55 > thead > tr > :nth-child(55) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-56 > thead > tr > :nth-child(56) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-57 > thead > tr > :nth-child(57) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-58 > thead > tr > :nth-child(58) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-59 > thead > tr > :nth-child(59) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-60 > thead > tr > :nth-child(60) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-61 > thead > tr > :nth-child(61) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-62 > thead > tr > :nth-child(62) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-63 > thead > tr > :nth-child(63) {
    border-left: var(--border-w) solid var(--line);
}

[b-k6bo3wiale] table.ui-grid.ui-grid-hgb-64 > thead > tr > :nth-child(64) {
    border-left: var(--border-w) solid var(--line);
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-1 > thead > tr > :nth-child(1) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-2 > thead > tr > :nth-child(2) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-3 > thead > tr > :nth-child(3) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-4 > thead > tr > :nth-child(4) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-5 > thead > tr > :nth-child(5) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-6 > thead > tr > :nth-child(6) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-7 > thead > tr > :nth-child(7) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-8 > thead > tr > :nth-child(8) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-9 > thead > tr > :nth-child(9) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-10 > thead > tr > :nth-child(10) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-11 > thead > tr > :nth-child(11) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-12 > thead > tr > :nth-child(12) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-13 > thead > tr > :nth-child(13) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-14 > thead > tr > :nth-child(14) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-15 > thead > tr > :nth-child(15) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-16 > thead > tr > :nth-child(16) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-17 > thead > tr > :nth-child(17) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-18 > thead > tr > :nth-child(18) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-19 > thead > tr > :nth-child(19) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-20 > thead > tr > :nth-child(20) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-21 > thead > tr > :nth-child(21) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-22 > thead > tr > :nth-child(22) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-23 > thead > tr > :nth-child(23) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-24 > thead > tr > :nth-child(24) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-25 > thead > tr > :nth-child(25) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-26 > thead > tr > :nth-child(26) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-27 > thead > tr > :nth-child(27) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-28 > thead > tr > :nth-child(28) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-29 > thead > tr > :nth-child(29) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-30 > thead > tr > :nth-child(30) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-31 > thead > tr > :nth-child(31) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-32 > thead > tr > :nth-child(32) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-33 > thead > tr > :nth-child(33) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-34 > thead > tr > :nth-child(34) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-35 > thead > tr > :nth-child(35) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-36 > thead > tr > :nth-child(36) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-37 > thead > tr > :nth-child(37) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-38 > thead > tr > :nth-child(38) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-39 > thead > tr > :nth-child(39) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-40 > thead > tr > :nth-child(40) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-41 > thead > tr > :nth-child(41) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-42 > thead > tr > :nth-child(42) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-43 > thead > tr > :nth-child(43) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-44 > thead > tr > :nth-child(44) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-45 > thead > tr > :nth-child(45) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-46 > thead > tr > :nth-child(46) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-47 > thead > tr > :nth-child(47) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-48 > thead > tr > :nth-child(48) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-49 > thead > tr > :nth-child(49) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-50 > thead > tr > :nth-child(50) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-51 > thead > tr > :nth-child(51) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-52 > thead > tr > :nth-child(52) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-53 > thead > tr > :nth-child(53) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-54 > thead > tr > :nth-child(54) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-55 > thead > tr > :nth-child(55) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-56 > thead > tr > :nth-child(56) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-57 > thead > tr > :nth-child(57) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-58 > thead > tr > :nth-child(58) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-59 > thead > tr > :nth-child(59) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-60 > thead > tr > :nth-child(60) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-61 > thead > tr > :nth-child(61) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-62 > thead > tr > :nth-child(62) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-63 > thead > tr > :nth-child(63) {
    z-index: 5;
}

.ui-grid-wrap.ui-grid-scroll[b-k6bo3wiale]  table.ui-grid.ui-grid-hgf-64 > thead > tr > :nth-child(64) {
    z-index: 5;
}


/* ---- a row's open Menu over the stuck cells (W:ats-core-fixes/T-10, TD-13) ----
   A stuck cell is `position: sticky; z-index: 2`, so it is its own stacking context: a row's Menu, placed inside the stuck cell that holds its trigger, can never paint above the NEXT rows' stuck cells (later in
   the DOM at the same level), and its items sat under them and could not be clicked (found on staging: `elementFromPoint` at each item's centre hit the next rows' fixed actions cells). The body cell that
   holds an OPEN Menu rises above every other stuck cell and every fixed header cell (3 and 4; the header-group tier's fixed cell is 5).
   What marks "open": the Menu draws its popup, `div.ui-menu[role="menu"]`, only while open — every host mounts `<Menu>` conditionally and a closed menu has no popup in the DOM (Menu.razor) — so
   `:has(.ui-menu[role="menu"])` matches exactly while a menu is open. It is written for each kind of stuck cell (one column at an edge, several at an edge); a cell that is not stuck is `position: static`, where
   a z-index does nothing. The same cell is `overflow: visible` while the menu is open: the supplier's cell is `overflow: hidden`, which cut the popup at the cell's own box (found live: with the z-index alone every
   item still hit the cells behind it). A popup that then hangs past the Grid's scrolling wrap (the last row) is placed by the Menu against that wrap's box (viewportNarrow.js `measureRoom`). Only a row's own cell: `> tbody > tr > td`, never a table nested in a cell. */
[b-k6bo3wiale] table.ui-grid-sticky-first > tbody > tr > td:has(.ui-menu[role="menu"]) {
    z-index: 6;
    overflow: visible;
}

[b-k6bo3wiale] table.ui-grid-sticky-last > tbody > tr > td:has(.ui-menu[role="menu"]) {
    z-index: 6;
    overflow: visible;
}

[b-k6bo3wiale] table.ui-grid-sticky-left-multi > tbody > tr > td:has(.ui-menu[role="menu"]) {
    z-index: 6;
    overflow: visible;
}

[b-k6bo3wiale] table.ui-grid-sticky-right-multi > tbody > tr > td:has(.ui-menu[role="menu"]) {
    z-index: 6;
    overflow: visible;
}
/* frontend/Components/Ui/GroupedBar/GroupedBar.razor.rz.scp.css */
/* Catalogue row 67 (Grouped / paired bar) — the one thing this form adds to ChartFrame's own shared
   scaffolding: a pair of 14px bars, 2px apart. Baseline/xaxis/tooltip/click/text-state/unavailable-
   state are ALL ChartFrame's own; see GroupedBar.razor's own header comment. Matches the sheet's own
   `.pair`/`.pair i` verbatim. */

.ui-gbar-pair[b-yucabt3ro0] {
    display: flex;
    gap: var(--bar-gap-sm);
    align-items: flex-end;
    justify-content: center;
    width: 100%;
}

.ui-gbar-bar[b-yucabt3ro0] {
    display: block;
    width: var(--bar-w-sm);
    border-radius: var(--space-2) var(--space-2) 0 0;
}

.ui-gbar-s1[b-yucabt3ro0] { background: var(--series-1); }
.ui-gbar-s2[b-yucabt3ro0] { background: var(--series-2); }
.ui-gbar-s3[b-yucabt3ro0] { background: var(--series-3); }
.ui-gbar-s4[b-yucabt3ro0] { background: var(--series-4); }
.ui-gbar-s5[b-yucabt3ro0] { background: var(--series-5); }
.ui-gbar-s6[b-yucabt3ro0] { background: var(--series-6); }
.ui-gbar-s7[b-yucabt3ro0] { background: var(--series-7); }
.ui-gbar-s8[b-yucabt3ro0] { background: var(--series-8); }
.ui-gbar-s9[b-yucabt3ro0] { background: var(--series-9); } /* FPL-001/REQ-025 FR-20 -- slate, "Other", matching row 65's own .ui-vsb-s9 */
/* frontend/Components/Ui/HeatGrid/HeatGrid.razor.rz.scp.css */
/* FPL-001/REQ-003, row 30 — Heat grid / calendar wall. Ours in CSS AND markup. `::deep` is needed
   in exactly one place (see `.ui-heat-c ::deep .ui-tooltip-region` below, for the real `<Tooltip>`
   each cell wraps) -- everything else is this component's own markup. Every text element sets its
   own explicit colour from a token (the row-20/List leak class). */

.ui-heat-wall[b-3c6baakmzt] {
    overflow: auto;
    border-radius: var(--radius);
    /* FPL-001/REQ-038 FR-9: the wall's own stacking context — its sticky layers (header 2, name column --z-tip + 1, corner --z-tip + 2, below) are ranked against each other, never against a menu, drawer or
       dialog elsewhere on the page. */
    isolation: isolate;
}

.ui-heat-table[b-3c6baakmzt] {
    width: max-content;
    table-layout: fixed;
    /* FR-9(b) residue, found live after the stacking fix (both modes): in the collapsed-border model a row's hairline belongs to the TABLE and is painted under every sticky cell whatever its z-index, so one 1 px line
       of an open tooltip bubble showed through the name column along each row hairline. Separate borders (no spacing) make each hairline part of its own cell, so it paints with the cell and the name column
       covers the bubble whole. Cells draw only a right and a bottom border (below), so nothing doubles and the geometry is the same (cells 32 + 1; a content cell is border-box 64 x 41). */
    border-collapse: separate;
    border-spacing: 0;
}

/* Measured live, the hard way -- two compounding gaps, not one:
   1) `table-layout:fixed` derives column widths from the FIRST row's cells (or <col> elements)
      only -- this table's first header row is name(rowspan=2) + 2 colspan'd period bands, none of
      which represent one cell per day column, so every explicit `width:32px` on a .ui-heat-d/
      .ui-heat-c cell (both live in the SECOND header row / the body) was silently ignored. Fixed
      with an explicit <colgroup>, the spec-correct source for column widths in this shape.
   2) Even with the <colgroup> in place, `width:auto` on a fixed-layout table resolves to 100% of
      the CONTAINING block in real Chromium, not the sum of its column widths -- the table still
      shrank to fit `.ui-heat-wall` instead of triggering its own `overflow:auto` scroll (measured:
      cells stayed compressed even after the <colgroup> fix, both re-measured live against the real
      gallery, not assumed from either fix alone). `width:max-content` sizes the table from its
      columns' own declared widths regardless of the container, restoring the intended 32px cells
      and the wall's horizontal scroll. */
.ui-heat-col-nm[b-3c6baakmzt] {
    width: var(--heat-name-w);
}

.ui-heat-col-d[b-3c6baakmzt] {
    width: var(--cell);
}

.ui-heat-table th[b-3c6baakmzt],
.ui-heat-table td[b-3c6baakmzt] {
    padding: 0;
    border-right: var(--border-w) solid var(--line);
    border-bottom: var(--border-w) solid var(--line);
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- this sticky column's own width
   must match its <col class="ui-heat-col-nm"> counterpart exactly (the table-layout:fixed lesson
   this file's own header comment already documents); the 16px of horizontal padding alone (no
   border on this rule) was rendering it 196px wide against the declared 180px --heat-name-w. */
.ui-heat-nm[b-3c6baakmzt] {
    box-sizing: border-box;
    position: sticky;
    left: 0;
    /* FR-9(b), found live (MEASURED FAULT, states mode, before this slice): the name column was z 2 and a day cell's tooltip bubble (a plain absolute element, z --z-tip = 40, NOT top-layer) painted OVER it
       when its cell had scrolled sideways under the column. The column is above every layer a day cell can draw — content, the focused row's hairlines, the keyboard ring (all ≤ 1 inside a cell) and an open
       bubble (--z-tip): `--z-tip + 1`; the corner above both. The keyboard ring was already under the column (SOUND). */
    z-index: calc(var(--z-tip) + 1);
    width: var(--heat-name-w);
    height: var(--cell);
    padding: 0 var(--space-8);
    background: var(--surface);
    text-align: left;
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-heat-nm-head[b-3c6baakmzt] {
    position: sticky;
    top: 0;
    background: var(--fill-1);
    z-index: calc(var(--z-tip) + 2);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
}

.ui-heat-d[b-3c6baakmzt] {
    position: sticky;
    /* FR-9(a), found live (MEASURED FAULT, states mode, before this slice): both header rows were `top: 0` at the same z-index, so a stuck day row covered the whole period-band row (22.5 px of overlap). Stacking
       only, no layout change: the band row sticks at 0, the day row sticks just below it (the band's height + its hairline). */
    top: calc(var(--pill-h) + var(--border-w));
    z-index: 2;
    width: var(--cell);
    height: var(--cell);
    text-align: center;
    font-size: var(--fs-caption);
    color: var(--text-secondary);
    font-weight: var(--fw-regular);
    background: var(--fill-1);
}

.ui-heat-d-we[b-3c6baakmzt] {
    /* FPL-001/REQ-038 FR-10b (ii), the owner's ruling 2026-10-05: ONE rule for the weekend day label in BOTH modes (sheet 05 `.wall .d.we`) -- the old colour read 2.33:1 on the weekend tint; the tint is unchanged. */
    color: var(--text-secondary);
}

.ui-heat-band[b-3c6baakmzt] {
    position: sticky;
    top: 0;
    z-index: 2;
    height: var(--pill-h);
    background: var(--fill-1);
    text-align: left;
    padding: 0 var(--space-8);
    font-size: var(--fs-caption);
    color: var(--text-secondary);
    font-weight: var(--fw-regular);
}

.ui-heat-band-lock[b-3c6baakmzt] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    vertical-align: middle;
    margin-right: var(--space-4);
}

.ui-heat-c[b-3c6baakmzt] {
    position: relative;
    width: var(--cell);
    height: var(--cell);
    background: var(--surface);
    padding: 0;
}

/* `::deep` needed here alone: each cell wraps the real <Tooltip> (row 27), whose own root sizes to
   its content by default (`display:flex` since item 14b's own region-equals-child fix; block-level
   outer display, so this still needs an explicit override) -- the button needs to fill the `<td>`
   fully, so Tooltip's internal `.ui-tooltip-region` is reached with `::deep` (Button/B1 lesson:
   needs a plain-HTML ancestor carrying THIS component's own scope attribute -- `.ui-heat-c`
   provides it). */
.ui-heat-c[b-3c6baakmzt]  .ui-tooltip-region {
    display: block;
    width: 100%;
    height: 100%;
}

.ui-heat-cbtn[b-3c6baakmzt] {
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: transparent;
}

.ui-heat-c-present[b-3c6baakmzt] { background: var(--heat-present); }
.ui-heat-c-absent[b-3c6baakmzt] { background: var(--heat-absent); }
.ui-heat-c-leave[b-3c6baakmzt] { background: var(--heat-leave); }
.ui-heat-c-weekend[b-3c6baakmzt] { background: var(--heat-weekend); }
.ui-heat-c-holiday[b-3c6baakmzt] { background: var(--surface); }
.ui-heat-c-future[b-3c6baakmzt] { background: var(--surface); cursor: default; }

.ui-heat-c-dot[b-3c6baakmzt] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--heat-holiday-dot);
    height: var(--heat-holiday-dot);
    margin: calc(var(--heat-holiday-dot) / -2) 0 0 calc(var(--heat-holiday-dot) / -2);
    border-radius: var(--radius-pill);
    background: var(--neutral);
}

.ui-heat-c-fz[b-3c6baakmzt]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--heat-frozen);
}

.ui-heat-cbtn:hover[b-3c6baakmzt],
.ui-heat-cbtn:focus-visible[b-3c6baakmzt] {
    outline: var(--border-w) solid var(--accent);
    outline-offset: calc(var(--border-w) * -1);
}

/* ======================================================================================================
   FPL-001/REQ-038 (item #3636) — row 30's second mode: CONTENT cells (sheet 05 §2a, `.wall-content`), the caption under the name, and the page-focused row.
   Everything above is the states mode and is unchanged. The content cell's sizes (the sheet declares them as PROPOSED tokens `--heat-content-w` / `--heat-content-h`, "the owner finalizes") are each in ONE rule
   below: the cell is 64 px wide and 40 px CLEAR between two hairlines (a 41 px pitch) — the widest typed badge +
   2 x 4 px; two 16 px badges with 2 px between leave 3 px above and 3 px below; the name column's two lines (16 + 14) fit too. The component CLIPS NOTHING in a cell (overflow stays visible): content taller or
   wider than the box visibly disturbs the row, never disappears under a neighbour. A narrower box SCROLLS — `table { width: max-content }` above — and the cells never squeeze.
   ====================================================================================================== */
/* WIDTH, one rule: `--heat-content-w` (64 px = 2 x --cell). HEIGHT, one rule: `--heat-content-h` (the 41 px pitch = --row-h (40) + the hairline). Both are tokens now (sheet 05 §2a's PROPOSED pair, finalised by the owner, #3636 Q1). */
.ui-heat-wall-content .ui-heat-col-d[b-3c6baakmzt],
.ui-heat-wall-content .ui-heat-d[b-3c6baakmzt],
.ui-heat-wall-content .ui-heat-c[b-3c6baakmzt] {
    width: var(--heat-content-w);
}

/* The sheet's `*{box-sizing:border-box}`: the declared 64 x 41 INCLUDES the cell's hairline (found live: content-box cells measured 65 x 42, a 1 px error per column and per row that adds up across 14 columns).
   The header rows follow (band 22, day 32, name head 54 — the sheet's), and the day row therefore sticks at the band's height without the hairline. States mode keeps its own box model, unchanged. */
.ui-heat-wall-content th[b-3c6baakmzt],
.ui-heat-wall-content td[b-3c6baakmzt] {
    box-sizing: border-box;
}

.ui-heat-wall-content .ui-heat-d[b-3c6baakmzt] {
    top: var(--pill-h);
}

/* The three row additions (content mode only, so states mode's rules do not move). The trailing column is 7 cells wide in ONE rule (the lint pins the token count, so it is a calc on --cell, not a new token),
   scrolls with the days (not sticky sideways) and wraps its text. */
.ui-heat-wall-content .ui-heat-col-tr[b-3c6baakmzt],
.ui-heat-wall-content .ui-heat-tr[b-3c6baakmzt] {
    box-sizing: border-box;
    width: calc(var(--cell) * 7);
    white-space: normal;
}

.ui-heat-wall-content .ui-heat-tr[b-3c6baakmzt] {
    padding: 0 var(--space-8);
    vertical-align: middle;
    text-align: start;
    font-size: var(--fs-small);
    color: var(--text);
    background: var(--surface);
}

/* The trailing header spans both header rows as the name header does, stuck at the top with the same stacking as the other header cells. */
.ui-heat-wall-content .ui-heat-tr-head[b-3c6baakmzt] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--fill-1);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    text-align: start;
}

/* A seam row's one cell across the days: padded on the tokens, no width of its own (the colspan gives it the days' width). */
.ui-heat-wall-content .ui-heat-seam[b-3c6baakmzt] {
    padding: var(--space-4) var(--space-8);
    text-align: start;
    vertical-align: middle;
    background: var(--surface);
}

.ui-heat-wall-content tbody .ui-heat-c[b-3c6baakmzt],
.ui-heat-wall-content tbody .ui-heat-nm[b-3c6baakmzt] {
    height: var(--heat-content-h);
}

.ui-heat-wall-content .ui-heat-c[b-3c6baakmzt] {
    text-align: center;
    vertical-align: middle;
    overflow: visible;
}

/* The weekend tint comes from the day header (UiHeatDayHeader.IsWeekend), under the content; a blank weekday cell is the plain surface. No Future / Holiday drawing in content mode. */
.ui-heat-c-we[b-3c6baakmzt] {
    background: var(--heat-weekend);
}

/* The cell's one focusable box (a <button> when the host wired OnCellActivated, a plain <div tabindex> when not): it fills the cell, draws nothing of its own, and holds the host's content centred. */
.ui-heat-cx[b-3c6baakmzt] {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    overflow: visible;
}

/* An unwired content cell is not activatable: reachable by keyboard, shows its tooltip, no pointer cursor, a click does nothing. */
.ui-heat-cx-inert[b-3c6baakmzt] {
    cursor: default;
}

/* The keyboard ring is row 18's one ring (REQ-018) on one cell, raised above its neighbours so its 2 px are never overpainted by the next cell. */
.ui-heat-cx:focus-visible[b-3c6baakmzt] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: calc(var(--focus-w) * -1);
    z-index: 1;
}

/* The name column in content mode: two lines — the name (12 px) and, under it, the caption (11 px, muted) — each on ONE line ending in an ellipsis; the column keeps its width (164 px of text). The cell itself no
   longer clips (the name's tooltip bubble lives inside it); the two spans do the ellipsis. */
.ui-heat-wall-content .ui-heat-nm[b-3c6baakmzt] {
    overflow: visible;
    text-overflow: clip;
    vertical-align: middle;
    /* the base `.ui-heat-table td { padding: 0 }` outranks `.ui-heat-nm`'s own 8 px (found live: the name sat flush against the column's edge; the sheet has 8 px) */
    padding: 0 var(--space-8);
}

.ui-heat-nm[b-3c6baakmzt]  .ui-tooltip-region {
    display: block;
}

.ui-heat-nm-name[b-3c6baakmzt],
.ui-heat-nm-cap[b-3c6baakmzt] {
    display: block;
    max-width: calc(var(--heat-name-w) - var(--space-8) * 2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-heat-nm-name[b-3c6baakmzt] {
    line-height: var(--lh-small);
}

.ui-heat-nm-cap[b-3c6baakmzt] {
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-tight);
}

/* The focused row (FR-7), both modes: carried by LINES, never by a fill that would hide a cell's own fill (the weekend tint, a state colour) — an accent hairline above and below the whole row, drawn over the
   cells by a pseudo-element (a state-mode button fills its whole cell and would hide a shadow on the <td>), and on the (opaque, sticky) name cell the sheet's 3 px accent edge (--sel-edge-w) with the same hairlines.
   scroll-margin-top = the two sticky header rows' height, so a row scrolled to the top edge never lands under the stuck header. */
.ui-heat-row-focused[b-3c6baakmzt] {
    scroll-margin-top: calc(var(--pill-h) + var(--cell) + var(--border-w) * 2);
    /* `block: 'nearest'` from below parks the row's bottom edge ON the viewport's edge (found live: 0.14 px of it, its bottom hairline, outside); a little clear space keeps the whole row — hairline included — in view. */
    scroll-margin-bottom: var(--space-8);
}

.ui-heat-row-focused .ui-heat-c[b-3c6baakmzt]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow: inset 0 var(--border-w) 0 var(--accent), inset 0 calc(var(--border-w) * -1) 0 var(--accent);
}

.ui-heat-row-focused .ui-heat-nm[b-3c6baakmzt] {
    background: var(--accent-soft);
    box-shadow: inset var(--sel-edge-w) 0 0 var(--accent), inset 0 var(--border-w) 0 var(--accent), inset 0 calc(var(--border-w) * -1) 0 var(--accent);
}
/* frontend/Components/Ui/HorizontalBar/HorizontalBar.razor.rz.scp.css */
/* Catalogue row 68 (Horizontal ranked bar) — a genuinely different shape from the other five chart
   forms; does not compose ChartFrame at all. See HorizontalBar.razor's own header comment for
   exactly which parts of the shared base carry over. Matches 05-data-display.html's own
   `.gbar`/`.tr`/`.vl`/`.nm` verbatim, all values from already-declared tokens, none redeclared. */

/* Disclosed duplication: ChartFrame.razor.css's own `.ui-chart-note` rule, verbatim -- a single
   4-property rule, not worth a second shared-component extraction the way the head's own 3 rules
   were (see ChartHead.razor's own header comment for that extraction). */
.ui-chart-note[b-6fdnmh9dz0] {
    padding: var(--space-24) var(--cell-pad-x);
    color: var(--text-secondary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.ui-hbar-list[b-6fdnmh9dz0] {
    padding: var(--space-8) 0;
}

.ui-hbar-row[b-6fdnmh9dz0] {
    display: grid;
    grid-template-columns: var(--gbar-label-w) 1fr var(--gbar-value-w);
    align-items: center;
    gap: var(--space-12);
    min-height: var(--row-h-dense);
    padding: 0 var(--cell-pad-x);
    font-size: var(--fs-body);
}

.ui-hbar-row:hover[b-6fdnmh9dz0] {
    background: var(--fill-1);
}

/* A real bug found live: `.ui-hbar-name` measured its own content width (87px), not the 180px
   label column, despite sitting inside a CSS Grid cell. Root cause: it's wrapped in <Tooltip>,
   whose own `.ui-tooltip-region` (display:flex) IS the real grid item (correctly stretched to
   180px by Grid's own default), but a flex child's own main-axis size defaults to its CONTENT,
   not its container's width -- `.ui-hbar-name` never inherited the 180px on its own. `width:100%`
   makes it fill its flex parent, so the truncation properties below finally have something to
   truncate FROM. */
.ui-hbar-name[b-6fdnmh9dz0] {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-hbar-track[b-6fdnmh9dz0] {
    height: var(--gbar-h);
    background: var(--fill-1);
    border-radius: var(--space-2);
}

.ui-hbar-fill[b-6fdnmh9dz0] {
    display: block;
    height: 100%;
    background: var(--series-1);
    border-radius: var(--space-2);
}

.ui-hbar-track-zero[b-6fdnmh9dz0] {
    border: var(--border-w) dashed var(--line);
    background: none;
}

.ui-hbar-value[b-6fdnmh9dz0] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ui-hbar-footer[b-6fdnmh9dz0] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--cell-pad-x);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Ui/Icon/Icon.razor.rz.scp.css */
/* FPL-001/REQ-003, row 82 — Icon. Ours in CSS: size and colour only, never the glyph's own path
   data (that is the library's, see Icon.razor's own header). No `::deep` needed — the rendered
   <svg> is this component's own markup. */

/* box-sizing: border-box (REQ-003 Amended (15), the whole-branch pass's own standing rule) --
   declared with no border or padding of its own today, pinned for consistency with every other
   sized element in this catalogue rather than left to the browser's content-box default. */
.ui-icon[b-4v8v7e8vjx] {
    box-sizing: border-box;
    display: inline-block;
    flex: none;
    vertical-align: middle;
    color: inherit;
}
/* frontend/Components/Ui/IconButton/IconButton.razor.rz.scp.css */
/* FPL-001/REQ-003, row B2 — Icon button. Scoped to THIS component only via `.ui-icon-btn-wrap` (a
   plain <span> this component's own markup wraps its composition in) -- a CHILD COMPONENT's own
   root element never carries the parent's scope attribute, so ::deep needs a real HTML ancestor to
   scope from (the exact lesson Button.razor.css's own header already names). Every value is
   var(--token); no literal outside the allowances. */

.ui-icon-btn-wrap[b-9z7w5vuqkg] {
    display: contents;
}

/* True square: width AND height both pinned to the same control-h token (Button/B1's own CSS only
   pins min-height, since a labelled button's width is its own text) -- measured live, not assumed;
   see IconButton.md's own Live-verification for the bare-FluentButton-vs-wrapped comparison this
   rule exists to fix. */
/* min-height, not just height, on every rule below -- found live: the supplier's own shadow
   stylesheet carries its OWN internal min-height per size (measured: 40px at size=large), and
   `min-height` always wins over a competing `height` in the used-value box model regardless of
   which rule has higher specificity -- an explicit `height:36px` alone left Large measuring 36x40,
   not a square, until `min-height` was pinned here too. Small/Default happened to already measure
   correctly without this (the supplier's own internal min-height for those two is <= the target),
   but all three are pinned explicitly now so a future supplier default change can't silently break
   the square again. */
[b-9z7w5vuqkg] fluent-button.ui-icon-btn {
    width: var(--control-h);
    height: var(--control-h);
    min-width: var(--control-h);
    min-height: var(--control-h);
    padding: 0;
}

[b-9z7w5vuqkg] fluent-button.ui-icon-btn[size='small'] {
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    min-width: var(--control-h-sm);
    min-height: var(--control-h-sm);
}

[b-9z7w5vuqkg] fluent-button.ui-icon-btn[size='large'] {
    width: var(--control-h-lg);
    height: var(--control-h-lg);
    min-width: var(--control-h-lg);
    min-height: var(--control-h-lg);
}

/* The 16px icon, host-composed ChildContent -- ::deep from the start (item 18's own lesson,
   applied proactively): centred via the supplier's own flex layout, SIZE CONTRACT not a defect
   guard -- this rule pins width/height to --icon-sm regardless of what the host's own SVG declares,
   matching "icons stay 16px inside every control" (sheet's own words). Because this always wins,
   the live 16x16 measurement in IconButton.md proves this rule is applied, NOT that a host's own
   icon was already well-formed -- row 36/44's own 0x0 lesson is a reason to KEEP this rule pinned,
   not evidence this rule caught a live defect here. */
[b-9z7w5vuqkg] .ui-icon-btn svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
}

/* FPL-001/REQ-046 FR-2 (#3676): a glyph inside an IconButton draws in the button's OWN text colour in every state, for every intent. The supplier's own hover / active rule paints a slotted svg's `fill` its brand blue
   (measured live at the anchored commit 698cfcf23, Ghost intent: rgb(15,108,189) on hover, rgb(17,94,163) on active, against the button's --text) -- to a FILLED glyph (every row 82 glyph, and a host-composed `fill="currentColor"`
   svg) and also to a STROKED one (`fill="none"`: a pencil, a trash can, a bold B on the Ghost / Toggle intents were filled blue on hover). A class rule outranks the supplier's element rule (REQ-037's finding on the reveal control,
   where this rule was first written, scoped; that copy is gone). A filled glyph takes `currentColor`; a stroked one is kept `none`, so nothing is ever filled that was not drawn filled. No colour is written here. */
[b-9z7w5vuqkg] fluent-button.ui-icon-btn svg {
    fill: currentColor;
}

[b-9z7w5vuqkg] fluent-button.ui-icon-btn svg[fill="none"] {
    fill: none;
}

/* The focus ring leak -- identical fix to Button.razor.css's own (see its header comment for the
   full measured account): the shadow root exposes no part for the ring itself, so ::part() can't
   reach it; targeting the host tag directly, with !important, wins over the shadow :host(:focus-
   visible) rule. */
[b-9z7w5vuqkg] fluent-button.ui-icon-btn:focus-visible {
    box-shadow: none !important;
    outline: var(--focus-w) solid var(--accent) !important;
    outline-offset: var(--focus-offset) !important;
}

/* Toggle intent's "on" state -- the sheet's accent-soft fill, not a Fluent appearance. */
[b-9z7w5vuqkg] fluent-button.ui-icon-btn-toggle[aria-pressed='true'] {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Open intent -- link-styled, no border/fill. */
[b-9z7w5vuqkg] fluent-button.ui-icon-btn-open {
    background: none !important;
    border-color: transparent !important;
    color: var(--accent);
}

/* Dash intent -- dashed border, secondary text, accent on hover (Button/B1's own RepeatingRowEditor
   affordance -- included for parity, no icon-only consumer of it exists yet). */
[b-9z7w5vuqkg] fluent-button.ui-icon-btn-dash {
    border-style: dashed;
    border-color: var(--line);
    background: none !important;
    color: var(--text-secondary);
}

[b-9z7w5vuqkg] fluent-button.ui-icon-btn-dash:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Danger -- the sheet's own filled red (`.b-danger`), mirroring B1/Button.razor.css's own identical
   fix (remainder item 21, R4). NOT inherited from B1 automatically -- Blazor CSS isolation scopes
   per COMPONENT, so Button.razor.css's own rules never reach this component's `<fluent-button>` at
   all, regardless of matching class names; this is this component's own necessary copy, not dead
   duplication (disclosed here since the dispatch's own framing suggested this would come "for
   free" from fixing B1 alone -- it does not, and IconButton.md says so). */
[b-9z7w5vuqkg] fluent-button.ui-icon-btn-danger {
    background: var(--error) !important;
    border-color: transparent !important;
    color: var(--on-accent);
}

[b-9z7w5vuqkg] fluent-button.ui-icon-btn-danger:hover {
    background: var(--error-hover) !important;
}

[b-9z7w5vuqkg] fluent-button.ui-icon-btn-danger:active {
    background: var(--error-press) !important;
}

/* Danger-ghost -- transparent fill, error-coloured text and hover wash. */
[b-9z7w5vuqkg] fluent-button.ui-icon-btn-dangerghost {
    background: none !important;
    border-color: transparent !important;
    color: var(--error);
}

[b-9z7w5vuqkg] fluent-button.ui-icon-btn-dangerghost:hover {
    background: var(--error-bg) !important;
}

/* Disabled-with-reason -- no pointer-events:none (would also suppress :hover, breaking the reason
   tooltip's own hover half); interaction is blocked by the supplier's own disabled-focusable guard
   plus this component's own HandleClick guard, not by CSS -- identical reasoning to Button.razor.css. */
[b-9z7w5vuqkg] fluent-button.ui-icon-btn-off {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}
/* frontend/Components/Ui/InlineEdit/InlineEdit.razor.rz.scp.css */
/* FPL-001/REQ-059, catalogue row 47 — the inline-editing shell. Matches sheet 04-data-entry.html §9b's .kv / .kv-k / .kv-v /
   .kv-act / .ie-kv / .ie-err / .ie-cell / .ie-title, verbatim in value (140 key, 320 value, 58 action, 40 row — re-measured
   in Chrome at 1280x900; all declared tokens). Every value below is an already-declared token; nothing new is added. */

.ui-ie[b-3cepvxcr0y] {
    display: block;
}

.ui-ie:focus[b-3cepvxcr0y] {
    outline: none;
}

/* ---- the row placement ---- */
.ui-ie-row[b-3cepvxcr0y] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: calc(var(--space-8) * 4 + var(--edit-key-w) + var(--ui-ie-vw, var(--combo-w)) + var(--control-h-sm) * 2 + var(--space-2));
    min-height: var(--row-h);
    padding: 0 var(--space-8);
    border-radius: var(--radius);
}

/* At rest a value is plain text, nothing marked. The fill comes only when the pointer is over an editable row. */
.ui-ie-row:not(.ui-ie-ro):hover[b-3cepvxcr0y] {
    background: var(--fill-1);
}

.ui-ie-k[b-3cepvxcr0y] {
    width: var(--edit-key-w);
    flex: none;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-ie-v[b-3cepvxcr0y] {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* lets a list, a calendar or a tooltip drawn from the edit view out of the value column */
.ui-ie-v.ui-ie-open[b-3cepvxcr0y] {
    position: relative;
    overflow: visible;
}

.ui-ie-edit[b-3cepvxcr0y] {
    display: block;
}

.ui-ie-edit:focus[b-3cepvxcr0y] {
    outline: none;
}

.ui-ie-vtxt[b-3cepvxcr0y] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-ie-none[b-3cepvxcr0y] {
    color: var(--text-secondary);
}

/* ---- the action column: fixed width, so every moment occupies the same rectangle ---- */
.ui-ie-act[b-3cepvxcr0y] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    width: calc(var(--control-h-sm) * 2 + var(--space-2));
    justify-content: flex-end;
    opacity: 0;
}

/* The pencil comes with the pointer on the row, and with the keyboard (it is a permanent tab stop; focus has no hover).
   Edit, saving and saved are always visible (.ui-ie-shown). */
.ui-ie-row:not(.ui-ie-ro):hover .ui-ie-act[b-3cepvxcr0y],
.ui-ie-row:not(.ui-ie-ro):focus-within .ui-ie-act[b-3cepvxcr0y],
.ui-ie-shown .ui-ie-act[b-3cepvxcr0y] {
    opacity: 1;
}

.ui-ie-icbtn[b-3cepvxcr0y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    flex: none;
    padding: 0;
    border-radius: var(--radius);
    background: none;
    border: none;
    color: var(--text-secondary);
    transition: background var(--motion-micro) var(--ease);
}

.ui-ie-icbtn:hover[b-3cepvxcr0y] {
    background: var(--fill-1);
    color: var(--text);
}

/* The layer's one focus ring, outset (REQ-018). */
.ui-ie-icbtn:focus-visible[b-3cepvxcr0y] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-ie-ok[b-3cepvxcr0y] {
    color: var(--ok);
}

.ui-ie-ic[b-3cepvxcr0y] {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.ui-ie-ic-sm[b-3cepvxcr0y] {
    width: var(--space-12);
    height: var(--space-12);
}

/* The saving ring is the layer's shared one (wwwroot/css/ring.css, drawn through <Ring />); .ui-ie-spinner is only this component's hook. */

.ui-ie-done[b-3cepvxcr0y] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--ok);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
}

/* ---- the message line: a sibling BLOCK under the row (never inside the value column, which would clip it) ---- */
.ui-ie-msg[b-3cepvxcr0y] {
    box-sizing: border-box;
    width: calc(var(--space-8) * 4 + var(--edit-key-w) + var(--ui-ie-vw, var(--combo-w)) + var(--control-h-sm) * 2 + var(--space-2));
    padding: 0 calc(var(--space-8) * 2 + var(--control-h-sm) * 2 + var(--space-2)) var(--space-8) calc(var(--edit-key-w) + var(--space-16));
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-ie-bad[b-3cepvxcr0y] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    color: var(--error);
}

.ui-ie-bad .ui-ie-ic-sm[b-3cepvxcr0y] {
    flex: none;
    margin-top: var(--space-2);
}

.ui-ie-code[b-3cepvxcr0y] {
    font-family: var(--font-mono);
}

.ui-ie-reason[b-3cepvxcr0y] {
    display: block;
    color: var(--text-secondary);
}

/* ---- the bare placement: a table cell — the value and its actions, no label ---- */
.ui-ie-bare .ui-ie-row[b-3cepvxcr0y] {
    width: auto;
    min-height: 0;
    padding: 0;
}

.ui-ie-bare .ui-ie-msg[b-3cepvxcr0y] {
    width: auto;
    padding: 0 0 var(--space-8) 0;
}

/* ---- the title placement: a fixed 360 px box carrying the title's type; the pencil at the box's right end ---- */
.ui-ie-title .ui-ie-row[b-3cepvxcr0y] {
    width: auto;
    min-height: var(--control-h-lg);
    padding: 0;
}

.ui-ie-title .ui-ie-row:not(.ui-ie-ro):hover[b-3cepvxcr0y] {
    background: transparent;
}

.ui-ie-title .ui-ie-v[b-3cepvxcr0y] {
    flex: none;
    width: var(--edit-w);
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-semibold);
}

.ui-ie-title .ui-ie-msg[b-3cepvxcr0y] {
    width: auto;
    padding: 0 0 var(--space-8) 0;
}

/* ---- a taller row (multi-line content, the editor says so with Tall): top-aligned, the key and the actions on the FIRST line, exactly where a 40 px row puts them ---- */
.ui-ie-tall[b-3cepvxcr0y] {
    align-items: flex-start;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.ui-ie-tall .ui-ie-k[b-3cepvxcr0y] {
    margin-top: var(--space-8);
}

.ui-ie-tall .ui-ie-act[b-3cepvxcr0y] {
    margin-top: var(--space-2);
}

/* a long read value wraps and keeps its line breaks; never cut with an ellipsis */
.ui-ie-v.ui-ie-wrap[b-3cepvxcr0y] {
    white-space: pre-line;
    overflow: visible;
    padding: var(--textarea-pad-y) 0;
}

.ui-ie-wrap .ui-ie-vtxt[b-3cepvxcr0y] {
    overflow: visible;
    text-overflow: clip;
}

/* ---- below the layer's one narrow width (STD:frontend/page-layouts rule 6): the label goes above the value ----
   W:layer-rows-stack-when-narrow/TD-1. The key takes the first line; the value and its actions share the second. Desktop
   (900 px and wider) is untouched. The bare and title placements keep their own rules (no key / their own width). */
@media (max-width: 899.98px) {
    .ui-ie-row[b-3cepvxcr0y] {
        width: 100%;
        flex-wrap: wrap;
        align-content: center;
        row-gap: 0;
    }

    .ui-ie-k[b-3cepvxcr0y] {
        width: 100%;
    }

    .ui-ie-v[b-3cepvxcr0y] {
        min-width: 0;
    }

    .ui-ie-msg[b-3cepvxcr0y] {
        width: 100%;
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }

    .ui-ie-title .ui-ie-v[b-3cepvxcr0y] {
        max-width: 100%;
    }

    /* the key has a line to itself, so the offset that lined it up with a 40 px first line goes */
    .ui-ie-tall .ui-ie-k[b-3cepvxcr0y] {
        margin-top: 0;
    }
}
/* frontend/Components/Ui/InlineEdit/InlineEditDateTime.razor.rz.scp.css */
/* FPL-001/REQ-059 — the date-and-time editor: the date field and the time field side by side in the value column (sheet 04 §9b, part 8). */
.ui-iedt[b-pp5p59vsdu] {
    display: flex;
    gap: var(--space-8);
}

.ui-iedt-part[b-pp5p59vsdu] {
    flex: 1 1 0;
    min-width: 0;
}
/* frontend/Components/Ui/InlineEdit/InlineEditPerson.razor.rz.scp.css */
/* FPL-001/REQ-059 — the person editor's read view: a small avatar and the name as plain text (sheet 04 §9b .ie-person). */
.ui-iep[b-uzb3zn1d33] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}

.ui-iep-n[b-uzb3zn1d33] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* frontend/Components/Ui/InlineEdit/InlineEditText.razor.rz.scp.css */
/* FPL-001/REQ-059 — the text editor's own look: the title placement's input (sheet 04 §9b Part 3 ii, .in.ie-in-lg): the Large size
   (36 px, --control-h-lg) carrying the title's type; "nothing jumps" — the input's text starts where the title's text starts (the input's
   frame reaches out to its left by its own padding and border), and ✓ ✕ take the pencil's place. */
.ui-iet[b-1u1f9i1nsz] {
    display: block;
}

.ui-iet-title[b-1u1f9i1nsz]  .ui-in {
    flex: none;
    width: calc(var(--edit-w) + var(--input-pad-x) + var(--border-w));
    margin-left: calc(-1 * (var(--input-pad-x) + var(--border-w)));
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-semibold);
}

/* Below the layer's one narrow width the title input never outgrows its row (W:layer-rows-stack-when-narrow/TD-1). */
@media (max-width: 899.98px) {
    .ui-iet-title[b-1u1f9i1nsz]  .ui-in {
        max-width: 100%;
    }
}
/* frontend/Components/Ui/Kv/Kv.razor.rz.scp.css */
/* FPL-001/REQ-003, row 21 — Key-value list (the 2-column container). Ours in CSS AND markup. No
   `::deep` needed: CSS grid places ANY direct DOM child (regardless of which component wrote it)
   into the column template — KvRow's own dt/dd children fall into place with no scope-crossing
   selector required, since this rule targets no descendant, only this element's own grid layout. */

.ui-kv[b-1ty3n7bfp3] {
    display: grid;
    grid-template-columns: var(--kv-label-w) 1fr;
    gap: var(--space-8) var(--space-16);
    align-items: baseline;
}

/* Below the layer's one narrow width (STD:frontend/page-layouts rule 6) the label sits above the value, full width
   (W:layer-rows-stack-when-narrow/TD-1). Desktop is untouched. */
@media (max-width: 899.98px) {
    .ui-kv[b-1ty3n7bfp3] {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-4);
    }
}
/* frontend/Components/Ui/Kv/KvInline.razor.rz.scp.css */
/* FPL-001/REQ-003, row 21 — the inline "Label: value" variant. Ours in CSS AND markup. `b` is this
   component's own element (not caller content), so it needs no `::deep`. */

.ui-kv-inline[b-2ekjg0wy0u] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-kv-inline b[b-2ekjg0wy0u] {
    color: var(--text);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
}

.ui-kv-inline b.ui-kv-inline-missing[b-2ekjg0wy0u] {
    color: var(--text-secondary);
}
/* frontend/Components/Ui/Kv/KvRow.razor.rz.scp.css */
/* FPL-001/REQ-003, row 21 — one label/value pair. Ours in CSS AND markup. `dt`/`dd` are this
   component's OWN elements (not caller content) so they need no `::deep`; the value's own base
   colour is explicit here rather than left to inheritance -- List's ui-lrow-txt leaked the legacy
   shell's ambient grey by skipping exactly this (see List.md), not repeating that here. `::deep a`
   IS needed: a link value is the caller's own <a> inside ChildContent. */

dt[b-e6zsy6nbkh] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

dd[b-e6zsy6nbkh] {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    min-width: 0;
    color: var(--text);
}

dd[b-e6zsy6nbkh]  a {
    color: var(--accent);
}

.ui-kv-missing[b-e6zsy6nbkh] {
    color: var(--text-secondary);
}

/* Below the layer's one narrow width a control in the value (a 240 px Select, a stepper) never outgrows the stacked,
   full-width value column (W:layer-rows-stack-when-narrow/TD-1). */
@media (max-width: 899.98px) {
    dd[b-e6zsy6nbkh]  > * {
        max-width: 100%;
    }

    /* the label hugs its own value; the pairs stay apart */
    dd[b-e6zsy6nbkh] {
        margin-bottom: var(--space-12);
    }
}
/* frontend/Components/Ui/Legend/Legend.razor.rz.scp.css */
/* FPL-001/REQ-003, row 32 — Legend. Ours in CSS AND markup. No `::deep` needed: every element below
   is this component's own markup, nothing is caller-composed ChildContent. Every text element sets
   its own explicit colour from a token (the row-20/List leak class — no new-layer component depends
   on ambient inheritance for colour, font family, size or line-height). */

.ui-legend[b-bgt20ehlk3] {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    flex-wrap: wrap;
    padding: var(--space-8) var(--cell-pad-x);   /* FPL-001/REQ-038 FR-10b (iii): the sheet's own legend inset, 12 px left and right, on every host */
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ui-legend-item[b-bgt20ehlk3] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: default;
}

button.ui-legend-item[b-bgt20ehlk3] {
    cursor: pointer;
}

button.ui-legend-item:hover:not(.ui-legend-item-locked)[b-bgt20ehlk3] {
    color: var(--text);
}

/* FPL-001/REQ-018 (item 49) FR-1(a): drew the browser's default outline — outset, the layer's default. */
button.ui-legend-item:focus-visible[b-bgt20ehlk3] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

/* Last-remaining-on item: aria-disabled, not the native `disabled` attribute (UI-LAYER.md §16) --
   `:disabled` no longer matches, so the dimmed look is this explicit class instead. */
.ui-legend-item-locked[b-bgt20ehlk3] {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

/* box-sizing: border-box (whole-branch pass) -- declared 10x10 + this rule's own 1px border
   rendered 12x12 live. Used by every consumer of this shared legend (chart rows 65-69, HeatGrid). */
.ui-legend-sw[b-bgt20ehlk3] {
    box-sizing: border-box;
    width: var(--swatch);
    height: var(--swatch);
    flex: none;
    border-radius: var(--space-2);
    border: var(--border-w) solid var(--line);
}

.ui-legend-item-off[b-bgt20ehlk3] {
    color: var(--placeholder);
    text-decoration: line-through;
}

.ui-legend-item-off .ui-legend-sw[b-bgt20ehlk3] {
    opacity: var(--disabled-opacity);
}

.ui-legend-item-s1 .ui-legend-sw[b-bgt20ehlk3] { background: var(--series-1); }
.ui-legend-item-s2 .ui-legend-sw[b-bgt20ehlk3] { background: var(--series-2); }
.ui-legend-item-s3 .ui-legend-sw[b-bgt20ehlk3] { background: var(--series-3); }
.ui-legend-item-s4 .ui-legend-sw[b-bgt20ehlk3] { background: var(--series-4); }
.ui-legend-item-s5 .ui-legend-sw[b-bgt20ehlk3] { background: var(--series-5); }
.ui-legend-item-s6 .ui-legend-sw[b-bgt20ehlk3] { background: var(--series-6); }
.ui-legend-item-s7 .ui-legend-sw[b-bgt20ehlk3] { background: var(--series-7); }
.ui-legend-item-s8 .ui-legend-sw[b-bgt20ehlk3] { background: var(--series-8); }
.ui-legend-item-s9 .ui-legend-sw[b-bgt20ehlk3] { background: var(--series-9); } /* slate — "Other", always last */

/* Row 30's own tokens (planner ruling 2026-09-19: heat grid composes this component, "one shape
   means one component" — see Legend.razor's own header comment). */
.ui-legend-item-heat-present .ui-legend-sw[b-bgt20ehlk3] { background: var(--heat-present); }
.ui-legend-item-heat-absent .ui-legend-sw[b-bgt20ehlk3] { background: var(--heat-absent); }
.ui-legend-item-heat-leave .ui-legend-sw[b-bgt20ehlk3] { background: var(--heat-leave); }
.ui-legend-item-heat-weekend .ui-legend-sw[b-bgt20ehlk3] { background: var(--heat-weekend); }

/* Blank: a plain, uncoloured swatch (just --surface + the swatch's own border) -- the sheet's own
   shape for a legend item whose meaning isn't a colour (row 30's "Holiday (dot)"/"Not yet"). No
   rule needed beyond .ui-legend-sw's own default -- listed here only so the mapping is complete
   and self-documenting, not left as a silent "falls through to nothing". */
.ui-legend-item-blank .ui-legend-sw[b-bgt20ehlk3] { background: var(--surface); }

/* FPL-001/REQ-038 FR-6 (item #3636): a mark entry — a row 82 icon or a word of at most four characters — sits where the swatch sits and keeps the swatch's footprint, so mark and swatch entries align down
   the legend. The footprint is ONE rule (`min-width` / `height` below): the slot is `--swatch` tall and at least `--swatch` wide, widening only to fit a word. The icon is drawn at
   `--icon-sm` and centred in the slot (overflow visible, never clipped); the word is the legend's own caption-size text. The mark's colour is the legend's (`--text-secondary`), so an icon's fill is
   `currentColor` (no supplier hover colour can reach it: nothing here is a supplier control). */
.ui-legend-mk[b-bgt20ehlk3] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: var(--swatch);
    height: var(--swatch);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-tight);
    white-space: nowrap;
}

.ui-legend-mk-icon[b-bgt20ehlk3]  svg.ui-icon {
    flex: none;
    fill: currentColor;
}


/* The word mark's styles — the legend's mark must look like the mark in the cell it explains (sheet 05 §2a, read from its CSS, tokens only). Plain (the default) has no extra rule. */

/* `.cx-open`: the word "open" — secondary text, caption size, italic. */
.ui-legend-mk-italic[b-bgt20ehlk3] {
    height: var(--lh-caption);   /* the word's own line box (16 px) — the slot no longer overflows by 6 px (measured live); the entry stays 20 px high */
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    font-style: italic;
}

/* `.hbadge-more`: the "+N" summary chip — the badge's own box (16 px high, 4 px side padding, hairline, 2 px radius) on `--fill-1`, secondary text 500; its height replaces the slot's swatch height. */
.ui-legend-mk-chip[b-bgt20ehlk3] {
    height: var(--badge);
    padding: 0 var(--space-4);
    background: var(--fill-1);
    border: var(--border-w) solid var(--line);
    border-radius: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-tight);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
}
/* frontend/Components/Ui/Lightbox/Lightbox.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 63 — Lightbox / slideshow. Matches `06-overlays.html`'s own
   `.lb`/`.lb-bar`/`.lb-who`/`.lb-count`/`.lb-btn`/`.lb-btn.is-off`/`.lb-stage`/`.lb-arrow`
   (lines 628-646) and `.lb-film`/`.lb-thumb` (662-670) verbatim where the shape is real product
   structure, not the mockup's own wireframe-placeholder-for-an-image technique (see Lightbox.razor's
   own header comment). Every value is var(--token); no literal outside the allowances. */

/* The mount -- see Lightbox.razor's own header comment for why Dialog (17) is composed for its
   mechanism, not its default look, and why every property here carries !important: Dialog's own
   `.ui-dlg` is unconditional, but its own @media(max-width:900px) block sets width/max-width too --
   at equal specificity a later same-specificity rule wins by source order, which this file cannot
   control across a component-library boundary (item 21's own R4 lesson: min-height beat height the
   same way). Measured live at 1280 AND 960 that this override wins at both. */
[b-0gbjlgf3qm] dialog.ui-dlg {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    inset: 0 !important;
    background: var(--lightbox-bg) !important;
    box-shadow: none !important;
    z-index: var(--z-lightbox) !important;
}

[b-0gbjlgf3qm] .ui-dlg-body {
    padding: 0;
    height: 100%;
    color: var(--on-dark);
}

.ui-lb[b-0gbjlgf3qm] {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--on-dark);
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app; this
   rule's own declared height plus its own border-bottom would otherwise stack under the browser's
   content-box default, rendering taller than --lightbox-bar-h. */
.ui-lb-bar[b-0gbjlgf3qm] {
    box-sizing: border-box;
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-12);
    height: var(--lightbox-bar-h);
    padding: 0 var(--lightbox-pad);
    border-bottom: var(--border-w) solid var(--on-dark-line);
    font-size: var(--fs-body);
}

.ui-lb-who[b-0gbjlgf3qm] {
    color: var(--on-dark-strong);
    font-weight: var(--fw-medium);
}

.ui-lb-count[b-0gbjlgf3qm] {
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
}

.ui-lb-spacer[b-0gbjlgf3qm] {
    flex: 1;
}

.ui-lb-ic[b-0gbjlgf3qm] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
}

.ui-lb-stage[b-0gbjlgf3qm] {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--lightbox-pad);
}

.ui-lb-shot[b-0gbjlgf3qm] {
    height: 100%;
    aspect-ratio: var(--shot-ratio);
    max-width: 100%;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* R7 (item 24 read-back): "fit to the viewport, never upscaled past its natural size" -- width:100%/
   height:100% + object-fit:contain (the previous rule) lets `contain` UPSCALE a small image to fill
   the frame, which the sheet forbids. width/height:auto + max-width/max-height:100% is the standard
   never-upscale-only-shrink pattern: a small image renders at its own natural size (both are
   `auto`), a large one shrinks to fit both constraints while keeping its own aspect ratio (the
   browser's own replaced-element sizing algorithm, not something this rule computes by hand);
   `.ui-lb-shot`'s own existing flex centering does the rest. */
.ui-lb-img[b-0gbjlgf3qm] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    background: var(--surface);
}

/* Prev/next -- 40px (--lightbox-arrow/--touch-target), IconButton's own three sizes are 28/32/36,
   none is 40 -- overridden via ::deep reaching THROUGH the wrapper span (a descendant selector),
   not a new size added to IconButton itself. Item 21's own lesson applied from the start: width,
   height, min-width AND min-height all pinned together. */
.ui-lb-arrow-wrap[b-0gbjlgf3qm] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.ui-lb-arrow-prev[b-0gbjlgf3qm] {
    left: var(--space-8);
}

.ui-lb-arrow-next[b-0gbjlgf3qm] {
    right: var(--space-8);
}

[b-0gbjlgf3qm] .ui-lb-arrow-wrap fluent-button.ui-icon-btn {
    width: var(--lightbox-arrow) !important;
    height: var(--lightbox-arrow) !important;
    min-width: var(--lightbox-arrow) !important;
    min-height: var(--lightbox-arrow) !important;
}

/* On-dark recolouring for every composed control -- ::deep reaches into Button/IconButton's own
   rendered <fluent-button> regardless of which component rendered it (item 18's own lesson). */
[b-0gbjlgf3qm] .ui-lb fluent-button.ui-btn,
[b-0gbjlgf3qm] .ui-lb fluent-button.ui-icon-btn {
    color: var(--on-dark);
    background: none !important;
    border-color: transparent !important;
}

[b-0gbjlgf3qm] .ui-lb fluent-button.ui-btn:hover,
[b-0gbjlgf3qm] .ui-lb fluent-button.ui-icon-btn:hover {
    background: var(--on-dark-fill) !important;
    color: var(--on-dark-strong) !important;
}

[b-0gbjlgf3qm] .ui-lb fluent-button.ui-icon-btn-off {
    opacity: var(--disabled-opacity);
}

/* The skeleton, on-dark. The sheet's own `.skel.on-dark{--skel-bg:...;--skel-sheen:...}` locally
   REDEFINES those two tokens -- this layer's own TOKEN_REDEFINED_OUTSIDE_LAYER check forbids that
   (tokens.css is the one place a token's value is declared), so the shimmer gradient's own two
   colours are overridden directly instead, reusing the EXISTING --on-dark-fill/--on-dark-line pair
   rather than a skeleton-specific literal or a redefined token -- a deliberate, disclosed
   simplification (slightly different opacities than the sheet's own dedicated on-dark skeleton
   values), not a redefinition this layer's own build would fail on. */
[b-0gbjlgf3qm] .ui-lb .ui-skel {
    background-image: linear-gradient(90deg, var(--on-dark-fill), var(--on-dark-line), var(--on-dark-fill));
}

/* The named error, on-dark -- the sheet's own `.seam.on-dark` override, matching verbatim. */
[b-0gbjlgf3qm] .ui-lb .ui-seam {
    background: transparent;
    border-color: var(--error-on-dark);
    color: var(--on-dark);
}

[b-0gbjlgf3qm] .ui-lb .ui-seam-ic,
[b-0gbjlgf3qm] .ui-lb .ui-seam-t {
    color: var(--error-on-dark);
}

.ui-lb-caption[b-0gbjlgf3qm] {
    flex: none;
    padding: var(--space-8) var(--lightbox-pad);
    color: var(--on-dark);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-lb-play[b-0gbjlgf3qm] {
    display: contents;
}

.ui-lb-film[b-0gbjlgf3qm] {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--lightbox-pad);
    border-top: var(--border-w) solid var(--on-dark-line);
    overflow-x: auto;
}

.ui-lb-slideshow-note[b-0gbjlgf3qm] {
    flex: none;
    margin-left: auto;
    color: var(--on-dark);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    white-space: nowrap;
}

/* The filmstrip, on-dark -- Filmstrip (34) renders its own `.ui-fs-thumb-btn` etc.; recoloured the
   same ::deep way, matching the sheet's own on-dark thumb fill/selection colours. */
[b-0gbjlgf3qm] .ui-lb-film .ui-fs-thumb-btn {
    background: var(--on-dark-fill);
    color: var(--on-dark);
}

[b-0gbjlgf3qm] .ui-lb-film .ui-fs-thumb.is-selected .ui-fs-thumb-btn {
    border-color: var(--accent);
}

[b-0gbjlgf3qm] .ui-lb-film .ui-fs-unavailable {
    color: var(--error-on-dark);
    border-color: var(--error-on-dark);
}
/* frontend/Components/Ui/Lightbox/PdfOverlay.razor.rz.scp.css */
/* W:document-strip-and-pdf-panel/T-01 -- PdfOverlay: a large panel (the window less --lightbox-pad on each side) over Dialog's own
   --scrim dim. Every value is var(--token). Like Lightbox.razor.css, each sizing property carries !important: Dialog's own
   `.ui-dlg` @media(max-width:900px) block sets width/max-width at equal specificity and a library boundary hides source order. */
[b-as3i7evuyo] dialog.ui-dlg {
    width: calc(100vw - var(--lightbox-pad) * 2) !important;
    height: calc(100vh - var(--lightbox-pad) * 2) !important;
    max-width: calc(100vw - var(--lightbox-pad) * 2) !important;
    max-height: calc(100vh - var(--lightbox-pad) * 2) !important;
    margin: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
}

[b-as3i7evuyo] .ui-dlg-body {
    padding: 0;
    height: 100%;
}

/* Below 900 px the panel fills the window. */
@media (max-width: 900px) {
    [b-as3i7evuyo] dialog.ui-dlg {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        inset: 0 !important;
    }
}

.ui-pdf[b-as3i7evuyo] {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--text);
}

.ui-pdf-bar[b-as3i7evuyo] {
    box-sizing: border-box;
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-12);
    height: var(--lightbox-bar-h);
    padding: 0 var(--space-16);
    border-bottom: var(--border-w) solid var(--line);
    font-size: var(--fs-body);
}

.ui-pdf-name[b-as3i7evuyo] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text);
    font-weight: var(--fw-medium);
}

.ui-pdf-spacer[b-as3i7evuyo] {
    flex: 1;
}

.ui-pdf-body[b-as3i7evuyo] {
    flex: 1;
    min-height: 0;
    display: flex;
}

.ui-pdf-frame[b-as3i7evuyo] {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    background: var(--surface);
}

.ui-pdf-fallback[b-as3i7evuyo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-12);
    padding: var(--space-24);
    text-align: center;
}

.ui-pdf-fallback-name[b-as3i7evuyo] {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: var(--fw-medium);
}

.ui-pdf-fallback-text[b-as3i7evuyo] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}
/* frontend/Components/Ui/List/List.razor.rz.scp.css */
/* FPL-001/REQ-003, row 20 — List (the container). Ours in CSS AND markup. No `::deep` needed here
   — the empty-state text is this file's own markup, not caller-supplied. */

.ui-list-empty[b-awrt9z3s8x] {
    padding: var(--space-16) var(--cell-pad-x);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}
/* frontend/Components/Ui/List/ListRow.razor.rz.scp.css */
/* FPL-001/REQ-003, row 20 — List's own row primitive. Ours in CSS AND markup. `::deep` is required
   on every selector reaching a caller-composed child (ui-lrow-txt/ui-lrow-age/ui-lrow-act) — that
   markup renders under the CALLER's own CSS-isolation scope attribute, not this file's, same shape
   as Grid's --ui-in-cell-inset cross-component contract (see Grid.md). */

.ui-lrow[b-jot1fve6z8] {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    min-height: var(--row-h);
    padding: 0 var(--cell-pad-x);
    border-bottom: var(--border-w) solid var(--line);
}

.ui-lrow:last-child[b-jot1fve6z8] {
    border-bottom: 0;
}

.ui-lrow:hover[b-jot1fve6z8] {
    background: var(--fill-1);
}

.ui-lrow-dense[b-jot1fve6z8] {
    min-height: var(--row-h-dense);
}

.ui-unread-dot[b-jot1fve6z8] {
    width: var(--space-8);
    height: var(--space-8);
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

.ui-lrow[b-jot1fve6z8]  .ui-lrow-txt {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.ui-lrow-unread[b-jot1fve6z8]  .ui-lrow-txt {
    font-weight: var(--fw-semibold);
}

.ui-lrow-acted[b-jot1fve6z8]  .ui-lrow-txt {
    color: var(--text-secondary);
}

.ui-lrow[b-jot1fve6z8]  .ui-lrow-age {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    white-space: nowrap;
    flex: none;
}

.ui-lrow[b-jot1fve6z8]  .ui-lrow-act {
    display: flex;
    gap: var(--space-2);
    flex: none;
    visibility: hidden;
}

.ui-lrow:hover[b-jot1fve6z8]  .ui-lrow-act {
    visibility: visible;
}

@media (hover: none) {
    .ui-lrow[b-jot1fve6z8]  .ui-lrow-act {
        visibility: visible;
    }
}
/* frontend/Components/Ui/MentionPicker/MentionPicker.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 53 — MentionPicker is a STUB (see CATALOGUE.md): it renders nothing
   of its own, only the shared Stub/NamedError markup, which owns every rule that shape needs — no
   rule needed here. File exists to satisfy FR-1's one-folder-three-files rule. */
/* frontend/Components/Ui/Menu/Menu.razor.rz.scp.css */
/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app; this
   rule's own declared min-width plus its own padding and border would otherwise stack under the
   browser's content-box default, rendering wider than --menu-col-w. */
.ui-menu[b-2juqu6v1o5] {
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    z-index: var(--z-menu);
    margin-top: var(--space-4);
    min-width: var(--menu-col-w);
    padding: var(--menu-pad);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-overlay);
    text-align: left;
    /* white-space inherits: a popup drawn inside a Grid cell (nowrap) must not inherit it (PopupWhiteSpaceTests) */
    white-space: normal;
    display: flex;
    flex-direction: column;
}

.ui-menu-right[b-2juqu6v1o5] {
    right: 0;
}

.ui-menu-left[b-2juqu6v1o5] {
    left: 0;
}

/* FPL-001/REQ-043: placement. MEASURING — a real host's popup is rendered first at its below position, hidden (`visibility` keeps its layout box), so its natural height can be read; it shows once placed. */
.ui-menu.ui-menu-measuring[b-2juqu6v1o5] {
    visibility: hidden;
}

/* ABOVE — the same edge (`Align`), the same width, the same contents in the same order (the search box stays first; nothing is mirrored), the same `--space-4` gap, on the trigger's other side. */
.ui-menu.ui-menu-above[b-2juqu6v1o5] {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--space-4);
}

/* FLOATING — in the browser's top layer (row 39's mechanism, `selectFloating.js openAligned`, which sets `popover` and the inline top / left). The UA's `[popover]` defaults (`inset: 0; margin: auto;
   overflow: auto; position: fixed`) are reset exactly as Select's `.ui-menu-float` does (that rule is scoped to Select's own markup and cannot be shared). The list scrolls at the height Menu.razor sets. */
.ui-menu.ui-menu-float[b-2juqu6v1o5] {
    position: fixed;
    inset: auto;
    margin: 0;
    overflow: visible;
}

.ui-menu-search[b-2juqu6v1o5] {
    width: 100%;
    height: var(--control-h-sm);
    margin-bottom: var(--space-4);
    padding: 0 var(--space-8);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    font-size: var(--fs-body);
    box-sizing: border-box;
    flex-shrink: 0;
}

/* FPL-001/REQ-018 (item 49) FR-1(a): drew the browser's default outline — outset, the layer's default. This
   element sits OUTSIDE `.ui-menu-scroll` (fixed, per this file's own header comment), so it is not clipped. */
.ui-menu-search:focus-visible[b-2juqu6v1o5] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-menu-scroll[b-2juqu6v1o5] {
    max-height: calc(var(--control-h) * 6);
    overflow-y: auto;
}

/* FPL-001/REQ-051 FR-3 (#3684): the thin thumb -- sheet 02 `#proposed-2026-10-05` item 2 A (`.pp-thumb-a`): 6 px wide (--space-4 + --space-2), --placeholder, fully rounded, NO track, no arrows; nothing of the browser's own
   scrollbar shows. `scrollbar-gutter: stable` reserves the 6 px whether or not the list overflows, so an item is the same width in both and the thumb never moves the text; the thumb itself exists only while the list overflows.
   Chromium and Safari draw it through the `::-webkit-scrollbar` family. Firefox has none of that family: under the @supports below it gets its own thinnest scrollbar (`scrollbar-width: thin`, the same colour, a transparent
   track) -- named in the report. The standard properties are set (to anything but `auto`) ONLY there: Chrome >= 121 ignores `::-webkit-scrollbar` on an element that sets `scrollbar-width`. */
.ui-menu-scroll[b-2juqu6v1o5] {
    scrollbar-gutter: stable;
    /* the legacy MudBlazor stylesheet sets `scrollbar-width: thin` on `html, body *`; Chrome >= 121 ignores ::-webkit-scrollbar on any element whose scrollbar-width is not auto -- take it back for this list */
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.ui-menu-scroll[b-2juqu6v1o5]::-webkit-scrollbar {
    width: calc(var(--space-4) + var(--space-2));
    background: transparent;
}

.ui-menu-scroll[b-2juqu6v1o5]::-webkit-scrollbar-track,
.ui-menu-scroll[b-2juqu6v1o5]::-webkit-scrollbar-corner {
    background: transparent;
}

.ui-menu-scroll[b-2juqu6v1o5]::-webkit-scrollbar-button {
    display: none;
}

.ui-menu-scroll[b-2juqu6v1o5]::-webkit-scrollbar-thumb {
    background: var(--placeholder);
    border-radius: var(--radius-pill);
}

@supports not selector(::-webkit-scrollbar) {
    .ui-menu-scroll[b-2juqu6v1o5] {
        scrollbar-width: thin;
        scrollbar-color: var(--placeholder) transparent;
    }
}

/* The submenu column (`.ui-menu-sub`, a parent row's children, built on dev by another board) scrolls at the same six rows and wears the same thumb, written out again here so the list's own rules above stay exactly as REQ-051 pinned them. */
.ui-menu-sub[b-2juqu6v1o5] {
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.ui-menu-sub[b-2juqu6v1o5]::-webkit-scrollbar {
    width: calc(var(--space-4) + var(--space-2));
    background: transparent;
}

.ui-menu-sub[b-2juqu6v1o5]::-webkit-scrollbar-track,
.ui-menu-sub[b-2juqu6v1o5]::-webkit-scrollbar-corner {
    background: transparent;
}

.ui-menu-sub[b-2juqu6v1o5]::-webkit-scrollbar-button {
    display: none;
}

.ui-menu-sub[b-2juqu6v1o5]::-webkit-scrollbar-thumb {
    background: var(--placeholder);
    border-radius: var(--radius-pill);
}

@supports not selector(::-webkit-scrollbar) {
    .ui-menu-sub[b-2juqu6v1o5] {
        scrollbar-width: thin;
        scrollbar-color: var(--placeholder) transparent;
    }
}

/* border-box: a row is a <button> (border-box by the browser's default) or, with an Href, an <a> (content-box by
   default); without this a link row's `width: 100%` plus its side padding came out 20px wider than its column, and
   under classic scrollbars every column holding a link drew a horizontal scrollbar (found on staging, HR menu). */
.ui-mi[b-2juqu6v1o5] {
    box-sizing: border-box;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    min-height: var(--control-h);
    padding: 0 var(--btn-pad-x-sm);
    border: 0;
    background: transparent;
    border-radius: var(--radius);
    font-size: var(--fs-body);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: background var(--motion-menu) var(--ease);
}

.ui-mi:hover[b-2juqu6v1o5] {
    background: var(--fill-1);
}

/* FPL-001/REQ-018 (item 49) FR-1(b): drew the browser's default outline. `.ui-mi` is `width: 100%` inside
   `.ui-menu-scroll` (`overflow-y: auto` above — which computes `overflow-x` to `auto` too, per spec, once either
   axis is non-visible), so an outset ring's left/right edge is clipped — the same shape as Rail's own items:
   INSET. Covers `.ui-mi-current` too (it always carries the base `.ui-mi` class alongside its own). */
.ui-mi:focus-visible[b-2juqu6v1o5] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: calc(var(--focus-w) * -1);
}

.ui-mi .ui-mi-ic[b-2juqu6v1o5] {
    display: inline-flex;
    color: var(--text-secondary);
}

.ui-mi-current[b-2juqu6v1o5] {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: var(--fw-medium);
}

/* REQ-012 FR-10(b): NO `pointer-events: none` — it also suppresses `:hover`, so the item could never show its reason on hover (UI-LAYER §16: reachable on hover AND keyboard focus). The click handler guards itself
   (`OnItemClicked` returns for a disabled item), and the item does nothing on hover either. */
.ui-mi-off[b-2juqu6v1o5] {
    align-items: flex-start;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    cursor: not-allowed;
}

.ui-mi-off:hover[b-2juqu6v1o5] {
    background: transparent;
}

.ui-mi-off .ui-mi-ic[b-2juqu6v1o5] {
    margin-top: var(--space-4);
    opacity: var(--disabled-opacity);
}

.ui-mi-lbl[b-2juqu6v1o5] {
    display: block;
    line-height: var(--lh-body);
}

.ui-mi-off .ui-mi-lbl[b-2juqu6v1o5] {
    opacity: var(--disabled-opacity);
}

.ui-mi-why[b-2juqu6v1o5] {
    display: block;
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
}

.ui-mi-destructive[b-2juqu6v1o5] {
    color: var(--error);
}

.ui-mi-destructive .ui-mi-ic[b-2juqu6v1o5] {
    color: var(--error);
}

.ui-msep[b-2juqu6v1o5] {
    height: var(--border-w);
    margin: var(--space-4) 0;
    background: var(--line);
}

.ui-menu-footer[b-2juqu6v1o5] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-8);
    margin-top: var(--space-4);
    padding-top: var(--space-8);
    border-top: var(--border-w) solid var(--line);
    flex-shrink: 0;
}

.ui-mi .ui-mi-chev[b-2juqu6v1o5] {
    margin-left: auto;
    padding-left: var(--space-8);
    color: var(--text-secondary);
}

/* A parent row whose column is open: the same tint as the current page row, so the row and its column read as one. */
.ui-mi-open[b-2juqu6v1o5] {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: var(--fw-medium);
}

.ui-menu-cols[b-2juqu6v1o5] {
    display: flex;
    align-items: stretch;
}

.ui-menu-cols > .ui-menu-scroll[b-2juqu6v1o5] {
    flex: none;
    min-width: var(--menu-col-w);
    overflow-x: hidden;   /* the columns scroll only vertically: a classic sideways bar would also eat the height six rows need */
}

/* The second column is always laid out when a menu has a parent row (so placement measures the full width and the
   box never jumps); its vertical line shows only once a parent is open. */
.ui-menu-sub[b-2juqu6v1o5] {
    box-sizing: border-box;
    flex: none;
    min-width: var(--menu-col-w);
    max-height: calc(var(--control-h) * 6);
    overflow-x: hidden;
    overflow-y: auto;
    margin-left: var(--space-4);
    padding-left: var(--space-4);
    border-left: var(--border-w) solid transparent;
}

.ui-menu-sub-open[b-2juqu6v1o5] {
    border-left-color: var(--line);
}

/* A row's suffix (e.g. the tab count badge) keeps a gap from the label, which the one-line row markup no longer supplies as whitespace. */
.ui-mi-sfx[b-2juqu6v1o5] {
    margin-left: var(--space-4);
}
/* frontend/Components/Ui/MiniHeatTrendRow/MiniHeatTrendRow.razor.rz.scp.css */
/* FPL-001/REQ-003, row 70 — Mini heat-trend row. Ours in CSS, taken verbatim from the sheet's own
   `.trend`/`.tcell` rules (05-data-display.html lines 523-525). Colours reuse HeatGrid's own scale
   (`--heat-present`/`--heat-absent`/`--heat-leave`/`--fill-1`) — no second palette. */

.ui-trend[b-q3s5k7pa0f] {
    display: inline-flex;
    gap: var(--space-2);
    flex: none;
}

/* box-sizing: border-box is load-bearing here, found live: the sheet's own mockup declares a
   GLOBAL `*{box-sizing:border-box}` reset (05-data-display.html line 274) that this app has no
   equivalent of, so a plain `width:16px;height:16px` plus a 1px border renders 18x18, not the
   sheet's own genuine 16x16 -- measured against the real gallery, not assumed from the sheet's
   declared dimensions alone. Same class of bug Tooltip.md's own Filmstrip finding documents. */
.ui-trend-cell[b-q3s5k7pa0f] {
    box-sizing: border-box;
    width: var(--trend-cell);
    height: var(--trend-cell);
    border-radius: var(--space-2);
    border: var(--border-w) solid var(--line);
}

.ui-trend-cell-present[b-q3s5k7pa0f] { background: var(--heat-present); }
.ui-trend-cell-absent[b-q3s5k7pa0f] { background: var(--heat-absent); }
.ui-trend-cell-leave[b-q3s5k7pa0f] { background: var(--heat-leave); }

/* Three different REASONS, one identical plain visual — see MiniHeatTrendRowTypes.cs's own comment. */
.ui-trend-cell-nohistory[b-q3s5k7pa0f],
.ui-trend-cell-open[b-q3s5k7pa0f],
.ui-trend-cell-unavailable[b-q3s5k7pa0f] {
    background: var(--fill-1);
}

/* No margin of its own -- the sheet's own `.spec-row` (the HOST's wrapper, not this component)
   already supplies the gap between the trend strip and this caption; adding one here would
   double-space whenever a host with its own gap composes both. */
.ui-trend-caption[b-q3s5k7pa0f] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/Ui/NamedError/NamedError.razor.rz.scp.css */
/* FPL-001/REQ-003, row 57 — Named error / seam block. Ours in CSS AND markup, no supplier. Wraps
   <Button> (a supplier-backed component) — no ::deep concern of its own, since Button already
   wraps its own supplier tag inside a plain <span> (UI-LAYER.md §5's "wrapper" finding); this
   component's own elements are all plain, unscoped-supplier markup. */

.ui-seam[b-ati8d7vjov] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-12);
    padding: var(--seam-pad);
    background: var(--error-bg);
    border: var(--border-w) dashed var(--error);
    border-radius: var(--radius);
}

.ui-seam-ic[b-ati8d7vjov] {
    flex: none;
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: var(--error);
    margin-top: var(--space-2);
}

.ui-seam-b[b-ati8d7vjov] {
    flex: 1;
    min-width: 0;
}

.ui-seam-t[b-ati8d7vjov] {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app;
   pinned here for consistency even though this chip sizes to its own content (no declared
   width/height) -- a future caller constraining its width would otherwise get the padding/border
   added back on top. */
.ui-seam-code[b-ati8d7vjov] {
    box-sizing: border-box;
    display: inline-block;
    margin: var(--space-4) 0;
    padding: var(--code-pad-y) var(--code-pad-x);
    background: var(--surface);
    border: var(--border-w) solid var(--banner-line-error);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--error);
}

.ui-seam-p[b-ati8d7vjov] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-seam-copy-ic[b-ati8d7vjov] {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

/* The sheet's compact table-row shape (specimen c): center-aligned, tighter padding, no separate
   title line (the .ui-seam-t block is omitted by the markup itself, not hidden by CSS here). */
.ui-seam-row[b-ati8d7vjov] {
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--cell-pad-x);
}

/* The compact shape (2026-09-19, planner-approved synthesis -- no sheet specimen at this size
   exists; measured to fit StatTile's fixed 96px tile height and Select's fixed 240px popup width,
   the two hosts this shape exists for). No icon, no dashed border/background, no padding of its
   own -- the host's own surface (the tile, the popup) is the container. The code becomes the copy
   affordance directly (a small clickable chip, not a separate Button, since neither host has room
   for one) -- "code visible and copyable" stays true, sized down rather than dropped, unlike the
   Permission shape's own deliberate no-button case (that one is a genuine absence; this is the
   same affordance in a smaller control). */
.ui-seam-compact[b-ati8d7vjov] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.ui-seam-compact-t[b-ati8d7vjov] {
    color: var(--text);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
}

.ui-seam-compact-code[b-ati8d7vjov] {
    align-self: flex-start;
    padding: 0 var(--space-2);
    border: none;
    background: none;
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    color: var(--error);
    cursor: pointer;
}

.ui-seam-compact-code:hover[b-ati8d7vjov] {
    text-decoration: underline;
}

/* Permission shape (measured, not assumed, from the default shape's own ShowCopyButton rule):
   no button at all, not even Copy code -- the code stays visible but becomes plain, unclickable
   text rendered as a <span>, not a <button>. */
.ui-seam-compact-code-static[b-ati8d7vjov] {
    cursor: default;
}

.ui-seam-compact-code-static:hover[b-ati8d7vjov] {
    text-decoration: none;
}

.ui-seam-compact-code:focus-visible[b-ati8d7vjov] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-seam-compact-p[b-ati8d7vjov] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/Ui/NumberStepper/NumberStepper.razor.rz.scp.css */
/* FPL-001/REQ-003, row 37 — Number stepper. Ours in CSS AND markup (see NumberStepper.razor's own
   header comment for the measured Fluent rejection — no FluentNumberField exists in v5 at all).
   No supplier custom element, so Blazor's own CSS-isolation scope attribute attaches directly to
   every element below exactly as written. */

.ui-fld[b-cwts58wf8l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: var(--select-w);
}

.ui-fld-w[b-cwts58wf8l] {
    width: 100%;
}

.ui-fld-lbl[b-cwts58wf8l] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
}

.ui-req[b-cwts58wf8l] {
    color: var(--accent);
}

/* Sheet: .num frame 240×32, 1px hairline, 4px radius, overflow hidden -- the two buttons and the
   input all live inside this one bordered box, never their own separate borders. */
/* box-sizing: border-box (whole-branch pass) -- declared height 32px + this rule's own 1px border
   rendered 34px live. */
.ui-num[b-cwts58wf8l] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: var(--control-h);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.ui-num:hover[b-cwts58wf8l] {
    border-color: var(--line-hover);
}

.ui-num-off[b-cwts58wf8l] {
    background: var(--fill-1);
    color: var(--text-secondary);
    /* Sheet 04 §10b `.num.is-off` (row 37 drew no disabled stepper): the fill, the colour AND the dim — declared once, here, at the
       control; the arrows are aria-disabled (assistive tech offers no dead buttons) but never dimmed again (`.ui-num-off .ui-num-b[aria-disabled]`
       below), or the two dims would compound.
       No `pointer-events: none`: the reason tooltip's hover half needs the pointer (UI-LAYER §16). */
    opacity: var(--disabled-opacity);
}

/* REQ-009: the border-only invalid shape (sheet 04 §10b `.num.is-bad{border-color:var(--error)}`, copied from `.in.is-bad`). No message.
   The hover rule above would win on specificity, so the hover state is restated. */
.ui-num-bad[b-cwts58wf8l],
.ui-num-bad:hover[b-cwts58wf8l] {
    border-color: var(--error);
}

.ui-num-in[b-cwts58wf8l] {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 var(--input-pad-x);
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--fs-body);
    font-variant-numeric: tabular-nums;
    text-align: left;
}

.ui-num-in[b-cwts58wf8l]::placeholder {
    color: var(--placeholder);
}

.ui-num-unit[b-cwts58wf8l] {
    padding-right: var(--input-pad-x);
    color: var(--text-secondary);
    font-size: var(--fs-body);
    flex: none;
}

/* Sheet: two 28px buttons (--stepper-w = --control-h-sm), no gap, a hairline divider between each
   button and the input -- never a separate bordered pill.

   `::deep` is needed for `.ui-num-b-wrap ::deep .ui-tooltip-region` (the same fix Timeline/row 22
   already established for this exact shape): DisabledReasonTooltip's ChildContent mode wraps the
   button in `<Tooltip>`, whose own root `.ui-tooltip-region` sizes to its content by default
   (`display:flex` since item 14b's own region-equals-child fix; block-level outer display) --
   collapsing the button's own height/width to its own intrinsic size instead of filling the frame,
   even with `align-self:stretch` on the button itself (that only fills the button's OWN immediate
   flex parent, which is `.ui-tooltip-region`, not `.ui-num`, once Tooltip is composed). The
   width/height live on this component's own `.ui-num-b-wrap` span (carrying this component's own
   CSS scope attribute per the Button/B1 lesson), and `::deep` reaches into Tooltip's internal
   region to fill it; the button inside just fills its wrapper at 100%. */
.ui-num-b-wrap[b-cwts58wf8l] {
    display: block;
    width: var(--stepper-w);
    height: 100%;
    flex: none;
}

.ui-num-b-wrap[b-cwts58wf8l]  .ui-tooltip-region {
    display: block;
    width: 100%;
    height: 100%;
}

.ui-num-b[b-cwts58wf8l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-secondary);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background var(--motion-micro) var(--ease);
}

.ui-num-b:hover[b-cwts58wf8l] {
    background: var(--fill-1);
    color: var(--text);
}

/* REQ-012 Amended (4)(a) / FR-1 / AC-30: the INPUT's ring is drawn by the FRAME. The input drew the browser's `auto 1px rgb(16,16,16)` outline (no rule at all). An element's own outline is not clipped by its own `overflow: hidden`, so the frame carries it.
   A stepper disabled as a whole dims its frame (`opacity` dims the ring with it), so its input carries `ui-dis` and the undimmed tooltip region around the frame draws the ring instead (Tooltip.razor.css); its arrows leave the tab order then (one tab stop, the input). */
.ui-num:has(.ui-num-in:focus-visible:not(.ui-dis))[b-cwts58wf8l] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-num-in:focus-visible[b-cwts58wf8l] {
    outline: none;
}

/* The ARROWS' ring is INSET (REQ-014 FR-5, item 43 — kept by item 40 after measuring both): `.ui-num` is `overflow: hidden` and the arrows fill it edge to edge, so an outset ring (the layer's default, offset 2) was clipped on three sides and only a stray 2 px accent line over
   the input's edge survived (found live: Tab from a clamped input onto the disabled "+"). Inside the button the whole ring shows — the layer's inset-ring pattern for a control in a clipping host (see `.ui-rre-many .ui-rre-grip`). One ring per control: the frame rule above
   matches only the INPUT, so a focused arrow draws this one and nothing else. */
.ui-num-b:focus-visible[b-cwts58wf8l] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: calc(var(--focus-w) * -1);
}

.ui-num-minus[b-cwts58wf8l] {
    border-right: var(--border-w) solid var(--line);
}

.ui-num-plus[b-cwts58wf8l] {
    border-left: var(--border-w) solid var(--line);
}

.ui-num-b[aria-disabled="true"][b-cwts58wf8l] {
    opacity: var(--disabled-opacity);
    cursor: default;
}

/* A disabled stepper's arrows are aria-disabled (so assistive tech offers no dead buttons) but not dimmed again: the frame's `.ui-num-off` opacity is
   declared once, at the control. */
.ui-num-off .ui-num-b[aria-disabled="true"][b-cwts58wf8l] {
    opacity: 1;
}

.ui-num-b .ic[b-cwts58wf8l] {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.ui-num-ro[b-cwts58wf8l] {
    height: var(--control-h);
    display: flex;
    align-items: center;
    color: var(--text);
    font-size: var(--fs-body);
    font-variant-numeric: tabular-nums;
}

/* Typed-past-bound: a warn-colored line under the field naming the clamp, never a silent rewrite
   (Rule 15 §3, the sheet's own .warnline). Distinct from the at-bound button's own disabled
   tooltip -- that one fires from a click/arrow-key step, this one fires from a typed value. */
.ui-num-warn[b-cwts58wf8l] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--warn);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-num-warn .ic-sm[b-cwts58wf8l] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
}

.ui-hint[b-cwts58wf8l] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/Ui/PageAccessLine/PageAccessLine.razor.rz.scp.css */
.ui-accessline[b-fq5v37mixy] {
    display: flex;
    align-items: center;
    gap: var(--page-access-gap);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-accessline-narrow[b-fq5v37mixy] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--access-stack-gap);
}

.ui-accessline-sep[b-fq5v37mixy] {
    color: var(--line);
}

.ui-accessline-narrow .ui-accessline-sep[b-fq5v37mixy] {
    display: none;
}

/* R17: the composed AsOfLine (row 60) renders first visually at narrow width -- "age wins the first
   line" -- while DOM order (who, then as-of) stays untouched, so reading order still meets "who"
   before "as of". ::deep is required: AsOfLine's own .ui-asof root is a different component's scoped
   markup. */
.ui-accessline-narrow[b-fq5v37mixy]  .ui-asof {
    order: -1;
}

/* UI-LAYER.md §15: the layer's one breakpoint (900px) applies automatically by viewport width, on
   top of the explicit .ui-accessline-narrow class above, which stays as a host override for a
   component sitting inside a sub-900px CONTAINER (e.g. M5's 400px companion column) even when the
   viewport itself is wide -- two real cases, same visual result. */
@media (max-width: 900px) {
    .ui-accessline[b-fq5v37mixy] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--access-stack-gap);
    }

    .ui-accessline .ui-accessline-sep[b-fq5v37mixy] {
        display: none;
    }

    .ui-accessline[b-fq5v37mixy]  .ui-asof {
        order: -1;
    }
}
/* frontend/Components/Ui/PageHeader/PageHeader.razor.rz.scp.css */
.ui-pageheader[b-ozr6s7re0u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* Band (item 33's live check): the sheet's `.page-head` — `padding: var(--page-pad-y) var(--content-pad); background: var(--surface)`, `.flat` bottom --space-16 (07-page-templates.html:1003-1005) — a white band
   across the full width of the page frame, over the grey `.content` ground. The shell already pads its content by --content-pad on every side, so the band bleeds OUT of that padding with the same
   negative margin and gives the padding back inside; the bottom margin restores the sheet's gap (the content's own top padding) before the first thing under it. Only with `Band` — a header without it
   is unchanged. */
.ui-pageheader-band[b-ozr6s7re0u] {
    margin: calc(-1 * var(--content-pad)) calc(-1 * var(--content-pad)) var(--content-pad);
    padding: var(--page-pad-y) var(--content-pad) var(--space-16);
    background: var(--surface);
}

.ui-pageheader-main[b-ozr6s7re0u] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-16);
}

.ui-pageheader-titlewrap[b-ozr6s7re0u] {
    flex: 1;
    min-width: 0;
}

.ui-pageheader-title[b-ozr6s7re0u] {
    margin: 0;
    font-size: var(--fs-title);
    line-height: var(--lh-title);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.ui-pageheader-permission[b-ozr6s7re0u] {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

/* Item 33: the sheet's own `.page-actions` (07-page-templates.html:1012), token for token. */
.ui-pageheader-actions[b-ozr6s7re0u] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: none;
    margin-left: auto;
}

/* FPL-001/REQ-023 FR-2 (item 58, review finding): no sheet frame draws a phone-width page header --
   .page-head/.page-actions carry no narrow rule anywhere in the mockups -- so below this the row's
   actions (flex:none, never wrapping) forced the title to a 0-width box and pushed themselves past
   the viewport (measured live: titleWrapWidth 0, scrollWidth over innerWidth, every action off-screen).
   Wrap the actions onto their own line instead of folding them into the ⋯ menu: that menu is built for
   a fixed, structured (Print/Export/Copy link) item list, and `Actions` is an arbitrary RenderFragment
   this component cannot introspect into menu items. */
@media (max-width: 400px) {
    .ui-pageheader-main[b-ozr6s7re0u] {
        flex-wrap: wrap;
    }

    .ui-pageheader-actions[b-ozr6s7re0u] {
        flex-basis: 100%;
        margin-left: 0;
    }
}

.ui-pageheader-menuwrap[b-ozr6s7re0u] {
    position: relative;
    flex: none;
}

.ui-pageheader-menu-trigger[b-ozr6s7re0u] {
    height: var(--control-h-sm);
    min-width: var(--control-h-sm);
    padding: 0 var(--space-8);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-body);
    cursor: pointer;
}

.ui-pageheader-menu-trigger:hover[b-ozr6s7re0u] {
    background: var(--fill-1);
}

/* FPL-001/REQ-018 (item 49) FR-1(a): drew the browser's default outline — outset, the layer's default. */
.ui-pageheader-menu-trigger:focus-visible[b-ozr6s7re0u] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}


/* The sheet's `.page-meta` (07-page-templates.html:1007-1010): a flex row, centred, `margin-top: var(--space-4)`; its height is the refresh icon-button's 28 (built as a block with inline-flex children
   it measured 32: a baseline gap under the button). */
.ui-pageheader-accessline[b-ozr6s7re0u] {
    display: flex;
    align-items: center;   /* NO margin here: PageAccessLine's own root already carries the sheet's `.page-meta` margin-top: var(--space-4) — a second one made the band 104 against the sheet's 100 (measured live) */
}
/* frontend/Components/Ui/Pager/Pager.razor.rz.scp.css */
/* FPL-001/REQ-003, row 7 — Simple pager. Ours in CSS AND markup (see Pager.razor's own header
   comment for why FluentPaginator was rejected). No `::deep`/wrapper-scoping concern here at all —
   there is no supplier custom element, so Blazor's own CSS-isolation scope attribute attaches
   directly to every element below exactly as written. */

.ui-pager[b-v3hgbazeda] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-16);
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ui-pager-flush[b-v3hgbazeda] {
    margin-top: 0;
    padding: var(--space-8) var(--cell-pad-x);
    border-top: var(--border-w) solid var(--line);
}

.ui-pager-spacer[b-v3hgbazeda] {
    flex: 1;
}

.ui-pg[b-v3hgbazeda] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--control-h-sm);
    height: var(--control-h-sm);
    padding: 0 var(--space-4);
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-size: var(--fs-small);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--motion-micro) var(--ease);
}

.ui-pg:hover:not(.ui-pg-off):not(.ui-pg-disabled)[b-v3hgbazeda] {
    background: var(--fill-1);
}

/* AC-29 (REQ-012 Amended (3)): an ENABLED pager control draws the layer's ring — 2px, the accent, offset 2 — not the browser's grey 1px default (a `border: none` button with a bare UA outline).
   A dimmed control (`.ui-dis`: the range-end arrow, or any control of a host-disabled pager) never draws its own: opacity would dim its outline to a fraction of the accent (measured ≈ 2.6:1 on the
   range-end arrow, under the 3:1 non-text bar), so the undimmed `.ui-tooltip-region` around it draws the ring (Tooltip.razor.css). */
.ui-pg:focus-visible:not(.ui-dis)[b-v3hgbazeda] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-pg-current[b-v3hgbazeda] {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: var(--fw-medium);
}

/* RANGE END (‹ on the first page, › on the last) and the "…" — the sheet's `.pg.is-disabled{opacity:var(--disabled-opacity);pointer-events:none}` (05-data-display.html).
   Not a disabled-with-reason state: no native `disabled`, no bubble; the markup carries `aria-disabled="true"` (the sheet's specimen, as amended by REQ-008 Amended (2)) so it announces as unavailable
   while staying a tab stop. */
.ui-pg-disabled[b-v3hgbazeda] {
    opacity: var(--disabled-opacity);
    pointer-events: none;
    cursor: default;
}

/* DISABLED WITH A REASON (UI-LAYER §16) — the host turned the pager off. Dimmed, but NEVER `pointer-events: none`: the reason bubble opens on hover and the control must stay
   reachable by keyboard focus; the control does nothing on activation (the handlers guard). */
.ui-pg-off[b-v3hgbazeda] {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

.ui-pg-ic[b-v3hgbazeda] {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

/* Item 55 (FPL-001/REQ-021 AC-12/13/14, planner ruling): DEC-004 applied to the ONE pager control
   that caused a still-pending request — dimmed and inert (activation is ALSO guarded in code, on
   the raw Busy parameter, independent of this rule) like Button's own visible-busy look, never a
   floating spinner. The rows-per-page Select gets the same dim (its own span wrapper carries this
   class) but no spinner inside it -- Select has no busy hook of its own yet.
   REQ-021 Amended (4), item 55 follow-up: applied to EVERY control at once (Pager.razor's own
   WholePagerBusy) when no control caused the dispatch (a host's own programmatic page/size change)
   -- no spinner anywhere, since none is responsible, but every control still visibly explains the
   refusal every activation handler already issues on the raw Busy parameter. */
.ui-pg-busy[b-v3hgbazeda] {
    opacity: var(--busy-opacity);
    pointer-events: none;
}

.ui-pager[b-v3hgbazeda]  .ui-pg-spinner {
    margin-right: var(--space-4);
    vertical-align: middle;
}   /* the shared ring (FPL-001/REQ-046 FR-4); the supplier's spinner this replaced is gone from the layer */

/* The sheet's "Rows: 25" selector now renders <Select Ghost="true"> (Frontend/Components/Ui/Select)
   -- retired the native <select> the same day row 39 (Select) shipped. Select.razor.css owns its
   own ghost-variant styling entirely; nothing to override here. */
/* frontend/Components/Ui/PageTabStrip/PageTabStrip.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 4·72 — Page tab strip. Measured verbatim from
   07-page-templates.html lines 969-1000, the sheet's own §0 anatomy/CSS, never a consumer page. */

.ui-ptabs-wrap[b-d3ny4c8w3l] {
    position: relative;
}

.ui-ptabs[b-d3ny4c8w3l] {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--tab-strip-pad-x);
    background: var(--surface);
    border-bottom: var(--border-w) solid var(--line);
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- the transparent border-bottom
   below reserves real box space for the active-tab underline indicator (never visible until active,
   but always occupying height); under the browser's content-box default this rendered 38px tall
   against the declared 36px --tab-h. */
.ui-ptab[b-d3ny4c8w3l] {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--tab-badge-gap);
    height: var(--tab-h);
    padding: 0 var(--tab-pad-x);
    flex: none;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: var(--fs-body);
    font-weight: var(--tab-label);
    border: none;
    border-bottom: var(--tab-underline) solid transparent;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    transition: color var(--motion-micro) var(--ease);
}

/* Hover darkens the TEXT only — no fill, no box (the sheet's own comment, line 977). */
.ui-ptab:hover[b-d3ny4c8w3l] {
    color: var(--text);
}

.ui-ptab-on[b-d3ny4c8w3l] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Deliberately NO pointer-events:none here — that is exactly Fluent's own rejected leak (FR-9):
   it would also kill :hover, and the sheet demands the reason on hover AND keyboard focus. The
   click handler guards itself instead (PageTabStrip.razor's own SelectAsync/ChooseOverflowAsync),
   the same fix TextInput's own .ui-in-off already applies (TextInput.md's conversion note). */
.ui-ptab-off[b-d3ny4c8w3l] {
    color: var(--placeholder);
    cursor: default;
}

.ui-ptab-off .ui-ptab-ic[b-d3ny4c8w3l] {
    color: var(--placeholder);
}

/* REQ-012 FR-10(d): the count badge is another component's element with its own colours, so the tab's dimmed text colour never reached it — it stayed at full strength on a dead tab. It dims with the tab: its own
   computed opacity is the disabled opacity (reached through `::deep`, the badge carries CountBadge's scope, not this file's). */
.ui-ptab-off[b-d3ny4c8w3l]  .ui-badge-inline {
    opacity: var(--disabled-opacity);
}

.ui-ptab:focus-visible[b-d3ny4c8w3l] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: calc(-1 * var(--focus-w));
}

.ui-ptab-ic[b-d3ny4c8w3l] {
    display: flex;
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: inherit;
    flex: none;
}

.ui-ptab-caret[b-d3ny4c8w3l] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
}

.ui-ptabs-more-anchor[b-d3ny4c8w3l] {
    display: flex;
    align-items: stretch;
    position: relative;
}

/* Narrow: the strip SCROLLS sideways and never wraps; a fade marks the cut edge (specimen d). */
.ui-ptabs-scroll[b-d3ny4c8w3l] {
    overflow-x: auto;
    scrollbar-width: none;
}

.ui-ptabs-scroll[b-d3ny4c8w3l]::-webkit-scrollbar {
    display: none;
}

.ui-ptabs-wrap-scroll[b-d3ny4c8w3l]::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: var(--border-w);
    width: var(--tab-fade-w);
    pointer-events: none;
    /* The sheet's own rule (line 997-999) uses a literal zero-alpha rgba() as the first stop
       instead of the `transparent` keyword, to guard against an old-engine bug where `transparent`
       interpolates through black rather than the adjacent colour's own channels. That bug was fixed
       across all evergreen engines years before this product's own supported-browser baseline
       (DEC-013/T-052) -- using the keyword here avoids both an unmeasured raw colour literal
       (LITERAL_VALUE_IN_LAYER_CSS) and inventing a token the sheet itself never names, a disclosed,
       informed divergence from the sheet's own defensive (legacy-targeted) choice, not an oversight. */
    background: linear-gradient(90deg, transparent, var(--surface));
}
/* frontend/Components/Ui/PageValidationSummary/PageValidationSummary.razor.rz.scp.css */
/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app;
   pinned here for consistency even though this banner has no declared width/height today (it fills
   its own block container by default) -- a host that later constrains its width would otherwise get
   the padding/border added back on top. */
.ui-validationsummary[b-z0mpo3edcv] {
    box-sizing: border-box;
    padding: var(--space-12) var(--space-16);
    background: var(--error-bg);
    border: var(--border-w) solid var(--banner-line-error);
    border-radius: var(--radius);
    color: var(--error);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-validationsummary-title[b-z0mpo3edcv] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-semibold);
}

.ui-validationsummary ol[b-z0mpo3edcv] {
    margin: var(--vsum-gap) 0 0 var(--vsum-indent);
    padding: 0;
}

.ui-validationsummary li + li[b-z0mpo3edcv] {
    margin-top: var(--vsum-gap);
}

.ui-validationsummary a[b-z0mpo3edcv] {
    color: var(--error);
    text-decoration: underline;
}
/* frontend/Components/Ui/PeriodNavigator/PeriodNavigator.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 8 — Period navigator, matching .per/.per-l/.icon-btn verbatim
   (04-data-entry.html §7, lines 574-575, 312-316). --period-w/--icon-sm/--control-h-sm/--radius/
   --disabled-opacity/--fs-body/--fw-semibold/--space-4/--space-8/--motion-micro/--ease are all
   already-declared tokens; nothing new added here. */

.ui-per[b-oksx3rqdp0] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

.ui-per-l[b-oksx3rqdp0] {
    width: var(--period-w);
    text-align: center;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.ui-per-lock[b-oksx3rqdp0] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
    color: var(--text-secondary);
}

.ui-per-ic[b-oksx3rqdp0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    flex: none;
    border-radius: var(--radius);
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--motion-micro) var(--ease);
}

.ui-per-ic:hover[b-oksx3rqdp0] {
    background: var(--fill-1);
    color: var(--text);
}

.ui-per-ic:focus-visible[b-oksx3rqdp0] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: calc(-1 * var(--focus-w));
}

/* Deliberately NO pointer-events:none — the sheet's own .icon-btn.is-off rule has it, dropped
   here to match this layer's own established anti-pattern-avoidance (see this component's own
   header comment for the full reasoning). Opacity alone gives the sheet's dimmed look. */
.ui-per-ic-off[b-oksx3rqdp0] {
    opacity: var(--disabled-opacity);
    cursor: default;
}

.ui-per-ic-off:hover[b-oksx3rqdp0] {
    background: none;
    color: var(--text-secondary);
}

.ui-per-ic .ic[b-oksx3rqdp0] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
}

.ui-per-frozen[b-oksx3rqdp0] {
    margin-left: var(--space-8);
}
/* frontend/Components/Ui/Popover/Popover.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 64 — Popover / hover card. Generic anchored-card shell shared by
   every consumer (DatePicker/44, TagOverflow/26, and this row's own gallery specimens). A consumer's
   OWN size/layout rule (DatePicker's calendar width, TagOverflow's min-width+flex-wrap) lives in that
   consumer's own stylesheet, combined onto the SAME element via ContentClass/WrapClass — see
   Popover.razor's own header comment for why the combined-class shape is deliberate (cross-file
   cascade ORDER between two Blazor-scoped stylesheets is not something to depend on). */

.ui-pop-wrap[b-0rsjcc8wqs] {
    position: relative;
    display: inline-flex;
}

.ui-pop[b-0rsjcc8wqs] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    margin-top: var(--space-4);
    padding: var(--space-8);   /* sheet 02's default popover padding -- a consumer with its OWN layout (DatePicker's
        calendar, TagOverflow's list) overrides this via a more-specific .ui-pop.<theirs> combined-class rule (see
        Popover.razor's own header comment on why the combined-class shape exists); a bare <Popover> with no
        ContentClass -- row 64's "Basic" gallery specimen -- gets this default (FPL-001/REQ-023 FR-4, item 58). */
    min-width: var(--menu-col-w);   /* sheet 02's default popover minimum width (200px) -- same override story as padding above; reuses the existing 200px token (a menu's own column width) rather than a new one for the identical value (DesignLayerLint's LITERAL_VALUE_IN_LAYER_CSS). */
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-overlay);
    /* white-space inherits: a popover drawn inside a Grid cell (nowrap) must not inherit it (PopupWhiteSpaceTests) */
    white-space: normal;
}

/* Viewport-edge flip (genuinely new behaviour this row adds — see Popover.razor's header comment).
   Applied only after a real live measurement of the popover's own rendered box against the
   viewport, never assumed. */
.ui-pop.ui-pop-flip-top[b-0rsjcc8wqs] {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--space-4);
}

.ui-pop.ui-pop-align-right[b-0rsjcc8wqs] {
    left: auto;
    right: 0;
}

/* Item 39 (REQ-011): the anchored card — `position: fixed`, placed by popoverDismiss.js placeAnchored under (or above) the anchor element, so no scrolling or clipping ancestor (a drawer body, a dialog) can cut it.
   Hidden until placed (the module sets opacity once it has the anchor's box — opacity, not visibility: a `visibility: hidden` element cannot take focus, and the time picker's columns are focused straight after open), so it never flashes at the viewport's corner. The wrapper-relative offsets above do not apply; the 4 px gap is the module's. */
.ui-pop.ui-pop-fixed[b-0rsjcc8wqs] {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.ui-pop.ui-pop-fixed.ui-pop-flip-top[b-0rsjcc8wqs] {
    bottom: auto;
}
/* frontend/Components/Ui/PrintSurface/PrintSurface.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 76 — M4 print surface. Matches 08-page-parts.html's own
   `.print-head`/`.print-logo`/`.print-t`/`.print-m`/`.print-foot` (lines 764-772) and family-7b's
   own `--print-rule-w` override (line 798) verbatim, plus `.pw`/`.paper-pill` (lines 799-811) as
   reusable utility classes for whatever wall/report/digest content a host composes as ChildContent
   -- every token already declared in tokens.css, nothing new added here. No `@media print` block:
   the sheet draws paper as a screen-visible STATE at --print-w (794px), and this component's own CSS
   matches that on screen AND on paper identically. */

/* box-sizing: border-box -- --print-w (794px) is the sheet's own REAL A4-at-96dpi paper width (the
   whole sheet), not a content width with padding added on top. Found live: without this, the
   rendered box measured 842px (794 + 24px padding x2), 48px too wide -- this codebase has no global
   border-box reset, so the browser's own content-box default silently added the padding back in. */
.ui-print[b-jz0lz6xz84] {
    box-sizing: border-box;
    width: var(--print-w);
    padding: var(--print-pad);
    background: var(--surface);
    color: var(--text);
}

.ui-print-head[b-jz0lz6xz84] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-12);
    padding-bottom: var(--space-12);
    margin-bottom: var(--space-16);
    border-bottom: var(--print-rule-w) solid var(--text);
}

.ui-print-logo[b-jz0lz6xz84] {
    height: var(--logo-h);
    width: auto;
    max-width: var(--logo-maxw);
    flex: none;
}

.ui-print-head-b[b-jz0lz6xz84] {
    flex: 1;
    min-width: 0;
}

.ui-print-t[b-jz0lz6xz84] {
    font-size: var(--fs-heading-md);
    line-height: var(--lh-heading-md);
    font-weight: var(--fw-semibold);
}

.ui-print-m[b-jz0lz6xz84] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-print-body[b-jz0lz6xz84] {
    margin-top: var(--space-8);
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app;
   pinned here for consistency with `.ui-print` above even though this footer has no declared height
   of its own today, only padding-top and a border-top stacking under the content-box default. */
.ui-print-foot[b-jz0lz6xz84] {
    box-sizing: border-box;
    margin-top: var(--space-16);
    padding-top: var(--space-8);
    border-top: var(--border-w) solid var(--line);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
}

/* Pagination -- this component's own contract for "a row is never split across a page break" and
   "the column headers repeat" (both the host's own sliced-by-row-and-day content and any other
   tabular ChildContent get this for free via ::deep, not re-opted-in per table). */
[b-jz0lz6xz84] .ui-print-body tr {
    break-inside: avoid;
}

[b-jz0lz6xz84] .ui-print-body thead {
    display: table-header-group;
}

/* The wall table -- letters, not colours (row 30/heat grid's own cells, printed). --print-cell (24px)
   is deliberately smaller than the screen's own --cell (32px, row 30's own token) -- a letter needs
   less room than a colour field. */
[b-jz0lz6xz84] .ui-print-wall {
    width: auto;
    border-collapse: collapse;
    table-layout: fixed;
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app; this
   rule's own `line-height: calc(--print-cell - --border-w * 2)` already assumes the border eats into
   the declared --print-cell box rather than sitting outside it (how it keeps the letter centered),
   so box-sizing is pinned explicitly to make that assumption actually true instead of accidental. */
[b-jz0lz6xz84] .ui-print-wall th,
[b-jz0lz6xz84] .ui-print-wall td {
    box-sizing: border-box;
    width: var(--print-cell);
    height: var(--print-cell);
    padding: 0;
    text-align: center;
    background: none;
    border: var(--border-w) solid var(--line);
    color: var(--text);
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    line-height: calc(var(--print-cell) - var(--border-w) * 2);
    white-space: nowrap;
}

[b-jz0lz6xz84] .ui-print-wall th {
    color: var(--text-secondary);
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- same shape as the wall th/td
   above: the 16px of horizontal padding alone (no border on this rule) was rendering this sticky
   name column 166px wide against its own declared 150px --print-name-w. */
[b-jz0lz6xz84] .ui-print-wall .ui-print-pnm {
    box-sizing: border-box;
    width: var(--print-name-w);
    height: var(--print-cell);
    padding: 0 var(--space-8);
    text-align: left;
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
}

[b-jz0lz6xz84] .ui-print-wall thead .ui-print-pnm {
    color: var(--text-secondary);
}

/* A status pill, rewritten for one ink -- the tint dropped, the hairline and the word carrying it. */
/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- same shape as the wall th/td
   above: this rule's own `line-height: calc(--pill-h - --border-w * 2)` already assumes the border
   is counted inward against the declared --pill-h, so box-sizing is pinned explicitly rather than
   left to the browser's content-box default. */
[b-jz0lz6xz84] .ui-print-pill {
    box-sizing: border-box;
    display: inline-block;
    height: var(--pill-h);
    padding: 0 var(--btn-pad-x-sm);
    border: var(--border-w) solid var(--text);
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    font-size: var(--fs-small);
    line-height: calc(var(--pill-h) - var(--border-w) * 2);
}
/* frontend/Components/Ui/ProgressMeter/ProgressMeter.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 31 — Progress bar / meter, matching .meter/.meter-target/.pips/.pip
   verbatim (05-data-display.html lines 588-599). --meter-w/--meter-h/--meter-target-w/--pip-w/
   --pip-h/--pip-gap/--radius-pill/--fill-1/--line/--border-w/--accent/--series-4/--ok/--text/
   --space-2/--space-4 are all already-declared tokens; nothing new added here. */

.ui-meter-row[b-j5l7boiwy1] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
}

.ui-meter-wrap[b-j5l7boiwy1] {
    position: relative;
    display: inline-block;
    width: var(--meter-w);
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app;
   declared 220x8 + this rule's own 1px border rendered 222x10 live. */
.ui-meter[b-j5l7boiwy1] {
    box-sizing: border-box;
    display: block;
    position: relative;
    width: var(--meter-w);
    height: var(--meter-h);
    border-radius: var(--radius-pill);
    background: var(--fill-1);
    border: var(--border-w) solid var(--line);
    overflow: hidden;
}

.ui-meter i[b-j5l7boiwy1] {
    display: block;
    height: 100%;
    background: var(--accent);
}

.ui-meter-over i[b-j5l7boiwy1] {
    background: var(--series-4);
}

.ui-meter-full i[b-j5l7boiwy1] {
    background: var(--ok);
}

.ui-meter-target[b-j5l7boiwy1] {
    position: absolute;
    top: calc(var(--space-2) * -1);
    width: var(--meter-target-w);
    height: calc(var(--meter-h) + var(--space-4));
    background: var(--text);
    border-radius: var(--radius-pill);
}

.ui-pips[b-j5l7boiwy1] {
    display: inline-flex;
    gap: var(--pip-gap);
}

/* box-sizing: border-box (whole-branch pass) -- declared 16x6 + this rule's own 1px border
   rendered 18x8 live, same class as .ui-meter above. */
.ui-pip[b-j5l7boiwy1] {
    box-sizing: border-box;
    width: var(--pip-w);
    height: var(--pip-h);
    border-radius: var(--radius-pill);
    background: var(--fill-1);
    border: var(--border-w) solid var(--line);
}

.ui-pip-on[b-j5l7boiwy1] {
    background: var(--accent);
    border-color: var(--accent);
}

.ui-meter-count[b-j5l7boiwy1] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    white-space: nowrap;
}
/* frontend/Components/Ui/QuickDrawer/QuickDrawer.razor.rz.scp.css */
/* FPL-001/REQ-003, row 80 -- Quick drawer over the edit drawer. Ours (native <dialog>), same
   reasoning as row 16/EditDrawer: right-anchored, full height, but at the fixed --drawer-w (400px)
   the sheet shares with the list drawer, not the edit drawer's clamp(). */

.ui-qdrawer[b-r9krbdg2pe] {
    box-sizing: border-box;   /* the sheet's `*{box-sizing:border-box}` (the width includes the left hairline) */
    position: fixed;
    inset: var(--topbar-h) 0 0 auto;   /* under the same lit bar as the edit drawer (06-overlays.html) */
    margin: 0;
    width: var(--drawer-w);
    height: calc(100% - var(--topbar-h));
    max-height: calc(100% - var(--topbar-h));
    padding: 0;
    border: none;
    border-left: var(--border-w) solid var(--line);
    border-radius: 0;
    background: var(--surface);
    color: var(--text);   /* the UA's `dialog { color: CanvasText }` is black: without this the dialog's own text (the footer's unsaved count, any bare text) was #000 beside #1f2933 neighbours (measured live, item 33) */
    box-shadow: var(--shadow-overlay);
    /* Documentation parity with the sheet's own z-ladder (line 595: `.dx.dx-2{z-index:var(--z-drawer-2)}`)
       -- not load-bearing for actual stacking, which native top-layer promotion handles when a second
       <dialog> calls showModal() while the first is still open (row 16/17's own established reasoning). */
    z-index: var(--z-drawer-2);
}

.ui-qdrawer[open][b-r9krbdg2pe] {
    display: flex;
    flex-direction: column;
}

/* The sheet's own ruled value (token-block comment, line ~295-301): the scrim is a COMPUTED
   calc(--z-drawer-2 - 1), never a separate hardcoded token, so it can never drift out of the
   invariant "a scrim is never authored above the thing it dims" -- it sits strictly between the
   edit drawer (50) and this drawer (52), at 51, dimming the first drawer without ever contesting
   the second's own stacking. */
.ui-qdrawer[b-r9krbdg2pe]::backdrop {
    inset: var(--topbar-h) 0 0 0;   /* the scrim starts under the bar */
    background: var(--scrim);
    z-index: calc(var(--z-drawer-2) - 1);
}

/* 899.98px + both side insets, not width:100vw -- same finding and fix as EditDrawer.razor.css's own
   narrow rule (FPL-001/REQ-023 FR-1, item 58): see that file's comment for the full mechanism. */
@media (max-width: 899.98px) {
    .ui-qdrawer[b-r9krbdg2pe] {
        inset: var(--topbar-h) 0 0 0;
        width: auto;
        max-width: none;
        min-width: 0;
    }
}

.ui-qdrawer-head[b-r9krbdg2pe] {
    flex: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-12);   /* the sheet's `.dx-head` (the quick drawer IS a `.dx`, 06-overlays.html:595): gap 12, padding 16 — built with the DIALOG's --dialog-pad (24) */
    padding: var(--space-16);
    border-bottom: var(--border-w) solid var(--line);
}

.ui-qdrawer-head-text[b-r9krbdg2pe] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);   /* the sheet's `.dx-sub` margin-top */
    min-width: 0;
}

/* 16/24 -- the sheet's own smaller list-head size at 400px (".dx-list-head already uses at 400 px"),
   not the edit drawer's 20/28 title: a quick drawer holds a sub-task, not a record. */
.ui-qdrawer-title[b-r9krbdg2pe] {
    font-size: var(--fs-heading-md);
    line-height: var(--lh-heading-md);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.ui-qdrawer-subtitle[b-r9krbdg2pe] {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
}

.ui-qdrawer-close-ic[b-r9krbdg2pe] {
    width: var(--lh-tight);
    height: var(--lh-tight);
    color: var(--text-secondary);   /* the sheet's `.icon-btn` glyph: --text-secondary, --text on hover */
}

.ui-qdrawer-head[b-r9krbdg2pe]  fluent-button:hover .ui-qdrawer-close-ic {
    color: var(--text);
}

.ui-qdrawer-body[b-r9krbdg2pe] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-16);   /* the sheet's `.dx-body` */
}

.ui-qdrawer-foot[b-r9krbdg2pe] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-16);   /* the sheet's footer row (ActionFooter: 12 / 16) */
    border-top: var(--border-w) solid var(--line);
}

.ui-qdrawer-refused[b-r9krbdg2pe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-16);
    color: var(--text);
    font-size: var(--fs-body);
}

.ui-qdrawer-refused-code[b-r9krbdg2pe] {
    background: none;
    border: none;
    padding: 0;
    margin-left: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    color: var(--text-secondary);
    text-decoration: underline dotted;
    cursor: pointer;
}

.ui-qdrawer-refused-code:focus-visible[b-r9krbdg2pe] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}
/* frontend/Components/Ui/Radio/Radio.razor.rz.scp.css */
/* FPL-001/REQ-003, row 42 — Radio. Ours in CSS AND markup, no supplier. `.ui-ck`/`.ui-ck-off`/
   `.ui-ck-input`/`.ui-ck-box`/`.ui-ck-label` duplicate Checkbox's own rules byte-for-byte (Blazor
   CSS isolation scopes each component's file independently — Select/Combobox/ReasonBox already
   duplicate shared field classes the same way; this follows that convention for the shared `.ck`
   visual system instead of the shared field-wrapper one). Only the box's shape (pill, not
   rounded-square) and its filled state (a dot, not a check/dash) differ from Checkbox — the sheet
   draws both as the same family (`04-data-entry.html` §6, "CHECKBOX · RADIO · SWITCH"). */

.ui-rg[b-k86pl8iehl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ui-rg-lbl[b-k86pl8iehl] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
}

/* "2-5 options, all visible for comparison" (research #32) -- inline, wrapping, 24px gap. */
.ui-rg-inline[b-k86pl8iehl] {
    display: flex;
    align-items: center;
    gap: var(--space-24);
    flex-wrap: wrap;
}

.ui-ck[b-k86pl8iehl] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--check-gap);
    font-size: var(--fs-body);
    color: var(--text);
    cursor: pointer;
}

/* Never `pointer-events: none` here (2026-09-19, planner ruling): the option must stay reachable
   by real hover (for its reason tooltip) and by a real click (so the guard in Radio.razor's own
   @onchange handler, not the browser's disabled-element short-circuit, is what blocks selection).
   `cursor: not-allowed` overrides `.ui-ck`'s own `cursor: pointer` as the only visual "this won't
   do anything" signal that doesn't also break interactivity. */
.ui-rg-reason-disabled[b-k86pl8iehl] {
    cursor: not-allowed;
}

/* REQ-012 FR-1: the option's label is NOT dimmed — its parts are — so it can draw the focus ring at full strength (see Checkbox.razor.css / Tooltip.razor.css). */
.ui-rg-reason-disabled > .ui-ck-box[b-k86pl8iehl],
.ui-rg-reason-disabled > .ui-ck-label[b-k86pl8iehl] {
    opacity: var(--disabled-opacity);
}

.ui-rg-item:has(> .ui-ck-input.ui-dis:focus-visible)[b-k86pl8iehl] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius);
}

.ui-ck-input[b-k86pl8iehl] {
    position: absolute;
    width: var(--check-size);
    height: var(--check-size);
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* Same fix Checkbox's own build found and verified live (row 41): without `pointer-events: none`
   here, this later DOM sibling paints on top of the native input at the same rect and intercepts
   the click before it reaches the input. Reused verbatim -- identical structural cause, not
   re-discovered from scratch. */
.ui-rg-box[b-k86pl8iehl] {
    border-radius: var(--radius-pill);
    pointer-events: none;
}

/* box-sizing: border-box (whole-branch pass) -- declared 16x16 + this rule's own 1px border
   rendered 18x18 live. Checkbox's own .ui-ck-box (a separate CSS-isolated file, same class name by
   convention) has the identical fix -- CSS isolation means fixing one file never reaches the
   other. */
.ui-ck-box[b-k86pl8iehl] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--check-size);
    height: var(--check-size);
    flex: none;
    border: var(--border-w) solid var(--line);
    background: var(--surface);
    transition: background var(--motion-micro) var(--ease), border-color var(--motion-micro) var(--ease);
}

.ui-ck:hover .ui-ck-box[b-k86pl8iehl] {
    border-color: var(--line-hover);
}

.ui-rg-dot[b-k86pl8iehl] {
    display: block;
    width: var(--radio-dot);
    height: var(--radio-dot);
    border-radius: var(--radius-pill);
    background: var(--on-accent);
    opacity: 0;
}

.ui-ck-input:checked + .ui-ck-box[b-k86pl8iehl] {
    background: var(--accent);
    border-color: var(--accent);
}

.ui-ck-input:checked + .ui-ck-box .ui-rg-dot[b-k86pl8iehl] {
    opacity: 1;
}

.ui-ck-input:focus-visible:not(.ui-dis) + .ui-ck-box[b-k86pl8iehl] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-ck-label[b-k86pl8iehl] {
    line-height: var(--lh-body);
}
/* frontend/Components/Ui/Rail/Rail.razor.rz.scp.css */
/* FPL-001/REQ-004, row 2 (family 1b) — Section rail. Every value is var(--token) (UI-LAYER.md §6).
   Expanded values are sheet-specified (01-shell.html's .rail/.rail-head/.rail-item/.rail-count/
   .rail-foot). The collapsed width/icon-only shape is named in --rail-w-collapsed's own comment but
   not drawn — this file's collapsed rules are this component's own synthesis; see Rail.md. */

/* box-sizing: border-box (whole-branch pass) -- declared width 220px + this rule's own
   border-right rendered 221px live. */
.ui-rail[b-gy1fi7grey] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: var(--rail-w);
    flex: none;
    background: var(--surface);
    border-right: var(--border-w) solid var(--line);
    color: var(--text);
    transition: width var(--motion-menu) var(--ease);
}

.ui-rail-collapsed[b-gy1fi7grey] {
    width: var(--rail-w-collapsed);
}

/* box-sizing: border-box (whole-branch pass) -- declared height (--topbar-h, 48px) + this rule's
   own border-bottom rendered 49px live. */
.ui-rail-head[b-gy1fi7grey] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: none;
    height: var(--topbar-h);
    padding: 0 var(--space-16);
    border-bottom: var(--border-w) solid var(--line);
    font-size: var(--fs-heading-sm);
    line-height: var(--lh-heading-sm);
    font-weight: var(--fw-semibold);
    overflow: hidden;
}

.ui-rail-collapsed .ui-rail-head[b-gy1fi7grey] {
    justify-content: center;
    padding: 0;
}

.ui-rail-head-avatar[b-gy1fi7grey] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-sm);
    height: var(--avatar-sm);
    border-radius: var(--radius-pill);
    background: var(--neutral-bg);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    flex: none;
}

.ui-rail-head-label[b-gy1fi7grey] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-rail-nav[b-gy1fi7grey] {
    flex: 1;
    overflow: auto;
    padding: var(--space-8) 0;
}

.ui-rail-item[b-gy1fi7grey] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    height: var(--rail-item-h);
    padding: 0 var(--space-16);
    font: inherit;
    font-size: var(--fs-body);
    color: var(--text);
    background: none;
    border: none;
    border-left: var(--rail-active-w) solid transparent;
    cursor: pointer;
    transition: background var(--motion-micro) var(--ease);
}

.ui-rail-collapsed .ui-rail-item[b-gy1fi7grey] {
    justify-content: center;
    padding: 0;
}

.ui-rail-item:hover[b-gy1fi7grey] {
    background: var(--fill-1);
}

.ui-rail-item-current[b-gy1fi7grey] {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: var(--fw-medium);
    border-left-color: var(--accent);
}

/* FPL-001/REQ-018 (item 49) FR-1(b): drew the browser's default outline. `.ui-rail-item` is `width: 100%` inside
   `.ui-rail-nav` (`overflow: auto`, above) — an outset ring's left/right edge would sit exactly on (or past) the
   nav's own scroll boundary and be clipped, the same shape as the stepper arrow's inset ring (REQ-014 FR-5): the
   ring goes INSET here (`.ui-rail-foot` below sits OUTSIDE `.ui-rail-nav` and is not clipped, so it stays outset). */
.ui-rail-item:focus-visible[b-gy1fi7grey] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: calc(var(--focus-w) * -1);
}

.ui-rail-item-label[b-gy1fi7grey] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-rail-item-icon[b-gy1fi7grey] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
}

.ui-rail-count[b-gy1fi7grey] {
    margin-left: auto;
    min-width: var(--badge);
    height: var(--badge);
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--neutral-bg);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--badge);
    font-weight: var(--fw-medium);
    text-align: center;
}

.ui-rail-item-current .ui-rail-count[b-gy1fi7grey] {
    background: var(--surface);
    color: var(--accent);
}

.ui-rail-foot[b-gy1fi7grey] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: none;
    height: var(--control-h-lg);
    padding: 0 var(--space-16);
    font: inherit;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    background: none;
    border: none;
    border-top: var(--border-w) solid var(--line);
    cursor: pointer;
    transition: background var(--motion-micro) var(--ease);
}

.ui-rail-collapsed .ui-rail-foot[b-gy1fi7grey] {
    justify-content: center;
    padding: 0;
}

/* FPL-001/REQ-018 (item 49) FR-1(a): drew the browser's default outline — outset, the layer's default. Unlike
   `.ui-rail-item` above, this button sits OUTSIDE `.ui-rail-nav`'s scrolling box (a sibling, not a child — see
   Rail.razor), so an outset ring is not clipped by it. */
.ui-rail-foot:focus-visible[b-gy1fi7grey] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-rail-foot:hover[b-gy1fi7grey] {
    background: var(--fill-1);
}

.ui-rail-foot-ic[b-gy1fi7grey] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
}
/* frontend/Components/Ui/ReasonBox/ReasonBox.razor.rz.scp.css */
/* FPL-001/REQ-003, row 54 — Reason box. Ours in CSS AND markup. No supplier, no `::deep` concern.
   .ui-fld/.ui-fld-w/.ui-fld-lbl/.ui-req/.ui-in/.ui-hint/.ui-bad/.ui-bad-ic duplicate TextInput's own
   rules byte-for-byte (Blazor CSS isolation scopes each component's file independently — Select and
   Combobox both already duplicate the same shared field classes rather than reference another
   component's scoped file; this follows that established convention, not a new one). */

.ui-fld[b-bv4nzclnve] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: var(--field-w);
}

.ui-fld-w[b-bv4nzclnve] {
    width: 100%;
}

.ui-fld-lbl[b-bv4nzclnve] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
}

.ui-req[b-bv4nzclnve] {
    color: var(--accent);
}

/* The sheet's own shape (04-data-entry.html §11): input and the gated button on one row, bottom
   aligned so the button's own height (32px) lines up with the input's regardless of the label
   sitting above only the input's column. */
.ui-reason[b-bv4nzclnve] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-8);
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app; this
   rule's own declared width/height plus its own padding and border would otherwise stack under the
   browser's content-box default, rendering wider/taller than --control-h -- this component's own
   copy of the same duplicated base-input rule TextInput/SearchBox/Combobox each carry separately. */
.ui-in[b-bv4nzclnve] {
    box-sizing: border-box;
    width: 100%;
    height: var(--control-h);
    padding: 0 var(--input-pad-x);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--fs-body);
    color: var(--text);
}

.ui-in[b-bv4nzclnve]::placeholder {
    color: var(--placeholder);
}

.ui-in:hover:not(:disabled)[b-bv4nzclnve] {
    border-color: var(--line-hover);
}

.ui-in:focus-visible[b-bv4nzclnve] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

/* Matching specificity to the hover rule, same fix TextInput/DatePicker already needed (row 36's
   own disclosed gap) — checked here proactively rather than waiting to re-find it. */
.ui-in-bad[b-bv4nzclnve] {
    border-color: var(--error);
}

.ui-in-bad:hover:not(:disabled)[b-bv4nzclnve] {
    border-color: var(--error);
}

.ui-hint[b-bv4nzclnve] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-bad[b-bv4nzclnve] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    color: var(--error);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-bad-ic[b-bv4nzclnve] {
    flex: none;
    width: var(--lh-tight);
    height: var(--lh-tight);
    margin-top: var(--space-2);
}
/* frontend/Components/Ui/RepeatingRowEditor/RepeatingRowEditor.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 48 — Repeating row editor, matching .rep/.rep-head/.rep-r/.rep-c/
   .rep-err/.rep-foot/.grip/.no-line verbatim (04-data-entry.html lines 601-615). --drag-w/
   --control-h-sm/--control-h/--row-head-h/--space-4/--space-8/--space-12/--space-16/--border-w/
   --line/--placeholder/--text-secondary/--text/--fs-small/--fs-body/--lh-small/--field-w/--error/
   --radius/--fill-1/--disabled-opacity are all already-declared tokens; nothing new added here.

   .ui-rre-many's max-height (the "many" / >10-rows behaviour, applied only past 10 rows) is DERIVED from real
   tokens, not measured off a drawn specimen — see RepeatingRowEditor.razor's own header comment. */

/* REQ-014 FR-3: the editor takes its HOST's width, never its content's. In a flex-row host (the gallery's `.gallery-row` is one) an auto-width root shrink-wraps
   around its widest line — an error sentence widened `invalid-select` to 707 px and `invalid-number` to 648 against `typed`'s 704 (found live), moving every column.
   `width: 100%` gives the flex item a definite width, so error lines wrap inside it; `min-width: 0` lets a flex host still shrink it. (The same lesson as
   TwoColumnPageLayout's `.ui-twocol`.) */
.ui-rre[b-mu970pkv6l] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.ui-rre-empty-cap[b-mu970pkv6l] {
    margin: var(--space-8) 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-body);
}

/* The inner scroll applies only past 10 rows (`ui-rre-many`, set by the editor — sheet 04 §10's caption: "past 10 tiers the block gets its
   own inner scroll at 10 rows with the header sticky"). At or under 10 rows the container is a plain block: an `overflow` container
   clips any tooltip bubble that hangs outside it, and even a hidden bubble counts toward scrollable overflow — a Below bubble on the last
   row would otherwise raise a scrollbar on a three-row editor. The max-height value is unchanged. (REQ-009 FR-2b/2c.) */
.ui-rre-many[b-mu970pkv6l] {
    max-height: calc((var(--control-h) + var(--space-16)) * 10 + var(--row-head-h));
    overflow-y: auto;
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- this app has no global reset
   matching the sheet's own mockup-wide one (found first at MiniHeatTrendRow, recurring); declared
   height + this row's own border-bottom rendered 37px live, not 36. */
.ui-rre-head[b-mu970pkv6l] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    height: var(--row-head-h);
    color: var(--text-secondary);
    font-size: var(--fs-body);
    border-bottom: var(--border-w) solid var(--line);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}

/* A header cell clips its label (REQ-014 review): a flex-shrunk Text/Select cell is `min-width: 0`, so an unbreakable label ("Description") spilled past it and painted over the
   next column's header (and inflated the header's `scrollWidth`). Header cells only: a row cell must not clip its tooltip bubbles. */
.ui-rre-head > .ui-rre-c[b-mu970pkv6l] {
    overflow: hidden;
}

/* The header cell is body-sized so a Number column's width in `ch` means the same in the header as in the rows (found live: 128 px against 148);
   the LABEL is the sheet's small type. FPL-001/REQ-025 FR-12: a label past two lines gets a line-clamp ellipsis wherever the browser can
   draw one -- both the `-webkit-` form and the newer unprefixed one, deliberately a progressive enhancement: a browser with neither still
   just wraps and lets the CELL's own `overflow: hidden` (above) clip it, exactly as before this FR. The 32 px / 36 px sizing is UNCHANGED --
   this only decides what happens to a label that still doesn't fit inside it. */
.ui-rre-hd[b-mu970pkv6l] {
    font-weight: var(--fw-medium); /* the LABEL only: `1ch` in the header cell is measured in the row cells' weight (Inter Medium's zero is wider — 1.4 px over a Number column's 7ch) */
    font-size: var(--fs-small);
    line-height: var(--lh-small); /* two wrapped lines are 32 px: they fit the 36 px header (a label in a 44 px Switch column wraps) */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* REQ-012 Amended (6): a Number column's bounds live in its header label's tooltip. The hinted cell fills the header's height and so does the tooltip region inside it — the bubble is placed against the REGION, so it sits above the HEADER, not against the label's
   own box (measured: against the label it overlapped the header's top 4 px). The cell clips its label (`overflow: hidden`, REQ-014), so an outset ring on the label was cut to a sliver — the CELL draws the layer's ring instead, INSET (a control in a clipping host: the
   layer's inset-ring pattern), and the label draws none. The label is a tab stop (keyboard focus opens the bubble) and says so with the help cursor. */
.ui-rre-c-hint[b-mu970pkv6l] {
    align-self: stretch;
    display: flex;
    align-items: center;
}

.ui-rre-c-hint[b-mu970pkv6l]  .ui-tooltip-region {
    height: 100%;
    align-items: center;
}

.ui-rre-hd-hint[b-mu970pkv6l] {
    cursor: help;
}

.ui-rre-hd-hint:focus-visible[b-mu970pkv6l] {
    outline: none;
}

.ui-rre-c-hint:has(.ui-rre-hd-hint:focus-visible)[b-mu970pkv6l] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: calc(var(--focus-w) * -1);
    border-radius: var(--radius);
}

.ui-rre-row[b-mu970pkv6l] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    border-bottom: var(--border-w) solid var(--line);
}

.ui-rre-row.no-line[b-mu970pkv6l] {
    border-bottom: 0;
    padding-bottom: 0;
}

/* REQ-009 (sheet 04 §10b): the grip is a real control. The GUTTER is the pointer hit target — the whole grip gutter × the row's height
   (`align-self: stretch` with the row's own 8px padding cancelled by the negative block margin; the row-error rows have no bottom
   padding, so no bottom margin there) — while the GLYPH stays §10's 20 × 28 (`--drag-w` × `--control-h-sm`). `touch-action: none` lets
   a touch drag start here without scrolling the editor. */
.ui-rre-gutter[b-mu970pkv6l] {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: var(--drag-w);
    flex: none;
    margin-block: calc(var(--space-8) * -1);
    touch-action: none;
}

.ui-rre-row.no-line .ui-rre-gutter[b-mu970pkv6l] {
    margin-bottom: 0;
    padding-top: var(--space-8); /* the row has no bottom padding, so the stretched gutter is 40 px and would centre the glyph at 20; the controls centre at 24 */
}

.ui-rre-grip[b-mu970pkv6l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--drag-w);
    height: var(--control-h-sm);
    padding: 0;
    flex: none;
    border: 0;
    background: none;
    color: var(--placeholder);
    cursor: grab;
}

.ui-rre-grip:hover[b-mu970pkv6l] {
    color: var(--text-secondary);
}

.ui-rre-grip:focus-visible[b-mu970pkv6l] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

/* In the scrolled editor (`overflow-y: auto` makes `overflow-x` auto too) the grip sits at the scrollport's left edge and an outset ring would be clipped. */
.ui-rre-many .ui-rre-grip:focus-visible[b-mu970pkv6l] {
    outline-offset: calc(var(--focus-w) * -1);
}

.ui-rre-grip[aria-pressed='true'][b-mu970pkv6l] {
    cursor: grabbing;
}

/* Disabled-with-reason (UI-LAYER §16): dimmed, still a tab stop, still hoverable — the reason's hover half needs the pointer, so no
   `pointer-events: none` (the sheet's first drawing of `.grip.is-off` had it; the planner corrected the sheet, OpcenterPlan 96239cb). */
.ui-rre-grip[aria-disabled='true'][b-mu970pkv6l] {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

/* The picked-up row (sheet §10b `.rep-r.is-lift`): §12d's drag-to-reorder treatment — accent-soft fill and a dashed accent hairline —
   drawn as an INSET outline (row 44's "today" mechanism) so the lifted row is not a pixel taller than the rows it sits between. */
.ui-rre-row.is-lift[b-mu970pkv6l] {
    background: var(--accent-soft);
    border-radius: var(--radius);
    outline: var(--border-w) dashed var(--accent);
    outline-offset: calc(var(--border-w) * -1);
}

/* The drop line (sheet §10b `.rep-drop`): twice a hairline in the accent, in flow between two rows and spanning the editor, so it can
   never be read as a row divider. */
.ui-rre-drop[b-mu970pkv6l] {
    height: var(--drop-line);
    background: var(--accent);
    border-radius: var(--radius-pill);
}

/* The announcements (a polite live region): visually hidden, still read. */
.ui-rre-live[b-mu970pkv6l] {
    position: absolute;
    width: var(--border-w);
    height: var(--border-w);
    padding: 0;
    margin: calc(var(--border-w) * -1);
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ui-rre-c[b-mu970pkv6l] {
    flex: 1;
    min-width: 0;
}

.ui-rre-c.narrow[b-mu970pkv6l] {
    flex: none;
    width: var(--field-w);
}

.ui-rre-err[b-mu970pkv6l] {
    padding: 0 0 var(--space-8) calc(var(--drag-w) + var(--space-8));
    border-bottom: var(--border-w) solid var(--line);
}

.ui-rre-nogrip .ui-rre-err[b-mu970pkv6l] {
    padding-left: 0;
}

.ui-rre-bad[b-mu970pkv6l] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    color: var(--error);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-rre-bad .ui-rre-ic-sm[b-mu970pkv6l] {
    flex: none;
    margin-top: var(--space-2);
}

/* REQ-014: the header of a REFUSED editor (its fixed columns need more than the row has) is drawn nowhere and measured everywhere — out of flow, no height, clipped, invisible.
   Its columns keep their real widths, so repeatingRowEditor.js still reads what the fixed columns need (and the editor knows when they fit again); clipped overflow adds nothing to any
   ancestor's scrollable area, so nothing scrolls sideways in the editor or its host. Declared after `.ui-rre-head`, which it overrides. */
.ui-rre-gauge[b-mu970pkv6l] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    border-bottom: 0;
}

.ui-rre-foot[b-mu970pkv6l] {
    padding-top: var(--space-12);
}

.ui-rre-icbtn[b-mu970pkv6l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    flex: none;
    border-radius: var(--radius);
    background: none;
    border: none;
    color: var(--text-secondary);
    transition: background var(--motion-micro) var(--ease);
}

.ui-rre-icbtn:hover[b-mu970pkv6l] {
    background: var(--fill-1);
    color: var(--text);
}

/* FPL-001/REQ-018 (item 49) FR-1(a): drew the browser's default outline (no rule at all) — outset, the layer's default; the audit's own clip measurement found no clipping ancestor here. */
.ui-rre-icbtn:focus-visible[b-mu970pkv6l] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

/* A locked row's ✖ (REQ-009 Amended (5); sheet §10b specimen 3 `.icon-btn.is-off`): the layer's disabled-with-reason shape — dimmed, still a
   tab stop, still hoverable for its reason (UI-LAYER §16: aria-disabled, never the native `disabled`, no pointer-events: none). */
.ui-rre-icbtn[aria-disabled='true'][b-mu970pkv6l] {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

.ui-rre-icbtn[aria-disabled='true']:hover[b-mu970pkv6l] {
    background: none;
    color: var(--text-secondary);
}

.ui-rre-ic[b-mu970pkv6l] {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.ui-rre-ic-sm[b-mu970pkv6l] {
    width: var(--space-12);
    height: var(--space-12);
}
/* frontend/Components/Ui/RichTextEditor/RichTextBoxShell.razor.rz.scp.css */
/* FPL-001/REQ-057 — the editor's boxes (04 `.rte-pop`): the layer's floating surface at the combo width, a stack of 8, the buttons on one row. The anchor is an invisible box at the selection. The content is authored by the box that
   uses this shell, so every rule reaches it through ::deep. */

/* The shell itself takes no room: the Popover's inline wrapper would otherwise make a 20 px line (and a flex gap) under the editor for every box — 72 px of blank space under a Full editor (merge-2 review). */
.ui-rte-box[b-d8rj2o3rs5] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: visible;
}

.ui-rte-box[b-d8rj2o3rs5]  .ui-rte-pop {
    box-sizing: border-box;   /* the sheet's box is 320 px WITH its padding (04 `.rte-pop`) */
    width: var(--combo-w);
}

.ui-rte-anchor[b-d8rj2o3rs5] {
    position: fixed;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ui-rte-box[b-d8rj2o3rs5]  .ui-rte-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.ui-rte-box[b-d8rj2o3rs5]  .ui-rte-pop-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.ui-rte-box[b-d8rj2o3rs5]  .ui-rte-spacer {
    flex: 1;
}

.ui-rte-box[b-d8rj2o3rs5]  .ui-rte-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ui-rte-box[b-d8rj2o3rs5]  .ui-rte-field-label {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
}

.ui-rte-box[b-d8rj2o3rs5]  .ui-rte-grp {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ui-rte-box[b-d8rj2o3rs5]  .ui-rte-file {
    display: none;
}

.ui-rte-box[b-d8rj2o3rs5]  .ui-rte-enter {
    display: contents;
}
/* frontend/Components/Ui/RichTextEditor/RichTextEditor.razor.rz.scp.css */
/* FPL-001/REQ-057 (row 51) — every rule that styles the editor: the sheet's `.rte-` rules (04-data-entry.html#s-rte), tokens only. The frame IS the text field's frame (sheet 04 §1: hairline, 4 px radius, surface, hover border, ONE focus ring,
   error = the red border, disabled = fill-1 at .4); the toolbar sits inside it under a hairline; the text is the textarea's 6 / 10 padding and 20 px lines. The engine's DOM carries no Blazor scope attribute, so each rule that reaches it
   goes through ::deep from an element this component renders (`.ui-rte-body`); the engine's own stylesheet is switched off (injectCSS: false) and the base rules ProseMirror needs are re-owned here (FR-19). */

.ui-rte[b-1anrtbz18o] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

.ui-rte-frame[b-1anrtbz18o] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.ui-rte-frame:hover[b-1anrtbz18o] {
    border-color: var(--line-hover);
}

/* the sheet's one ring, on the frame, border unchanged — while the TEXT has focus (a focused toolbar control draws its own ring, never two) */
.ui-rte-frame:has(.ui-rte-body :focus)[b-1anrtbz18o] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-rte-bad[b-1anrtbz18o],
.ui-rte-bad:hover[b-1anrtbz18o] {
    border-color: var(--error);
}

/* disabled: §1's look on the whole frame, toolbar included; the frame itself stays the tab stop (the tooltip region around it carries the reason on hover and focus) */
.ui-rte-off[b-1anrtbz18o] {
    background: var(--fill-1);
    color: var(--text-secondary);
    opacity: var(--disabled-opacity);
    pointer-events: none;
}

.ui-rte-off:focus-visible[b-1anrtbz18o] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

/* ---- the toolbar: 28 px icon buttons in groups separated by spacing only; 36 px high with its padding ---- */
.ui-rte-bar[b-1anrtbz18o] {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-4);
    border-bottom: var(--border-w) solid var(--line);
    min-width: 0;
}

.ui-rte-bar[hidden][b-1anrtbz18o],
.ui-rte-t[hidden][b-1anrtbz18o] {
    display: none !important;
}

.ui-rte-grp[b-1anrtbz18o] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
}

/* the fold (toolbar.js marks what does not fit): hidden controls take no room; a group with nothing left shows nothing, so no stray gap remains */
.ui-rte-t[data-rte-fold][b-1anrtbz18o] {
    display: none;
}

.ui-rte-grp:not(:has(.ui-rte-t:not([data-rte-fold])))[b-1anrtbz18o] {
    display: none;
}

.ui-rte-end[b-1anrtbz18o] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: none;
}

.ui-rte-t[b-1anrtbz18o] {
    position: relative;
    display: inline-flex;
    flex: none;
}

.ui-rte-menu[b-1anrtbz18o] {
    position: relative;
    display: inline-flex;
}

/* a dropdown control: the same button wider by its caret (04 `.icon-btn.rte-dd`) */
.ui-rte-dd[b-1anrtbz18o]  fluent-button.ui-icon-btn[size='small'] {
    /* glyph + gap + caret + both paddings, spelled out: the supplier's icon-only host would otherwise keep its square */
    width: calc(var(--icon-sm) * 2 + var(--space-2) + var(--space-4) * 2);
    min-width: var(--control-h-sm);
    max-width: none;   /* the supplier's icon-only host caps its width */
    gap: var(--space-2);
    padding: 0 var(--space-4);
}

/* a menu is open from this control (04 `.icon-btn.rte-open`: sheet 02's hover look) */
.ui-rte-bar[b-1anrtbz18o]  fluent-button[aria-expanded="true"] {
    background: var(--fill-1);
    color: var(--text);
}

.ui-rte-keys[b-1anrtbz18o] {
    margin-left: auto;
    padding-left: var(--space-16);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
}

/* ---- the text area: the textarea's padding and lines; scrolls INSIDE the frame, the toolbar stays; the layer's thin thumb (REQ-051) ---- */
.ui-rte-body[b-1anrtbz18o] {
    box-sizing: border-box;
    padding: var(--textarea-pad-y) var(--input-pad-x);
    overflow: auto;
    overflow-wrap: anywhere;
    /* the sheet's unitless row counts (04 `--rte-rows` 8, `--rte-rows-max` 12; Composer 3 and 8) × --lh-body, the textarea's own convention. Bare numbers here, not four new tokens: the token set stays the 332 names (the report names the choice) */
    min-height: calc(var(--lh-body) * 8 + var(--textarea-pad-y) * 2);
    max-height: calc(var(--lh-body) * 12 + var(--textarea-pad-y) * 2);
    scrollbar-gutter: stable;
    /* the legacy MudBlazor stylesheet sets `scrollbar-width: thin` on every element; Chrome >= 121 ignores ::-webkit-scrollbar on one whose scrollbar-width is not auto -- taken back here, as the menu's and the select's lists do */
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.ui-rte-body[b-1anrtbz18o]::-webkit-scrollbar {
    width: calc(var(--space-4) + var(--space-2));
    background: transparent;
}

.ui-rte-body[b-1anrtbz18o]::-webkit-scrollbar-track,
.ui-rte-body[b-1anrtbz18o]::-webkit-scrollbar-corner {
    background: transparent;
}

.ui-rte-body[b-1anrtbz18o]::-webkit-scrollbar-button {
    display: none;
}

.ui-rte-body[b-1anrtbz18o]::-webkit-scrollbar-thumb {
    background: var(--placeholder);
    border-radius: var(--radius-pill);
}

@supports not selector(::-webkit-scrollbar) {
    .ui-rte-body[b-1anrtbz18o] {
        scrollbar-width: thin;
        scrollbar-color: var(--placeholder) transparent;
    }
}

/* ---- read-only: the formatted text with no frame and no toolbar, the same rhythm (links open) ---- */
.ui-rte-ro .ui-rte-frame[b-1anrtbz18o],
.ui-rte-ro .ui-rte-frame:hover[b-1anrtbz18o] {
    border-color: transparent;
    background: none;
}

.ui-rte-ro .ui-rte-frame:has(.ui-rte-body :focus)[b-1anrtbz18o] {
    outline: none;
}

.ui-rte-ro .ui-rte-body[b-1anrtbz18o] {
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: visible;
}

.ui-rte-dash[b-1anrtbz18o] {
    color: var(--text-secondary);
}

.ui-rte-ro:has(.ui-rte-dash) .ui-rte-frame[b-1anrtbz18o] {
    display: none;
}

/* ---- the error line and the count: the layer's own (TextInput's `.ui-bad`, the textarea's `.ui-ta-count`) ---- */
.ui-bad[b-1anrtbz18o] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    color: var(--error);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-bad-ic[b-1anrtbz18o] {
    display: inline-flex;
    flex: none;
    margin-top: var(--space-2);
}

.ui-rte-foot[b-1anrtbz18o] {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
}

.ui-rte-count[b-1anrtbz18o] {
    margin-left: auto;
    flex: none;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-variant-numeric: tabular-nums;
}

.ui-rte-count-warn[b-1anrtbz18o] {
    color: var(--warn);
    font-weight: var(--fw-medium);
}

/* ---- the engine's DOM ---- */
.ui-rte-body[b-1anrtbz18o]  .ProseMirror {
    position: relative;
    outline: none;
    word-wrap: break-word;
    white-space: pre-wrap;
    white-space: break-spaces;
    font-variant-ligatures: none;
    caret-color: var(--text);
}

/* every block starts at zero margin (at zero specificity, so the 8 px rhythm below wins), and top-level blocks are 8 px apart (04 `.rte-body > * + *`) */
.ui-rte-body[b-1anrtbz18o]  .ProseMirror :where(p, h1, h2, h3, ul, ol) {
    margin: 0;
}

.ui-rte-body[b-1anrtbz18o]  .ProseMirror > * + * {
    margin-top: var(--space-8);
}

.ui-rte-body[b-1anrtbz18o]  .ProseMirror h1,
.ui-rte-body[b-1anrtbz18o]  .ProseMirror h2,
.ui-rte-body[b-1anrtbz18o]  .ProseMirror h3 {
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.ui-rte-body[b-1anrtbz18o]  .ProseMirror h1 {
    font-size: var(--fs-title);
    line-height: var(--lh-title);
}

.ui-rte-body[b-1anrtbz18o]  .ProseMirror h2 {
    font-size: var(--fs-heading-md);
    line-height: var(--lh-heading-md);
}

.ui-rte-body[b-1anrtbz18o]  .ProseMirror h3 {
    font-size: var(--fs-heading-sm);
    line-height: var(--lh-heading-sm);
}

.ui-rte-body[b-1anrtbz18o]  .ProseMirror ul,
.ui-rte-body[b-1anrtbz18o]  .ProseMirror ol {
    padding-left: var(--space-24);
}

.ui-rte-body[b-1anrtbz18o]  .ProseMirror a {
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}

/* the placeholder: the engine marks the empty first block; the text is the host's instruction in the layer's placeholder colour */
.ui-rte-body[b-1anrtbz18o]  .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    color: var(--placeholder);
    pointer-events: none;
}

.ui-rte-body[b-1anrtbz18o]  .ProseMirror ::selection {
    background: var(--accent-soft);
}

.ui-rte-body[b-1anrtbz18o]  .ProseMirror .ProseMirror-selectednode {
    outline: var(--focus-w) solid var(--accent);
}
/* an image's container spans the line: the ring hugs the image (its wrapper), and the handle sits centred on the ring's bottom-right corner (04 `.rte-img`, handle at right/bottom: -dot/2) */
.ui-rte-body[b-1anrtbz18o]  .ProseMirror [data-resize-container].ProseMirror-selectednode { outline: none; }
.ui-rte-body[b-1anrtbz18o]  .ProseMirror [data-resize-container].ProseMirror-selectednode > [data-resize-wrapper] { outline: var(--focus-w) solid var(--accent); }

/* W3: the engine's image has no alignment of its own; an align attribute (entry.js) carries it and these rules draw it */
.ui-rte-body[b-1anrtbz18o]  .ProseMirror div:has(> [data-resize-wrapper] img[data-align="center"]) { display: flex; justify-content: center; }
.ui-rte-body[b-1anrtbz18o]  .ProseMirror div:has(> [data-resize-wrapper] img[data-align="right"]) { display: flex; justify-content: flex-end; }

.ui-rte-body[b-1anrtbz18o]  .ProseMirror table {
    border-collapse: collapse;
    margin: var(--space-8) 0;
    table-layout: fixed;
    width: 100%;
}

.ui-rte-body[b-1anrtbz18o]  .ProseMirror td,
.ui-rte-body[b-1anrtbz18o]  .ProseMirror th {
    box-sizing: border-box;
    position: relative;
    min-width: var(--control-h);
    padding: var(--space-4) var(--space-8);
    border: var(--border-w) solid var(--line);
    vertical-align: top;
    text-align: left;   /* the legacy sheet centres a th; a cell's alignment is its paragraphs' own (the text-align attribute), never the browser's (04 `.rte-tbl th,td`) */
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.ui-rte-body[b-1anrtbz18o]  .ProseMirror th {
    background: var(--fill-1);
    font-weight: var(--fw-semibold);
}

/* W7: with injectCSS off the table's cell selection and column-resize handle have no look at all. A selected cell: accent-soft with a 1 px inset accent line (04 `.rte-cell-on`); the column border under the pointer: a 2 px accent handle — row 48's drop line stood upright (04 `.rte-colrs`) */
.ui-rte-body[b-1anrtbz18o]  .ProseMirror .tableWrapper { overflow-x: auto; }
.ui-rte-body[b-1anrtbz18o]  .ProseMirror .selectedCell {
    background: var(--accent-soft);
    outline: var(--border-w) solid var(--accent);
    outline-offset: calc(var(--border-w) * -1);
}
.ui-rte-body[b-1anrtbz18o]  .ProseMirror .column-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--drop-line) / -2);
    width: var(--drop-line);
    background: var(--accent);
    border-radius: var(--radius-pill);
    pointer-events: none;
}
.ui-rte-body[b-1anrtbz18o]  .ProseMirror.resize-cursor { cursor: col-resize; }

/* W4: with injectCSS off the engine's image resize handle has no size and no look at all (an inline position only): the wrapper draws it */
.ui-rte-body[b-1anrtbz18o]  .ProseMirror [data-resize-wrapper] { max-width: 100%; }
.ui-rte-body[b-1anrtbz18o]  .ProseMirror [data-resize-handle] {
    width: var(--dot);
    height: var(--dot);
    background: var(--accent);
    border: var(--border-w) solid var(--surface);
    border-radius: var(--skel-radius);
    cursor: nwse-resize;
    display: none;
    transform: translate(50%, 50%);
}
.ui-rte-body[b-1anrtbz18o]  .ProseMirror .ProseMirror-selectednode [data-resize-handle],
.ui-rte-body[b-1anrtbz18o]  .ProseMirror [data-resize-wrapper]:hover [data-resize-handle] { display: block; }

/* the upload placeholder (FR-6): the layer's ring and the file's name where the image will go — never part of the saved content */
.ui-rte-body[b-1anrtbz18o]  .ui-rte-upload {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: 0 var(--space-8);
    vertical-align: top;
    background: var(--fill-1);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
}

/* the image in the text: selected = the focus ring's width and colour at 0 offset (04 `.rte-img.is-sel`) */
.ui-rte-body[b-1anrtbz18o]  .ProseMirror img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

/* the gap cursor (the engine's default is a hard-coded black line) and the drop cursor */
.ui-rte-body[b-1anrtbz18o]  .ProseMirror-gapcursor {
    display: none;
    pointer-events: none;
    position: absolute;
    margin: 0;
}

.ui-rte-body[b-1anrtbz18o]  .ProseMirror-gapcursor::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(var(--border-w) * -2);
    width: var(--space-16);
    border-top: var(--border-w) solid var(--text);
}

.ui-rte-body[b-1anrtbz18o]  .ProseMirror-hideselection *::selection {
    background: transparent;
}

.ui-rte-body[b-1anrtbz18o]  .ProseMirror-focused .ProseMirror-gapcursor {
    display: block;
}

/* ---- the two inline units (FR-7, FR-8): the quiet chip — fill-1, a hairline, one pixel short of the line so a chip never makes its line taller (04 `.rte-tok`, `.rte-men`) ---- */
.ui-rte-body[b-1anrtbz18o]  .ProseMirror [data-type="field"],
.ui-rte-body[b-1anrtbz18o]  .ProseMirror [data-type="mention"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 var(--space-4);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--fill-1);
    line-height: calc(var(--lh-body) - var(--border-w) * 2);
}

.ui-rte-body[b-1anrtbz18o]  .ProseMirror [data-type="field"] {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.ui-rte-body[b-1anrtbz18o]  .ProseMirror [data-type="mention"] {
    color: var(--text);
    font-weight: var(--fw-medium);
}

/* ---- the "@" list: row 20's rows in the layer's floating surface; the keyboard-active row takes the option's hover look (04 `.opt.rte-act`); one line of consequence under it ---- */
/* the box takes no room (its Popover wrapper would make a 20 px line under the editor) */
.ui-rte-sugbox[b-1anrtbz18o] {
    position: absolute;
    width: 0;
    height: 0;
}

.ui-rte-sugbox[b-1anrtbz18o]  .ui-rte-sug {
    min-width: var(--menu-col-w);
    padding: var(--space-4);
}

.ui-rte-sug-list[b-1anrtbz18o] {
    max-height: calc(var(--control-h) * 6);
    overflow-y: auto;
}

.ui-rte-sug-list[b-1anrtbz18o]  [data-on="true"] {
    background: var(--fill-1);
}

.ui-rte-person[b-1anrtbz18o] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
}

.ui-rte-person-text[b-1anrtbz18o] {
    display: flex;
    flex-direction: column;
}

.ui-rte-person-name[b-1anrtbz18o] {
    font-weight: var(--fw-medium);
}

.ui-rte-person-sub[b-1anrtbz18o] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-rte-sug-note[b-1anrtbz18o] {
    margin-top: var(--space-4);
    border-top: var(--border-w) solid var(--line);
    padding: var(--space-4) var(--space-8) 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-rte-anchor[b-1anrtbz18o] {
    position: fixed;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ---- Composer (04 `.rte-cmp`, `.rte-bar.rte-foot`): 3 lines at rest growing to 8, then scrolling; the toolbar along the BOTTOM under a hairline; the count at the right of the bar ---- */
.ui-rte[data-setting="composer"] .ui-rte-body[b-1anrtbz18o] {
    min-height: calc(var(--lh-body) * 3 + var(--textarea-pad-y) * 2);
    max-height: calc(var(--lh-body) * 8 + var(--textarea-pad-y) * 2);
}

.ui-rte-bar.ui-rte-barfoot[b-1anrtbz18o] {
    border-bottom: 0;
    border-top: var(--border-w) solid var(--line);
}

.ui-rte-end .ui-rte-count[b-1anrtbz18o] {
    margin-left: 0;
}

/* ---- Minimal (04 `.rte-min`, `.rte-minbar`): at rest the 32 px text field; while focused a small toolbar floats 8 px above the frame ---- */
.ui-rte[data-setting="minimal"] .ui-rte-body[b-1anrtbz18o] {
    min-height: 0;
    max-height: none;
    padding: calc((var(--control-h) - var(--lh-body) - var(--border-w) * 2) / 2) var(--input-pad-x);
}

.ui-rte-bar.ui-rte-minbar[b-1anrtbz18o] {
    position: absolute;
    left: calc(var(--border-w) * -1);
    bottom: calc(100% + var(--border-w) + var(--space-8));
    z-index: 30;
    gap: var(--space-8);
    padding: var(--space-2);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-overlay);
}

/* a table cell (04 `.rte.rte-cell`, `.rte-cell .rte-body`): no border and no fill at rest, the cell's padding extended to its edges, one ellipsised line until it has focus */
.ui-rte-cell[b-1anrtbz18o],
.ui-rte-cell:hover[b-1anrtbz18o] {
    border-color: transparent;
    background: none;
}

.ui-rte-cell[b-1anrtbz18o] {
    margin: 0 calc(var(--input-pad-x) * -1);
    width: calc(100% + var(--input-pad-x) * 2);
}

.ui-rte-cell:not(:focus-within) .ui-rte-body[b-1anrtbz18o]  .ProseMirror p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* text for assistive technology only (the mention list's result count) */
.ui-rte-sr[b-1anrtbz18o] {
    position: absolute;
    width: var(--border-w);
    height: var(--border-w);
    margin: calc(var(--border-w) * -1);
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* frontend/Components/Ui/SearchBox/SearchBox.razor.rz.scp.css */
/* FPL-001/REQ-003, row 46 -- Search box. Ours in markup (see SearchBox.razor's own header comment
   for why TextInput's SuffixIcon slot -- non-interactive by its own contract -- is the wrong shape
   for a clickable clear button). CSS-isolation scope attribute attaches directly to every selector
   below since there is no supplier custom element. */

.ui-srch[b-z5reb266dc] {
    position: relative;
    display: inline-block;
    width: var(--search-w);
}

/* Duplicated from TextInput/row 36's own base input rule, not cross-file-shared -- Blazor's CSS
   isolation scopes each component's rules separately, so a scoped class name existing in another
   component's stylesheet has zero effect here (a matter of scope, not naming) -- same duplication
   precedent every dialog-family row in this kit already accepted for its own base styling. */
/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app; this
   rule's own declared width/height plus its own padding and border would otherwise stack under the
   browser's content-box default, rendering wider/taller than --control-h. Same duplicated-rule shape
   as the comment above already explains -- this is this component's own copy of that defect. */
.ui-in[b-z5reb266dc] {
    box-sizing: border-box;
    width: 100%;
    height: var(--control-h);
    padding: 0 var(--input-pad-x);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--fs-body);
    color: var(--text);
}

.ui-in[b-z5reb266dc]::placeholder {
    color: var(--placeholder);
}

.ui-in:hover:not([aria-disabled="true"])[b-z5reb266dc] {
    border-color: var(--line-hover);
}

.ui-in:focus-visible[b-z5reb266dc] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-srch-w[b-z5reb266dc] {
    width: 100%;
}

.ui-srch-ic[b-z5reb266dc] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--placeholder);
    pointer-events: none;
}

.ui-srch-ic-pre[b-z5reb266dc] {
    left: var(--input-pad-x);
}

.ui-srch-ic svg[b-z5reb266dc] {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.ui-srch-in[b-z5reb266dc] {
    padding-left: var(--affix-pad);
}

.ui-srch-in-suf[b-z5reb266dc] {
    padding-right: var(--affix-pad);
}

.ui-srch-clear[b-z5reb266dc] {
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    border: none;
    background: transparent;
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
}

.ui-srch-clear:hover[b-z5reb266dc] {
    background: var(--fill-1);
    color: var(--text);
}

/* FR-3a (REQ-008 Amended (2)) — the disabled-with-reason state, real per UI-LAYER §16. The sheet's `.in.is-off` (fill-1 background, text-secondary colour, --disabled-opacity) — but WITHOUT its
   `pointer-events: none`: the reason bubble opens on hover and the box stays reachable by Tab and FocusAsync (§16 — "never pointer-events: none on a control that carries a reason"). Dimmed on
   the input, the prefix icon and the ✕ themselves and NEVER on the wrapper `.ui-srch`: the reason bubble is the wrapper's descendant and would be dimmed with it. Same class-not-`:disabled` shape
   as TextInput's `.ui-in-off` (the native `disabled` is never set). */
.ui-srch-in-off[b-z5reb266dc] {
    background: var(--fill-1);
    color: var(--text-secondary);
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

.ui-srch-ic-off[b-z5reb266dc] {
    opacity: var(--disabled-opacity);
}

.ui-srch-clear-off[b-z5reb266dc] {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

.ui-srch-clear-off:hover[b-z5reb266dc] {
    background: transparent;
    color: var(--text-secondary);
}

.ui-srch-clear:focus-visible[b-z5reb266dc] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-srch-clear svg[b-z5reb266dc] {
    width: var(--icon-sm);
    height: var(--icon-sm);
}
/* frontend/Components/Ui/Select/Select.razor.rz.scp.css */
/* FPL-001/REQ-003, row 39 — Select. Ours in CSS AND markup (see Select.razor's own header comment
   for the two measured supplier findings that ruled out FluentSelect/FluentCombobox). No
   `::deep`/wrapper-scoping concern — no supplier custom element, so Blazor's own CSS-isolation
   scope attribute attaches directly to every element below exactly as written. */

.ui-fld[b-ut0ydpwpek] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: var(--select-w);
}

.ui-fld-w[b-ut0ydpwpek] {
    width: 100%;
}

.ui-fld-ghost[b-ut0ydpwpek] {
    width: auto;
    gap: 0;
}

.ui-fld-lbl[b-ut0ydpwpek] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
}

.ui-req[b-ut0ydpwpek] {
    color: var(--accent);
}

.ui-sel-wrap[b-ut0ydpwpek] {
    position: relative;
    width: 100%;
}

.ui-sel[b-ut0ydpwpek] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    height: var(--control-h);
    padding: 0 var(--input-pad-x);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--fs-body);
    color: var(--text);
}

.ui-sel:hover:not(:disabled)[b-ut0ydpwpek] {
    border-color: var(--line-hover);
}

.ui-sel:focus-visible[b-ut0ydpwpek] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-sel-open[b-ut0ydpwpek] {
    border-color: var(--accent);
}

/* REQ-009: the border-only invalid shape (sheet 04 §10b `.sel.is-bad{border-color:var(--error)}`, copied from `.in.is-bad`). No message
   in the control. The hover rule above is (0,3,0), so the hover state is restated to keep the error colour; an OPEN menu keeps its
   accent border — opening is the user acting on the control, and the error is still stated on the row-error line. */
.ui-sel-bad:not(.ui-sel-open)[b-ut0ydpwpek],
.ui-sel-bad:not(.ui-sel-open):hover:not(:disabled)[b-ut0ydpwpek] {
    border-color: var(--error);
}

/* Compact, borderless — matching Pager's own .ui-pg-style small controls (no fixed field width,
   sized to content, no border/background at rest). */
.ui-sel-ghost[b-ut0ydpwpek] {
    width: auto;
    height: var(--control-h-sm);
    padding: 0 var(--space-4);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ui-sel-ghost:hover:not(:disabled)[b-ut0ydpwpek] {
    border-color: transparent;
    background: var(--fill-1);
}

.ui-sel-ghost .ui-sel-v[b-ut0ydpwpek] {
    flex: none;
}

/* Catalogue-wide finding (2026-09-19, planner audit): a disabled-with-reason control stays
   reachable by Tab and shows its reason on keyboard focus, not just hover -- the native `disabled`
   attribute (and `pointer-events:none`, which also suppresses `:hover`) both remove that. A class,
   not `:disabled`, since the real attribute is gone; ToggleOpen/HandleKeyDown already no-op when
   Disabled (unchanged), so removing the attribute only restores focusability, not interactivity. */
.ui-sel-off[b-ut0ydpwpek] {
    background: var(--fill-1);
    color: var(--text-secondary);
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

.ui-sel-v[b-ut0ydpwpek] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.ui-sel-ph .ui-sel-v[b-ut0ydpwpek] {
    color: var(--placeholder);
}

.ui-sel-ic[b-ut0ydpwpek] {
    flex: none;
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: var(--text-secondary);
}

/* Read-only — plain text with a lock, never a disabled-looking select. */
.ui-sel-ro[b-ut0ydpwpek] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    height: var(--control-h);
    color: var(--text);
    font-size: var(--fs-body);
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- declared width 240px, but
   opening the menu live measured 258px (240 + this rule's own padding on both sides + its own 1px
   border on both sides, all adding on top under content-box). */
.ui-menu[b-ut0ydpwpek] {
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    margin-top: var(--space-4);
    min-width: var(--menu-col-w);
    width: var(--select-w);
    padding: var(--menu-pad);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-overlay);
    text-align: left;
}

/* REQ-009 (`InRepeatingRow`): the menu in the browser's top layer. The UA's `[popover]` defaults (`inset: 0; margin: auto;
   overflow: auto; position: fixed`) are reset here; `selectFloating.js` sets `top` / `left` / `width` inline from the trigger's rect
   (the trigger's width; `min-width: var(--menu-col-w)` above still applies). Not `position: absolute` — it must not be a child's
   box of the scrolled editor. */
/* MatchTriggerWidth (inline editors): the list is as wide as its trigger (sheet 04 §9b .ie-match) */
.ui-menu.ui-menu-match:not(.ui-menu-float)[b-ut0ydpwpek] {
    width: 100%;
}

.ui-menu.ui-menu-float[b-ut0ydpwpek] {
    position: fixed;
    inset: auto;
    margin: 0;
    overflow: visible;
}

.ui-fld-ghost .ui-menu[b-ut0ydpwpek] {
    width: max-content;
    min-width: 100%;
}

.ui-menu-search[b-ut0ydpwpek] {
    padding-bottom: var(--menu-pad);
    margin-bottom: var(--menu-pad);
    border-bottom: var(--border-w) solid var(--line);
}

.ui-menu-foot[b-ut0ydpwpek] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding-top: var(--menu-pad);
    margin-top: var(--menu-pad);
    border-top: var(--border-w) solid var(--line);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-srch[b-ut0ydpwpek] {
    position: relative;
    display: block;
    width: 100%;
}

.ui-srch .ui-sel-ic[b-ut0ydpwpek] {
    position: absolute;
    left: var(--input-pad-x);
    top: 50%;
    transform: translateY(-50%);
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app; this
   rule's own declared width/height plus its own padding and border would otherwise stack under the
   browser's content-box default, rendering wider/taller than --control-h. */
.ui-srch .ui-in[b-ut0ydpwpek] {
    box-sizing: border-box;
    width: 100%;
    height: var(--control-h);
    padding-left: var(--affix-pad);
    padding-right: var(--affix-pad);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--fs-body);
    color: var(--text);
}

.ui-srch .ui-in:focus-visible[b-ut0ydpwpek] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-opt-scroll[b-ut0ydpwpek] {
    max-height: calc(var(--opt-h) * var(--opt-visible));   /* the uniform-rows height; selectList.js sets the measured one inline (REQ-047 FR-5) */
    overflow: auto;
}

/* REQ-047 FR-5: hidden (still laid out, so it can be measured) until selectList.js has set the list's height and `data-fitted` -- no frame ever paints a wrong height. The attribute is script-only: the markup is unchanged. */
.ui-opt-scroll:not([data-fitted])[b-ut0ydpwpek] {
    visibility: hidden;
}

/* FPL-001/REQ-051 FR-3 (#3684): the thin thumb -- sheet 02 `#proposed-2026-10-05` item 2 A (`.pp-thumb-a`): 6 px wide (--space-4 + --space-2), --placeholder, fully rounded, NO track, no arrows; nothing of the browser's own
   scrollbar shows. `scrollbar-gutter: stable` reserves the 6 px whether or not the list overflows, so an item is the same width in both and the thumb never moves the text; the thumb itself exists only while the list overflows.
   Chromium and Safari draw it through the `::-webkit-scrollbar` family. Firefox has none of that family: under the @supports below it gets its own thinnest scrollbar (`scrollbar-width: thin`, the same colour, a transparent
   track) -- named in the report. The standard properties are set (to anything but `auto`) ONLY there: Chrome >= 121 ignores `::-webkit-scrollbar` on an element that sets `scrollbar-width`. */
.ui-opt-scroll[b-ut0ydpwpek] {
    scrollbar-gutter: stable;
    /* the legacy MudBlazor stylesheet sets `scrollbar-width: thin` on `html, body *`; Chrome >= 121 ignores ::-webkit-scrollbar on any element whose scrollbar-width is not auto -- take it back for this list */
    scrollbar-width: auto;
    scrollbar-color: auto;
}

.ui-opt-scroll[b-ut0ydpwpek]::-webkit-scrollbar {
    width: calc(var(--space-4) + var(--space-2));
    background: transparent;
}

.ui-opt-scroll[b-ut0ydpwpek]::-webkit-scrollbar-track,
.ui-opt-scroll[b-ut0ydpwpek]::-webkit-scrollbar-corner {
    background: transparent;
}

.ui-opt-scroll[b-ut0ydpwpek]::-webkit-scrollbar-button {
    display: none;
}

.ui-opt-scroll[b-ut0ydpwpek]::-webkit-scrollbar-thumb {
    background: var(--placeholder);
    border-radius: var(--radius-pill);
}

@supports not selector(::-webkit-scrollbar) {
    .ui-opt-scroll[b-ut0ydpwpek] {
        scrollbar-width: thin;
        scrollbar-color: var(--placeholder) transparent;
    }
}

.ui-opt[b-ut0ydpwpek] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    height: var(--opt-h);
    padding: 0 var(--btn-pad-x-sm);
    border: none;
    background: none;
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--fs-body);
    color: var(--text);
    cursor: pointer;
    transition: background var(--motion-menu) var(--ease);
}

.ui-opt:hover[b-ut0ydpwpek], .ui-opt-highlighted[b-ut0ydpwpek] {
    background: var(--fill-1);
}

.ui-opt-on[b-ut0ydpwpek] {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: var(--fw-medium);
}

.ui-opt-t[b-ut0ydpwpek] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

/* REQ-025 FR-8, row 39: a per-option disabled reason. Never `pointer-events: none` (same ruling as
   Radio's `.ui-rg-reason-disabled` and this file's own whole-control `.ui-sel-off`) -- the button
   stays a real click target so the guard in SelectItem, not the browser, is what blocks the pick,
   and so :hover/.ui-opt-highlighted still paint (arrow keys must be able to land here and show the
   reason -- REQ-025 FR-8, UI-LAYER §16). Reuses `--disabled-opacity` directly on the option, the
   same simple shape every disabled-opacity user in this layer follows except Radio's own row 42
   (which splits it across sub-parts for a REQ-012 FR-1 focus-ring reason that does not apply here --
   Select's options never take real DOM focus, only the index-based highlight above). */
.ui-opt-off[b-ut0ydpwpek] {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

/* The option's own secondary-text slot -- this layer's `.opt-sub` (04-data-entry.html l.501:
   `flex:none;color:var(--text-secondary);font-size:var(--fs-small);font-weight:var(--fw-regular)`),
   copied byte-for-byte (DEC-011). Defined in the sheet but never drawn in a live specimen there,
   so -- like the opacity above -- this is the one look REQ-025 states is built from the rule, not
   measured against a specimen (see Select.razor's own header comment and Select.md).

   `flex: none` on its own -- a peer of `.ui-opt-t` on ONE row, as the sheet's own rule implies --
   only fits a short trailing caption: a reason sentence ("This tenant hires no new directors from
   this designation list") is longer than the ~200px of content width a 240px --select-w menu has,
   which would zero out .ui-opt-t (flex:1;min-width:0) and grow .ui-opt-scroll a horizontal
   scrollbar -- found live during this REQ's own build, before it shipped. Fixed the same way the
   sheet fixes a two-line option elsewhere (`.opt-tall`/`.opt-stack`, l.502-504, already used for
   Combobox's own two-line rows): a reasoned option's `.ui-opt-t`/`.ui-opt-sub` pair is wrapped in
   `.ui-opt-stack` below and the button itself gets `.ui-opt-tall`, so the reason wraps onto its own
   line instead of fighting the primary text for one row's width. `.ui-opt-sub`'s own bytes are
   unchanged -- inside a column stack `flex: none` sizes its HEIGHT, not its width, so it still
   stretches to the stack's full width and wraps normally. */
.ui-opt-sub[b-ut0ydpwpek] {
    flex: none;
    text-align: left;   /* REQ-047 FR-4: the option is a <button>, whose UA `text-align: center` reached this line -- a reason wider than the name started to the right of it. The sheet's `.opt-sub` has no centring. */
    color: var(--text-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
}

/* `.opt-tall` (04-data-entry.html l.502-503), copied byte-for-byte (DEC-011) -- applied only to a
   reasoned option (paired with `.ui-opt-off` above), never a plain one. */
.ui-opt-tall[b-ut0ydpwpek] {
    height: auto;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    align-items: center;
}

/* `.opt-stack`'s own container rule (04-data-entry.html l.504) -- deliberately NOT its `b`/`span`
   descendant rules (l.505-506), which would override `.ui-opt-sub`'s own `--fs-small` with
   `--fs-caption`. `.ui-opt-t` already carries its own ellipsis rule below and needs nothing added. */
.ui-opt-stack[b-ut0ydpwpek] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.ui-opt-none[b-ut0ydpwpek] {
    padding: var(--space-8) var(--btn-pad-x-sm);
    color: var(--text-secondary);
    font-size: var(--fs-body);
}

.ui-hint[b-ut0ydpwpek] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-warnline[b-ut0ydpwpek] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    color: var(--warn);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-bad-ic[b-ut0ydpwpek] {
    flex: none;
    width: var(--lh-tight);
    height: var(--lh-tight);
    margin-top: var(--space-2);
}

/* ======================================================================================================
   FPL-001/REQ-040 (item #3638) — row 39's MULTIPLE mode (sheet 04 §4a). Single mode above is unchanged.
   ====================================================================================================== */

/* The multiple trigger is a `div role="combobox"` (it holds the tags' real ✕ buttons; a <button> cannot) — the same `.ui-sel` box, the same 32 px, hover / open / invalid / focus rules; only a pointer cursor is added (a
   <button> gets none from the UA stylesheet here, a div needs it said). `.ui-ms-v` is the sheet's `.ms-v`: the tags region, taking the room the caret leaves; `overflow` stays visible — the fold's hover bubble and popover
   hang from inside it, and FittingTagList already guarantees the tags fit (never taller, never wider). */
.ui-sel-ms[b-ut0ydpwpek] {
    box-sizing: border-box;   /* a <button> is border-box by the UA's own default; this div is not — measured live 34 px against the single select's 32 (the 2 px border outside the height) */
    cursor: pointer;
}

/* The tag's ✕ hit area (REQ-040 FR-4, AC-26) is row 26's own since REQ-047 FR-6 (#3677): `Tag.razor.css` draws the sheet's `.tag-x::before` for every removable tag, here included. */

.ui-ms-v[b-ut0ydpwpek] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* Disabled (sheet `.sel.is-off.ms-off`): the FIELD is drawn as `.ui-sel-off` draws it — its fill and border at --disabled-opacity — but on a layer behind, so the tags keep their own box (row 26's outlined variant: surface
   fill, hairline) and only their TEXT takes --disabled-opacity: a tag still reads as a tag on the grey (the owner's choice 4; AC-35 / AC-36). The ✕ is gone (Removable is false). */
.ui-sel-ms-off[b-ut0ydpwpek] {
    position: relative;
    opacity: 1;
    background: none;
    border-color: transparent;
}

.ui-sel-ms-off[b-ut0ydpwpek]::before {
    content: "";
    position: absolute;
    inset: calc(var(--border-w) * -1);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--fill-1);
    opacity: var(--disabled-opacity);
}

.ui-sel-ms-off > .ui-ms-v[b-ut0ydpwpek],
.ui-sel-ms-off > .ui-sel-v[b-ut0ydpwpek],
.ui-sel-ms-off > .ui-sel-ic[b-ut0ydpwpek] {
    position: relative;
}

.ui-sel-ms-off > .ui-sel-v[b-ut0ydpwpek],
.ui-sel-ms-off > .ui-sel-ic[b-ut0ydpwpek] {
    opacity: var(--disabled-opacity);
}

.ui-sel-ms-off[b-ut0ydpwpek]  .ui-tag-body {
    opacity: var(--disabled-opacity);
}

/* The option's checkbox (sheet `.ck > .box`; AC-15 / 16 / 17): row 41's look drawn as a VISUAL box inside the option row — the option is the role=option control (aria-selected carries the state), so a real <input>
   here would nest controls and double-toggle. Mirrored value for value from Checkbox.razor.css (kept equal by a LIVE parity check in the gallery, Select.md "Multiple mode"):
     .ui-opt-ck-box  <- `.ui-ck-box`            (Checkbox.razor.css l.61-74: border-box, --check-size square, --border-w --line, --radius, --surface, the micro transition)
     hover border    <- `.ui-ck:hover .ui-ck-box` (l.76-78: --line-hover)
     .ui-opt-ck-ic   <- `.ui-ck-ic`             (l.80-85: --check-mark square, --on-accent, hidden until checked)
     checked         <- `.ui-ck-input:checked + .ui-ck-box` (l.98-101: --accent fill and border) and `... .ui-ck-ic { opacity: 1 }` (l.103-105)
   The gap to the label is the option's own `gap: var(--space-8)` = the checkbox's `--check-gap`. */
.ui-opt-ck[b-ut0ydpwpek] {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.ui-opt-ck-box[b-ut0ydpwpek] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--check-size);
    height: var(--check-size);
    flex: none;
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    transition: background var(--motion-micro) var(--ease), border-color var(--motion-micro) var(--ease);
}

.ui-opt:hover .ui-opt-ck-box[b-ut0ydpwpek] {
    border-color: var(--line-hover);
}

.ui-opt-ck-ic[b-ut0ydpwpek] {
    width: var(--check-mark);
    height: var(--check-mark);
    opacity: 0;
    color: var(--on-accent);
}

/* the hidden dash: row 41's box holds BOTH glyphs (`.ui-ck-ic` and `.ui-ck-dash`, l.87-95: `--check-mark` wide, `--check-dash` high, `--on-accent`, hidden until indeterminate), and the two share the box's flex line — so the
   real check glyph is laid out (shrunk) beside the dash. Found live: without it this check measured 12 px against row 41's 7 px. Mirrored so the two lay out identically; never visible here (no indeterminate state). */
.ui-opt-ck-dash[b-ut0ydpwpek] {
    display: block;
    width: var(--check-mark);
    height: var(--check-dash);
    border-radius: var(--radius-pill);
    background: var(--on-accent);
    opacity: 0;
}

.ui-opt-ck.is-on .ui-opt-ck-box[b-ut0ydpwpek] {
    background: var(--accent);
    border-color: var(--accent);
}

.ui-opt-ck.is-on .ui-opt-ck-ic[b-ut0ydpwpek] {
    opacity: 1;
}
/* frontend/Components/Ui/Skeleton/Skeleton.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 62 — Skeleton, matching .skel/.skel-row/.skel-head/.skel-lg/.tile
   verbatim (03-feedback.html lines 399-412, 169-175). --skel-bg/--skel-sheen/--skel-h/--skel-h-lg/
   --skel-radius/--skel-dur/--skel-sweep/--row-h/--row-head-h/--cell-pad-x/--space-12/--space-16/
   --border-w/--line/--fill-1 are all already-declared tokens; nothing new added here. */

/* box-sizing: border-box on both rules below (whole-branch pass) -- declared 36/40px + each rule's
   own border-bottom rendered 37/41px live. */
.ui-skel-head[b-kji5rtzdp2] {
    box-sizing: border-box;
    height: var(--row-head-h);
    background: var(--fill-1);
    border-bottom: var(--border-w) solid var(--line);
}

.ui-skel-row[b-kji5rtzdp2] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--space-16);
    height: var(--row-h);
    padding: 0 var(--cell-pad-x);
    border-bottom: var(--border-w) solid var(--line);
}

.ui-skel[b-kji5rtzdp2] {
    display: block;
    background: var(--skel-bg);
    border-radius: var(--skel-radius);
    height: var(--skel-h);
    background-image: linear-gradient(90deg, var(--skel-bg), var(--skel-sheen), var(--skel-bg));
    background-size: var(--skel-sweep) 100%;
    background-repeat: repeat-x;
    animation: ui-skel-sheen-b-kji5rtzdp2 var(--skel-dur) linear infinite;
}

@keyframes ui-skel-sheen-b-kji5rtzdp2 {
    to {
        background-position: var(--skel-sweep) 0;
    }
}

.ui-skel-lg[b-kji5rtzdp2] {
    height: var(--skel-h-lg);
}

.ui-skel-lg-wrap[b-kji5rtzdp2] {
    margin-top: var(--space-12);
}

/* Block -- one bar filling its own container's full height (remainder item 23, Lightbox/row 63:
   `06-overlays.html`'s own state c, a screenshot frame still loading). The section wrapper and the
   bar both need height:100% -- a percentage height only resolves against an ancestor with its own
   definite height, which the host (Lightbox's own `.shot` frame) provides. `.ui-skel-section-block`
   is applied directly in the markup, not via `:has()` (unverified browser-support risk not worth
   taking for one modifier class). */
.ui-skel-section-block[b-kji5rtzdp2] {
    height: 100%;
}

.ui-skel-block[b-kji5rtzdp2] {
    width: 100%;
    height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .ui-skel[b-kji5rtzdp2] {
        animation: none;
        background-image: none;
    }
}
/* frontend/Components/Ui/SmallFormDialog/SmallFormDialog.razor.rz.scp.css */
/* FPL-001/REQ-003, row 81 — Small-form dialog. This component owns no new visual chrome of its own:
   the shell/spacing/typography come from row 17 (Dialog), the fields from rows 49/56/38, the buttons
   from row B1, the fields-exceeded block from row 57 (NamedError). No rule of its own is needed — the
   caller's fields, laid out via FormField's own `.ui-ffld-grid`/`.ui-ffld-grid-2` utilities, sit
   directly in Dialog's unmodified `.ui-dlg-body` with no extra margin correction (unlike row 58's one
   rule for EmptyState's strip — NamedError's own block already fits this body's padding cleanly). */
/* frontend/Components/Ui/SplitCreateButton/SplitCreateButton.razor.rz.scp.css */
/* FPL-001/REQ-003, row B3 — Split "Create ▾". Scoped to THIS component only via `.ui-split-wrap`
   (a plain <span> this component's own markup wraps its composition in) -- a CHILD COMPONENT's own
   root element never carries the parent's scope attribute, so ::deep needs a real HTML ancestor to
   scope from (Button.razor.css's own header comment names this lesson first). Every value is
   var(--token); no literal outside the allowances.

   Item 21's own min-height lesson applied PROACTIVELY from the start here (not found live a second
   time): the supplier's own shadow stylesheet carries its own internal min-height per size, which
   always wins over a competing external `height` alone -- the caret half below pins min-height
   alongside height/width from the first draft, not after a live 32x40 measurement caught it again. */

.ui-split-wrap[b-m2155c3kzx] {
    display: contents;
}

/* The sheet's own `.split{display:inline-flex}` (02-actions.html 237) -- the two real halves. */
.ui-split[b-m2155c3kzx] {
    display: inline-flex;
}

/* Left half -- min-height only (text-driven width, same as Button/B1's own plain rule), inner
   corner (right side, where the seam is) squared off. */
[b-m2155c3kzx] fluent-button.ui-split-left {
    min-height: var(--control-h);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

[b-m2155c3kzx] fluent-button.ui-split-left[size='small'] {
    min-height: var(--control-h-sm);
}

[b-m2155c3kzx] fluent-button.ui-split-left[size='large'] {
    min-height: var(--control-h-lg);
}

/* Caret half -- a true square (item 21's lesson, applied from the start: width/height/min-width/
   min-height all pinned, not height alone), inner corner (left side) squared off, the seam an inset
   hairline -- never a border (a border would double up where the halves meet; the sheet explicitly
   rules that out). */
[b-m2155c3kzx] fluent-button.ui-split-caret {
    width: var(--control-h);
    height: var(--control-h);
    min-width: var(--control-h);
    min-height: var(--control-h);
    padding: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: inset var(--border-w) 0 0 var(--split-seam);
}

[b-m2155c3kzx] fluent-button.ui-split-caret[size='small'] {
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    min-width: var(--control-h-sm);
    min-height: var(--control-h-sm);
}

[b-m2155c3kzx] fluent-button.ui-split-caret[size='large'] {
    width: var(--control-h-lg);
    height: var(--control-h-lg);
    min-width: var(--control-h-lg);
    min-height: var(--control-h-lg);
}

[b-m2155c3kzx] fluent-button.ui-split-caret svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
}

/* Collapsed shapes -- full radii (Fluent's own default, no override needed), min-height only. */
[b-m2155c3kzx] fluent-button.ui-split-menu-only,
[b-m2155c3kzx] fluent-button.ui-split-plain {
    min-height: var(--control-h);
}

[b-m2155c3kzx] fluent-button.ui-split-menu-only[size='small'],
[b-m2155c3kzx] fluent-button.ui-split-plain[size='small'] {
    min-height: var(--control-h-sm);
}

[b-m2155c3kzx] fluent-button.ui-split-menu-only[size='large'],
[b-m2155c3kzx] fluent-button.ui-split-plain[size='large'] {
    min-height: var(--control-h-lg);
}

/* The focus ring leak -- identical fix to Button.razor.css's own (see its header comment for the
   full measured account). The caret half gets its OWN rule (not grouped with the other three):
   a bare `box-shadow: none` here would also clear the seam's own inset box-shadow, since both share
   the one `box-shadow` property -- found while writing this file, not live, by re-reading what the
   shared rule would actually clobber before shipping it. Re-asserting the seam alongside the
   outline, both `!important`, keeps the hairline visible AND wins over the shadow root's own
   internal `:host(:focus-visible)` rule the same way Button.razor.css's own fix does. */
[b-m2155c3kzx] fluent-button.ui-split-left:focus-visible,
[b-m2155c3kzx] fluent-button.ui-split-menu-only:focus-visible,
[b-m2155c3kzx] fluent-button.ui-split-plain:focus-visible {
    box-shadow: none !important;
    outline: var(--focus-w) solid var(--accent) !important;
    outline-offset: var(--focus-offset) !important;
}

[b-m2155c3kzx] fluent-button.ui-split-caret:focus-visible {
    box-shadow: inset var(--border-w) 0 0 var(--split-seam) !important;
    outline: var(--focus-w) solid var(--accent) !important;
    outline-offset: var(--focus-offset) !important;
}
/* frontend/Components/Ui/Stack/Stack.razor.rz.scp.css */
/* FPL-001/REQ-003, row 71 — Split/stack primitive. Every value is var(--token) (UI-LAYER.md §6); the
   8-value gap scale is expressed as attribute selectors on data-gap, one per sheet-named gap, so the
   component's own C# never emits a literal px value either. */

.ui-stack[b-u6qp3y0h2y] {
    display: flex;
}

.ui-stack-row[b-u6qp3y0h2y] {
    flex-direction: row;
}

.ui-stack-column[b-u6qp3y0h2y] {
    flex-direction: column;
}

.ui-stack-wrap[b-u6qp3y0h2y] {
    flex-wrap: wrap;
}

.ui-stack-align-start[b-u6qp3y0h2y] {
    align-items: flex-start;
}

.ui-stack-align-center[b-u6qp3y0h2y] {
    align-items: center;
}

.ui-stack-align-end[b-u6qp3y0h2y] {
    align-items: flex-end;
}

.ui-stack-align-stretch[b-u6qp3y0h2y] {
    align-items: stretch;
}

.ui-stack-align-baseline[b-u6qp3y0h2y] {
    align-items: baseline;
}

.ui-stack[data-gap='2'][b-u6qp3y0h2y] { gap: var(--space-2); }
.ui-stack[data-gap='4'][b-u6qp3y0h2y] { gap: var(--space-4); }
.ui-stack[data-gap='8'][b-u6qp3y0h2y] { gap: var(--space-8); }
.ui-stack[data-gap='12'][b-u6qp3y0h2y] { gap: var(--space-12); }
.ui-stack[data-gap='16'][b-u6qp3y0h2y] { gap: var(--space-16); }
.ui-stack[data-gap='24'][b-u6qp3y0h2y] { gap: var(--space-24); }
.ui-stack[data-gap='32'][b-u6qp3y0h2y] { gap: var(--space-32); }
.ui-stack[data-gap='48'][b-u6qp3y0h2y] { gap: var(--space-48); }

/* The sheet's "spacer" child (`.spacer{flex:1}` in every mockup file) — a host page drops
   `<span class="ui-stack-spacer"></span>` (or any element) as a direct child of a row-direction
   Stack to push its siblings apart. ::deep because the spacer element is authored in the HOST page's
   own .razor file, not this one — a plain scoped selector would never match it (measured against
   Button.razor.css's identical need to reach markup outside this file). */
[b-u6qp3y0h2y] .ui-stack-spacer {
    flex: 1 1 auto;
}
/* frontend/Components/Ui/StatTile/StatTile.razor.rz.scp.css */
/* FPL-001/REQ-003, row 29 — Stat / number tile. Ours in CSS AND markup. No `::deep` needed: every
   element below is this component's own markup, nothing is caller-composed ChildContent. Every
   text element sets its own explicit colour from a token (the row-20/List leak class: no new-layer
   component depends on ambient inheritance for colour, font family, size or line-height). */

.ui-tile[b-0xy2fg15xp] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    height: var(--tile-h);
    padding: var(--panel-pad);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    text-align: left;
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}

.ui-tile-lbl[b-0xy2fg15xp] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-tile-num[b-0xy2fg15xp] {
    color: var(--text);
    font-size: var(--fs-number);
    line-height: var(--lh-number);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
}

.ui-tile-delta[b-0xy2fg15xp] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--ok);
}

.ui-tile-delta-down[b-0xy2fg15xp] {
    color: var(--error);
}

.ui-tile-delta-ic[b-0xy2fg15xp] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
}

.ui-tile-minibar[b-0xy2fg15xp] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    height: var(--space-16);
}

.ui-tile-minibar i[b-0xy2fg15xp] {
    display: block;
    width: var(--minibar-h);
    background: var(--accent);
    border-radius: var(--space-2);
}

.ui-tile-active-filter[b-0xy2fg15xp] {
    color: var(--accent);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-tile-click[b-0xy2fg15xp] {
    cursor: pointer;
    transition: background var(--motion-micro) var(--ease);
}

.ui-tile-click:hover[b-0xy2fg15xp] {
    background: var(--fill-1);
}

/* FPL-001/REQ-018 (item 49) FR-1(a): drew the browser's default outline — outset, the layer's default. */
.ui-tile-click:focus-visible[b-0xy2fg15xp] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-tile-seam[b-0xy2fg15xp] {
    justify-content: flex-start;
    height: auto;
    min-height: var(--tile-h);
    padding: var(--space-12);
    border-style: dashed;
    border-color: var(--error);
    background: var(--error-bg);
}
/* frontend/Components/Ui/StatusPill/CountBadge.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 26 — Count badge. Measured verbatim from 02-actions.html lines
   368-372 (the navy-bar bell specimen). Position: absolute, top/right corner — the composing page
   supplies the `position: relative` anchor (the sheet's own `.bar-btn` does the same); row 5 (Tab
   count badge) composes this component inside its own, differently-positioned context rather than
   duplicating the 0-hidden/1-99/99+/dot rule. */

.ui-badge[b-a2kr8in9za] {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    min-width: var(--badge);
    height: var(--badge);
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--fs-caption);
    line-height: var(--badge);
    font-weight: var(--fw-medium);
    text-align: center;
}

.ui-badge-dot[b-a2kr8in9za] {
    min-width: var(--dot);
    width: var(--dot);
    height: var(--dot);
    padding: 0;
}

/* The tab strip's own inline badge (`.tab-n`, 07-page-templates.html line 984-989) — in flow, not
   absolutely positioned, 18px not 16px, neutral at rest, --accent-soft/--accent when the composing
   tab is active. Dimming for a disabled tab (`.ptab.is-off .tab-n{opacity:...}`) is applied by
   PageTabStrip's own wrapping element, not here — see this file's own header comment. */
.ui-badge-inline[b-a2kr8in9za] {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tab-badge-h);
    height: var(--tab-badge-h);
    padding: 0 var(--tab-badge-pad-x);
    border-radius: var(--radius-pill);
    background: var(--neutral-bg);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--tab-badge-h);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.ui-badge-inline-active[b-a2kr8in9za] {
    background: var(--accent-soft);
    color: var(--accent);
}
/* frontend/Components/Ui/StatusPill/FittingTagList.razor.rz.scp.css */
/* FPL-001/REQ-025 FR-7, catalogue row 26 — Fitting tag list (item 60). The gap between tags matches
   TagOverflow.razor.css's own popover row (`.pop{gap:var(--space-4)}`, 02-actions.html l.313-316) —
   a tag folding behind "+N more" should not change the row's own rhythm before and after the fold. */
.ui-fit-tags[b-q3elhv3pvl] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;   /* lets the row itself shrink inside a narrower parent (a drawer column, a grid cell) instead of forcing that parent wide */
    width: 100%;
    /* Deliberately NOT overflow:hidden here: Tooltip's own bubble (`.ui-tip`, Tooltip.razor.css) is
       a plain absolutely-positioned DESCENDANT, not a top-layer/portal element -- an overflow:hidden
       on this row would clip AC-23's own "full text in the bubble" the instant it opened above or
       past this row's own edge. The only clipping in this component is `.ui-tag-txt`'s own
       overflow:hidden, already scoped to just the text span (Tag.razor.css) -- see this row's own
       Razor header comment. */
}

/* The measuring strip: always in the DOM (so its widths are always real and current) but never
   seen and never in anyone's way -- the identical shape RepeatingRowEditor's own `.ui-rre-gauge`
   established (out of flow, height 0, overflow hidden, visibility hidden) for the same reason: a
   hidden element still needs real geometry to measure, and `display:none` has none to give.

   Two nested boxes, not one -- found reviewing this file, the same class of bug Tooltip.razor.css's
   own header comment already names for its hidden bubble ("a hidden absolute box still counts as
   SCROLLABLE OVERFLOW"): the inner box is `width:max-content` (needed so its OWN width is never
   squeezed by an ancestor -- see below), which can be wider than every visible tag combined. Without
   an outer clip, that width -- `position:absolute` puts it outside this row's own layout, so it is
   positioned against whichever ancestor DOES establish a positioning context, not necessarily this
   row -- can add invisible sideways scrollable overflow to a distant ancestor (a table wrapper, a
   drawer, the page body). The OUTER box is `width:0;height:0;overflow:hidden`: a zero-sized box
   clips everything inside it from ever contributing to any ancestor's scrollable area, regardless of
   where it is itself positioned. Clipping does not affect `getBoundingClientRect()`: the inner tags
   still measure their own real, unclipped size. */
.ui-fit-tags-measure-clip[b-q3elhv3pvl] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ui-fit-tags-measure[b-q3elhv3pvl] {
    visibility: hidden;
    width: max-content;   /* without this, the inner box shrink-fits to the outer clip's own 0px width -- every "natural" width would come out squeezed, not the tag's own preferred size */
    display: flex;
    align-items: center;
    gap: var(--space-4);
    pointer-events: none;
}
/* frontend/Components/Ui/StatusPill/StatusPill.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 26 — Status pill. Measured verbatim from 02-actions.html lines
   317-331 (the ONE canonical reference section, §4). Every token already exists in tokens.css. */

.ui-pill[b-esol8gy0ms] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--pill-h);
    padding: 0 var(--btn-pad-x-sm);
    border-radius: var(--radius-pill);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.ui-pill-ic[b-esol8gy0ms] {
    display: flex;
    width: var(--lh-tight);
    height: var(--lh-tight);
    flex: none;
}

.ui-pill-ok[b-esol8gy0ms] { background: var(--ok-bg); color: var(--ok); }
.ui-pill-warn[b-esol8gy0ms] { background: var(--warn-bg); color: var(--warn); }
.ui-pill-error[b-esol8gy0ms] { background: var(--error-bg); color: var(--error); }
.ui-pill-info[b-esol8gy0ms] { background: var(--info-bg); color: var(--info); }
.ui-pill-neutral[b-esol8gy0ms] { background: var(--neutral-bg); color: var(--neutral); }
/* Frozen shares neutral's own exact pair (02-actions.html line 326, byte-identical to line 325's
   .pill.neutral rule) — not a seventh tone, a neutral pill carrying a leading glyph. */
.ui-pill-frozen[b-esol8gy0ms] { background: var(--neutral-bg); color: var(--neutral); }

/* Dense (.dotpill, lines 327-331): the same six tones, smaller, a coloured dot instead of a
   coloured fill — ok/warn/error/neutral are drawn with their own CSS rule in the sheet; info/frozen
   are derived here from the same already-known per-tone colour (see this file's own header comment
   for why that is a mechanical extension, not an invention). */
.ui-dotpill[b-esol8gy0ms] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text);
    white-space: nowrap;
}

.ui-pill-dot[b-esol8gy0ms] {
    width: var(--dot);
    height: var(--dot);
    flex: none;
    border-radius: var(--radius-pill);
}

.ui-dotpill-ok .ui-pill-dot[b-esol8gy0ms] { background: var(--ok); }
.ui-dotpill-warn .ui-pill-dot[b-esol8gy0ms] { background: var(--warn); }
.ui-dotpill-error .ui-pill-dot[b-esol8gy0ms] { background: var(--error); }
.ui-dotpill-info .ui-pill-dot[b-esol8gy0ms] { background: var(--info); }
.ui-dotpill-neutral .ui-pill-dot[b-esol8gy0ms] { background: var(--neutral); }
.ui-dotpill-frozen .ui-pill-dot[b-esol8gy0ms] { background: var(--neutral); }
/* frontend/Components/Ui/StatusPill/Tag.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 26 — Tag. Measured verbatim from 02-actions.html lines 303-312. */

.ui-tag[b-jfko2rn6ny] {
    box-sizing: border-box;   /* the sheet's `*{box-sizing:border-box}`: --tag-h (22) INCLUDES the outline variant's 1px borders (built content-box it measured 24 against the sheet's 22 — item 33's second review) */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--tag-h);
    border: var(--border-w) solid transparent;   /* REQ-056 FR-4 (#3726): the sheet's `.tag` carries a 1 px TRANSPARENT border on every tag (02-actions.html:306), not only the outline one -- without it a plain / removable tag's text started 1 px left of the sheet's */
    border-radius: var(--radius);
    background: var(--fill-1);
}

.ui-tag-outline[b-jfko2rn6ny] {
    background: var(--surface);
    border: var(--border-w) solid var(--line);
}

.ui-tag-body[b-jfko2rn6ny] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    height: 100%;
    padding: 0 var(--space-8);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
    font-family: inherit;
    border-radius: var(--radius);
}

/* The sheet's own filter-tag hover highlight (line 310), scoped to the real <button> case only —
   a plain, inert tag (a <span>) never receives it, since it does nothing on hover either way. */
button.ui-tag-body[b-jfko2rn6ny] {
    cursor: pointer;
}

button.ui-tag-body:hover[b-jfko2rn6ny],
button.ui-tag-body:focus-visible[b-jfko2rn6ny] {
    background: var(--neutral-bg);
    color: var(--text);
}

button.ui-tag-body:focus-visible[b-jfko2rn6ny] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-tag-ic[b-jfko2rn6ny] {
    display: flex;
    width: var(--lh-tight);
    height: var(--lh-tight);
    color: var(--text-secondary);
    flex: none;
}

.ui-tag-txt[b-jfko2rn6ny] {
    max-width: var(--tag-max-w);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-tag-remove[b-jfko2rn6ny] {
    position: relative;   /* the anchor of the hit-area pseudo-element below */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--lh-tight);
    height: var(--lh-tight);
    margin-right: var(--space-4);
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    flex: none;
}

/* REQ-047 FR-6 (#3677): the ✕'s hit area is the tag's full height, 22 x 22, the 14 px glyph unchanged -- sheet 04's `.tag-x::before{inset:calc((var(--tag-h) - var(--lh-tight)) / -2)}`. Nothing is drawn. Measured
   at the anchored commit: 14 x 14 outside Select (REQ-040 had added the 22 px box scoped to Select's multiple trigger only; that rule is gone). */
.ui-tag-remove[b-jfko2rn6ny]::before {
    content: "";
    position: absolute;
    inset: calc((var(--tag-h) - var(--lh-tight)) / -2);
}

.ui-tag-remove:hover[b-jfko2rn6ny] {
    background: var(--neutral-bg);
    color: var(--text);
}

.ui-tag-remove:focus-visible[b-jfko2rn6ny] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-tag-remove-ic[b-jfko2rn6ny] {
    width: var(--lh-tight);
    height: var(--lh-tight);
}
/* frontend/Components/Ui/StatusPill/TagOverflow.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 26 — the "+N more" overflow popover. `.pop` measured verbatim
   from 02-actions.html lines 313-316.

   Row 64/Popover now owns position/z-index/background/border/radius/shadow AND the wrapper span
   (`.ui-pop-wrap`, matching what this file's own `.ui-tag-of` rule used to declare, verbatim --
   removed, no longer needed here at all). This file keeps only what's genuinely TagOverflow's own: the popup's
   min-width/padding/flex-wrap layout. `::deep` is required -- the popup div is rendered by
   Popover.razor's own markup, a CHILD component from this file's own scoping perspective (same
   reasoning DatePicker.razor.css's own note gives for its analogous rule). */
[b-z4snrz3cs0] .ui-pop.ui-tag-of-pop {
    min-width: var(--menu-col-w);
    padding: var(--menu-pad);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* Matches 02-actions.html's own .pop rule (lines 313-316) exactly -- no max-height/overflow-y is
   given there either, despite the caption naming "scrolls past ten": disclosed as a named gap in
   TagOverflow.md rather than inventing an unmeasured scroll cap (unchanged by this row). */
/* frontend/Components/Ui/Stepper/Stepper.razor.rz.scp.css */
.ui-stepper[b-6ff0svvi86] {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ui-stepper-item[b-6ff0svvi86] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.ui-stepper-circle[b-6ff0svvi86] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-sm);
    height: var(--avatar-sm);
    border-radius: 50%;
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    box-sizing: border-box;
}

.ui-stepper-check[b-6ff0svvi86] {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.ui-stepper-label[b-6ff0svvi86] {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
}

.ui-stepper-skipped-tag[b-6ff0svvi86] {
    display: block;
    color: var(--text-secondary);
}

.ui-stepper-connector[b-6ff0svvi86] {
    flex: 1;
    height: var(--border-w);
    background: var(--line);
    margin-top: var(--space-12);
    min-width: var(--avatar-sm);
}

.ui-stepper-collapsed[b-6ff0svvi86] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--avatar-sm);
    padding: 0 var(--space-8);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

/* done */
.ui-stepper-done .ui-stepper-circle[b-6ff0svvi86] {
    background: var(--accent);
    color: var(--on-accent);
}

.ui-stepper-connector-done[b-6ff0svvi86] {
    background: var(--accent);
}

/* current */
.ui-stepper-current .ui-stepper-circle[b-6ff0svvi86] {
    border: var(--space-2) solid var(--accent);
    color: var(--accent);
}

.ui-stepper-current .ui-stepper-label[b-6ff0svvi86] {
    font-weight: var(--fw-semibold);
    color: var(--text);
}

/* pending */
.ui-stepper-pending .ui-stepper-circle[b-6ff0svvi86] {
    border: var(--border-w) solid var(--line);
    color: var(--text-secondary);
}

/* skipped */
.ui-stepper-skipped .ui-stepper-circle[b-6ff0svvi86] {
    border: var(--border-w) dashed var(--line);
    color: var(--text-secondary);
    opacity: var(--disabled-opacity);
}

.ui-stepper-skipped .ui-stepper-label[b-6ff0svvi86] {
    opacity: var(--disabled-opacity);
}
/* frontend/Components/Ui/Stub/Stub.razor.rz.scp.css */
/* FPL-001/REQ-003 — Stub renders nothing of its own visual box, only the real <NamedError>'s
   NotBuilt shape (row 57's own CSS owns every rule that shape needs) — no rule needed here. File
   exists to satisfy FR-1's one-folder-three-files rule, the same reason
   DisabledReasonTooltip.razor.css is empty. */
/* frontend/Components/Ui/Switch/Switch.razor.rz.scp.css */
/* FPL-001/REQ-003, row 43 — Switch. Ours in CSS AND markup (see Switch.razor's own header comment
   for why FluentSwitch was rejected). No `::deep`/wrapper-scoping concern — there is no supplier
   custom element, so Blazor's own CSS-isolation scope attribute attaches directly to every element
   below exactly as written. */

.ui-sw-wrap[b-54iu8jiwjk] {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ui-sw[b-54iu8jiwjk] {
    display: inline-flex;
    align-items: center;
    gap: var(--check-gap);
    font-size: var(--fs-body);
    color: var(--text);
    cursor: pointer;
}

/* Catalogue-wide finding (2026-09-19, planner audit, applied retroactively to this already-shipped
   row): a disabled-with-reason control stays reachable by Tab and shows its reason on keyboard
   focus, not just hover -- `pointer-events: none` (removed here) also suppresses `:hover`, which
   would silently break the reason tooltip's hover half. Switch.razor no longer sets the native
   `disabled` attribute for this state (only for `Pending`, an unrelated transient state with no
   reason of its own) -- `aria-disabled` + `@onclick:preventDefault` block interaction instead. */
.ui-sw-off[b-54iu8jiwjk] {
    cursor: not-allowed;
}

/* REQ-012 FR-1: the label is NOT dimmed — its parts (track, text, spinner) are — so it can draw the focus ring at full strength (see Checkbox.razor.css / Tooltip.razor.css). */
.ui-sw-off > .ui-sw-track[b-54iu8jiwjk],
.ui-sw-off > .ui-sw-label[b-54iu8jiwjk],
.ui-sw-off[b-54iu8jiwjk] >  .ui-sw-spinner {
    opacity: var(--disabled-opacity);
}

.ui-sw:has(> .ui-sw-input.ui-dis:focus-visible)[b-54iu8jiwjk] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius);
}

/* Visually hidden but still focusable, tabbable and screen-reader-visible -- same reasoning as
   Checkbox's own native input: never display:none or visibility:hidden. */
.ui-sw-input[b-54iu8jiwjk] {
    position: absolute;
    width: var(--switch-w);
    height: var(--switch-h);
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* pointer-events: none (applied up front this time, not found the hard way like Checkbox's own
   build): the native input sits directly under this track at the same rect, and as the LATER
   sibling in DOM order the track would otherwise paint on top and intercept every click before it
   reached the input underneath -- the exact bug Checkbox's own build found and fixed live. */
/* box-sizing: border-box (REQ-009's live pass, box-sizing sweep) -- declared width/height plus this rule's own `--switch-pad` padding on
   both sides rendered 40 x 24 live under the browser's content-box default; the sheet's `.sw` is a fixed 36 x 20 object (the sheet has a
   global `*{box-sizing:border-box}`, this app has none). The checked knob's translateX already assumes the border-box track. */
.ui-sw-track[b-54iu8jiwjk] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    width: var(--switch-w);
    height: var(--switch-h);
    flex: none;
    padding: var(--switch-pad);
    border-radius: var(--radius-pill);
    background: var(--neutral-bg);
    pointer-events: none;
    transition: background var(--motion-micro) var(--ease);
}

/* box-sizing: border-box (whole-branch pass) -- declared 16x16 + this rule's own 1px border
   rendered 18x18 live. */
.ui-sw-knob[b-54iu8jiwjk] {
    box-sizing: border-box;
    display: block;
    width: var(--switch-knob);
    height: var(--switch-knob);
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    transition: transform var(--motion-micro) var(--ease), border-color var(--motion-micro) var(--ease);
}

.ui-sw-input:checked ~ .ui-sw-track[b-54iu8jiwjk] {
    background: var(--accent);
}

.ui-sw-input:checked ~ .ui-sw-track .ui-sw-knob[b-54iu8jiwjk] {
    border-color: var(--accent);
    transform: translateX(calc(var(--switch-w) - var(--switch-knob) - var(--switch-pad) * 2));
}

.ui-sw-input:focus-visible:not(.ui-dis) ~ .ui-sw-track[b-54iu8jiwjk] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-sw-label[b-54iu8jiwjk] {
    line-height: var(--lh-body);
}

/* The pending ring is the layer's shared one (FPL-001/REQ-046 FR-4, wwwroot/css/ring.css, drawn through <Ring />); `.ui-sw-spinner` is only this component's own hook. */

.ui-bad[b-54iu8jiwjk] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    color: var(--error);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-bad-ic[b-54iu8jiwjk] {
    flex: none;
    width: var(--lh-tight);
    height: var(--lh-tight);
    margin-top: var(--space-2);
}
/* frontend/Components/Ui/TabCountBadge/TabCountBadge.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 5 — TabCountBadge composes CountBadge (row 26) entirely and adds
   no markup of its own — every rule this shape needs lives in CountBadge.razor.css's own
   .ui-badge-inline/.ui-badge-inline-active rules. Nothing needed here. */
/* frontend/Components/Ui/Textarea/Textarea.razor.rz.scp.css */
/* FPL-001/REQ-003, row 38 — Textarea. Ours in CSS and markup; reuses TextInput/36's tokens (border,
   radius, focus ring) applied to a real <textarea>, not TextInput itself (see Textarea.razor's own
   header comment for why composition doesn't apply here). */

.ui-ta-outer[b-9iqv8nqq8o] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

/* The CSS-only autogrow technique (no JS): the real textarea and the hidden ::after mirror share one
   grid cell (grid-area: 1 / 1). The ::after's `content: attr(data-replicated-value)` is read live by
   layout whenever that attribute changes -- and Blazor already updates it on every keystroke via the
   normal @bind-Value flow -- so the implicit grid row grows to fit the mirrored text, and the real
   textarea (min-height: 100% of that same cell) grows with it. Past --ta-max-rows BOTH the mirror and the
   textarea stop at the same ceiling and THE TEXTAREA ITSELF scrolls (item 33's third pass) — as sheet 04's
   scrolling specimen does (`.ta-auto { max-height: …; overflow: auto }` on the bordered `<textarea>`,
   measured with classic scrollbars: all four edges #e4e7eb, the 15px bar INSIDE the border, the box's width unchanged).
   It scrolled the CONTAINER before: the textarea's border scrolled away with its content (the top and bottom hairline
   lost) and the bar sat outside the right border, narrowing the box 267 -> 252. */
.ui-ta-grow[b-9iqv8nqq8o] {
    display: grid;
    min-height: var(--textarea-h);
    max-height: calc(var(--lh-body) * var(--ta-max-rows) + var(--textarea-pad-y) * 2 + var(--border-w) * 2);   /* the sheet's `.ta-auto` ceiling, verbatim: the container, the mirror and the textarea carry the SAME expression (ShellFrameTests pins that they are equal) */
    border-radius: var(--radius);
}

/* The mirror must be the textarea's EXACT box: border-box, with the textarea's own 1px border (transparent here). Built content-box with `width: 100%` it was the cell's width PLUS its 2 x 10px padding — measured live on the
   representative drawer's four prose fields: the container's scrollWidth 733 against its clientWidth 713, so every field carried a HORIZONTAL scrollbar wherever the OS draws classic scrollbars (Windows: the owner's
   "textarea show scrollbar" — invisible in a headless overlay-scrollbar browser, which is why the first check called it "no bug at rest"), and the mirror wrapped at a wider measure than the textarea did (the grid row could
   be a line short of the text) and was 2px short of its border (a three-line value scrolled the textarea by 2px). It stops at the ceiling too, so the row never grows past it. */
.ui-ta-grow[b-9iqv8nqq8o]::after {
    content: attr(data-replicated-value) " ";
    box-sizing: border-box;
    border: var(--border-w) solid transparent;
    max-height: calc(var(--lh-body) * var(--ta-max-rows) + var(--textarea-pad-y) * 2 + var(--border-w) * 2);   /* the sheet's `.ta-auto` ceiling, verbatim: the container, the mirror and the textarea carry the SAME expression (ShellFrameTests pins that they are equal) */
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    visibility: hidden;
}

.ui-ta-grow[b-9iqv8nqq8o]::after,
.ui-ta[b-9iqv8nqq8o] {
    grid-area: 1 / 1;
    width: 100%;
    padding: var(--textarea-pad-y) var(--input-pad-x);
    font: inherit;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app; this
   rule's own declared min-height plus its own border would otherwise stack under the browser's
   content-box default, growing the textarea past its grid cell's own 100% height (the sibling rule
   above sharing this same selector sets width:100% with no border of its own, so this is the one
   block that actually needs it). */
.ui-ta[b-9iqv8nqq8o] {
    box-sizing: border-box;
    min-height: 100%;
    max-height: calc(var(--lh-body) * var(--ta-max-rows) + var(--textarea-pad-y) * 2 + var(--border-w) * 2);   /* the sheet's `.ta-auto` ceiling, verbatim: the container, the mirror and the textarea carry the SAME expression (ShellFrameTests pins that they are equal) */
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    resize: none;
    overflow-x: hidden;
    overflow-y: auto;
}

.ui-ta[b-9iqv8nqq8o]::placeholder {
    color: var(--placeholder);
}

.ui-ta:hover:not(:disabled)[b-9iqv8nqq8o] {
    border-color: var(--line-hover);
}

.ui-ta:focus-visible[b-9iqv8nqq8o] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-ta-bad[b-9iqv8nqq8o] {
    border-color: var(--error);
}

.ui-ta-bad:hover:not(:disabled)[b-9iqv8nqq8o] {
    border-color: var(--error);
}

/* Same convention as TextInput's .ui-in-off: readonly, never native disabled, so the control stays
   tab-reachable for the disabled-with-reason contract FormField enforces around this component. */
.ui-ta-off[b-9iqv8nqq8o] {
    background: var(--fill-1);
    color: var(--text-secondary);
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

.ui-ta-foot[b-9iqv8nqq8o] {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
}

.ui-ta-count[b-9iqv8nqq8o] {
    margin-left: auto;
    flex: none;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-variant-numeric: tabular-nums;
}

.ui-ta-count-warn[b-9iqv8nqq8o] {
    color: var(--warn);
    font-weight: var(--fw-medium);
}
/* frontend/Components/Ui/TextInput/TextInput.razor.rz.scp.css */
/* FPL-001/REQ-003, row 36 — Text input. Ours in CSS AND markup (see TextInput.razor's own header
   comment for why FluentTextInput was rejected). No `::deep`/wrapper-scoping concern — there is no
   supplier custom element, so Blazor's own CSS-isolation scope attribute attaches directly to
   every element below exactly as written. */

.ui-fld[b-tjun68lks1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: var(--field-w);
}

.ui-fld-w[b-tjun68lks1] {
    width: 100%;
}

.ui-fld-lbl[b-tjun68lks1] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
}

.ui-req[b-tjun68lks1] {
    color: var(--accent);
}

/* Found live (remainder item 5c, row 45's own measurement): no `box-sizing` was ever declared here,
   so this input inherited the browser default, `content-box` -- `width: 100%` (280px inside a plain
   `.ui-fld`) plus its own padding and border rendered OUTSIDE that, measuring 302px for a plain
   field and 324px with a suffix icon (`--affix-pad` 32px), never the sheet's declared 240/280px
   frame. Confirmed catalogue-wide: a plain TextInput (row 36) and DatePicker's own field (row 44)
   both overflow the same way, so this is row 36's own defect, not any one composer's -- fixed here,
   not with a per-composer compensation (TimeRange's own local fix, added when only TimeField's case
   had been measured, is retired in this same commit now that the true root cause is known). */
.ui-in[b-tjun68lks1] {
    box-sizing: border-box;
    width: 100%;
    height: var(--control-h);
    padding: 0 var(--input-pad-x);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--fs-body);
    color: var(--text);
}

.ui-in[b-tjun68lks1]::placeholder {
    color: var(--placeholder);
}

/* Row 36's three sizes (REQ-003 states audit, 2026-09-19 -- disclosed as missing entirely, built
   here): the same --control-h-sm/--control-h-lg scale Button's own three sizes already use.
   Horizontal padding stays fixed at --input-pad-x across all three, matching Button's own rule
   ("padding:0 14px" regardless of size) -- only height (and, for Small, font-size) changes. */
.ui-in-sm[b-tjun68lks1] {
    height: var(--control-h-sm);
    font-size: var(--fs-small);
}

.ui-in-lg[b-tjun68lks1] {
    height: var(--control-h-lg);
}

.ui-in:hover:not(:disabled)[b-tjun68lks1] {
    border-color: var(--line-hover);
}

.ui-in:focus-visible[b-tjun68lks1] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

/* Found via DatePicker (row 44), which reuses this component: hovering an invalid field showed
   --line-hover's grey border, not --error's red one. `.ui-in:hover:not(:disabled)` (a class + two
   pseudo-classes) is MORE specific than a single `.ui-in-bad` class, so hover silently won whenever
   a real mouse happened to be over an invalid field -- measured live, not assumed, then fixed by
   matching that same specificity for the error state explicitly. A pre-existing gap in this
   component's own first build, not something DatePicker introduced. */
.ui-in-bad[b-tjun68lks1] {
    border-color: var(--error);
}

.ui-in-bad:hover:not(:disabled)[b-tjun68lks1] {
    border-color: var(--error);
}

/* Catalogue-wide finding (2026-09-19, planner audit): a disabled-with-reason control stays
   reachable by Tab and shows its reason on keyboard focus, not just hover -- the native `disabled`
   attribute (and `pointer-events:none`) both remove that. Uses the HTML `readonly` attribute
   instead (see TextInput.razor) -- keeps the input focusable and its value selectable/copyable
   while genuinely blocking edits at the platform level, unlike `disabled`. A class, not `:disabled`,
   since the real disabled attribute is never set here. */
.ui-in-off[b-tjun68lks1] {
    background: var(--fill-1);
    color: var(--text-secondary);
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

/* Read-only: a <span>, not an <input> at all — no border, no fill, zero horizontal padding,
   rendered as text under the label. Flex + the same height as .ui-in keeps vertical rhythm
   identical to the editable state despite the element type changing. */
.ui-in-ro[b-tjun68lks1] {
    display: flex;
    align-items: center;
    height: var(--control-h);
    color: var(--text);
    font-size: var(--fs-body);
}

.ui-affix[b-tjun68lks1] {
    position: relative;
    width: 100%;
}

.ui-affix-ic[b-tjun68lks1] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--placeholder);
    display: flex;
}

/* Found live (remainder item 5, row 45's own build), NOT fixable here: neither Prefix's nor
   SuffixIcon's SVG had any explicit size anywhere in this file -- an <svg viewBox="0 0 16 16" ...>
   with no width/height attribute and no CSS sizing computes to 0x0 inside a flex parent, invisible
   in a real browser despite every prior row using this slot (DatePicker's own calendar icon, row
   44) describing it as "measured" -- that measurement was never a real screenshot. A pre-existing
   catalogue-wide gap in this component's own first build (row 36), surfaced by TimeField's own live
   verification, not introduced by it.

   A `.ui-affix-ic svg { ... }` rule HERE cannot fix it: Blazor CSS isolation only appends this
   file's own scope attribute to the RIGHTMOST compound selector (confirmed in the compiled bundle:
   `.ui-affix-ic svg[b-<textinput-scope>]`), but the actual <svg> markup is authored inside the
   CALLER's own .razor file (it is content passed through the Prefix/SuffixIcon RenderFragment
   parameters), so it carries the CALLER's own scope attribute, never this file's -- the selector
   above never matches anything, confirmed by re-measuring 0x0 after adding it and reading the
   compiled scoped CSS directly. Each caller sizes its own icon in its own .razor.css instead (see
   TimeField.razor.css and DatePicker.razor.css, both fixed the same remainder item this was found
   in) -- --icon-sm (16px), the established smallest icon token in this layer (NumberStepper/row
   37's own finding). */

.ui-affix-pre[b-tjun68lks1] {
    left: var(--input-pad-x);
}

.ui-in-pre[b-tjun68lks1] {
    padding-left: var(--affix-pad);
}

.ui-in-suf[b-tjun68lks1] {
    padding-right: var(--affix-pad);
}

.ui-affix-suf[b-tjun68lks1] {
    position: absolute;
    right: var(--input-pad-x);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: var(--fs-body);
    pointer-events: none;
}

.ui-affix-suf-ic[b-tjun68lks1] {
    right: var(--input-pad-x);
    pointer-events: none;
}

/* FPL-001/REQ-037 masked mode. The reveal control is the time field's clock button (sheet 04 §7c `.suf-btn`, TimeField.razor.css): 4 px from the edge, 28 x 28, the pointer given back (the suffix slot is
   `pointer-events: none`), and its glyph keeps `--text-secondary` when disabled (the layer's IconButton already dims it; Fluent's own disabled foreground would dim it a second time). The input
   always carries `.ui-in-suf`, so its text area is the same hidden or shown and a long value scrolls inside the input, never under the control. */
.ui-in-reveal[b-tjun68lks1] {
    right: var(--space-4);
    pointer-events: auto;
}

.ui-in-reveal[b-tjun68lks1]  fluent-button.ui-icon-btn.ui-icon-btn-off {
    color: var(--text-secondary);
}

/* AC-29 (REQ-037 Amendment (1), planner ruling): the pressed state is for assistive technology only. Inside the field the control keeps sheet 04 §7c's resting look while the value is shown — transparent
   background, glyph `--text-secondary`, exactly as while hidden — and the glyph swap (eye / eye-off) is the visible signal. Scoped to `.ui-in-reveal`, so IconButton's own pressed look for every other
   caller is untouched; hover and active are left to the button's own feedback (measured live: resting shown == resting hidden before this rule existed, so it pins the ruling against a future
   supplier / IconButton change rather than changing today's pixels). */
.ui-in-reveal[b-tjun68lks1]  fluent-button.ui-icon-btn[aria-pressed='true']:not(:hover):not(:active) {
    background: transparent;
    color: var(--text-secondary);
}

/* The eye / eye-off glyph takes the button's own colour in every state since REQ-046 FR-2 (#3676): IconButton owns that rule for every row 82 glyph, so the reveal control's scoped copy (REQ-037) is gone. */

/* FR-7: nothing of the browser's own shows inside a password field — Edge/IE's reveal and clear, and the WebKit credential / contacts auto-fill buttons. Only our control is visible. */
.ui-in-mask[b-tjun68lks1]::-ms-reveal,
.ui-in-mask[b-tjun68lks1]::-ms-clear {
    display: none;
}

.ui-in-mask[b-tjun68lks1]::-webkit-credentials-auto-fill-button,
.ui-in-mask[b-tjun68lks1]::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
}

/* "In a table cell" — borderless until hover/focus; the negative margin + widened box keeps the
   input's own border from ever affecting the cell's box model, so a Grid row's height never
   changes when this variant is used inside it (measured inside a real Grid, not a standalone td —
   Grid's own row height is an !important override a standalone cell wouldn't reproduce).

   --ui-in-cell-inset (2026-09-19): the sheet's own trick is keyed to a container padding of exactly
   --input-pad-x (10px) — measured WRONG inside a real Grid cell, whose own padding is a different
   token, --cell-pad-x (12px), leaving a 2px-per-side residual gap (Grid.md/TextInput.md's original
   disclosed finding). Fixed with a plain, non-token custom property Grid's own td sets locally
   (Grid.razor.css) to its own --cell-pad-x; here it's read with --input-pad-x as the fallback for
   every OTHER container that never sets it. Verified empirically before wiring this in (not assumed
   from CSS spec alone): a bare `var(--cell-pad-x, var(--input-pad-x))` would have resolved to
   --cell-pad-x EVERYWHERE, standalone or not, since --cell-pad-x is itself a global :root token,
   never actually "unset" anywhere in the document -- the fallback branch would never fire. A
   genuinely scoped, non-token property (this one) is what makes the fallback behave per-container,
   confirmed with a throwaway two-page test before touching either component's real CSS. */
.ui-in-cell[b-tjun68lks1] {
    border-color: transparent;
    background: none;
    margin: 0 calc(-1 * var(--ui-in-cell-inset, var(--input-pad-x)));
    width: calc(100% + var(--ui-in-cell-inset, var(--input-pad-x)) * 2);
}

.ui-in-cell:hover:not(:disabled)[b-tjun68lks1] {
    border-color: var(--line-hover);
    background: var(--surface);
}

.ui-hint[b-tjun68lks1] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-bad[b-tjun68lks1] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    color: var(--error);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-bad-ic[b-tjun68lks1] {
    flex: none;
    width: var(--lh-tight);
    height: var(--lh-tight);
    margin-top: var(--space-2);
}
/* frontend/Components/Ui/TimeField/TimeField.razor.rz.scp.css */
/* FPL-001/REQ-003, row 45 — Time field. Composes `<TextInput>` (row 36) entirely and adds no popup,
   so it needs none of the layout CSS DatePicker (row 44) carries for its calendar grid. The clock
   suffix icon inherits `.ui-affix-suf`'s own `color: var(--text-secondary)` via `currentColor` and
   `.ui-affix-suf-ic`'s positioning — both generic in TextInput.razor.css.

   Found live (remainder item 5), fixed here: the icon rendered at 0×0 — an <svg> with no
   width/height attribute and no CSS sizing computes to zero inside `.ui-affix-ic`'s flex box.
   Blazor CSS isolation cannot fix this from TextInput.razor.css: the <svg> below is authored in
   THIS file, so it carries THIS component's own scope attribute, not TextInput's — a rule in
   TextInput.razor.css can never reach it (confirmed by reading the compiled scoped CSS directly,
   see TextInput.razor.css's own note on this). Each consumer of the Prefix/SuffixIcon slot must
   size its own icon here instead — DatePicker.razor.css carries the identical fix for its own
   calendar icon, found and fixed the same session. --icon-sm (16px) matches the established
   smallest icon token in this layer (NumberStepper/row 37's own finding). */
.ui-tm-ic[b-fsoxgvgilr] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
    /* An outlined glyph. Inside the icon BUTTON (item 39) Fluent's own `fill: currentColor` on a slotted svg beats the `fill="none"` presentation attribute — measured live: the clock painted as a solid disc
       with its hands lost. A class rule outranks the supplier's element rule; the attribute alone does not. */
    fill: none;
}

/* Item 39 (FPL-001/REQ-011), the picker popover. Every rule below needs an ancestor carrying THIS file's scope attribute (`::deep` — see DatePicker.razor's note): `.ui-tm` and `.ui-tm-trg` in
   TimeField.razor are those, both `display: contents`, so the field's layout is exactly what it was before the popover (FR-12: the reps page's row 40 / header 36 / drawer 640 do not move). */
.ui-tm-trg[b-fsoxgvgilr] {
    display: contents;
}

/* The trailing clock is now a button (sheet 04 §7c `.suf-btn`: `right: var(--space-4)`, centred, 28 x 28 — its glyph sits where the decorative clock's did, 4 + 14 = 10 + 8 from the edge). TextInput's suffix
   slot is `pointer-events: none` and 10 px from the edge (it was decoration); a button needs the pointer back and the sheet's 4 px. */
.ui-tm-trg[b-fsoxgvgilr]  .ui-affix-suf-ic {
    right: var(--space-4);
    pointer-events: auto;
}

.ui-tm-btn[b-fsoxgvgilr] {
    display: flex;
}

/* Disabled (sheet §7c "e"): the glyph keeps its `--text-secondary` and takes the disabled opacity, as `.icon-btn.is-off` draws it (measured on the sheet: colour #52606d at opacity 0.4). The layer's IconButton
   already sets that opacity, and Fluent's own disabled foreground (#bdbdbd) then dims it a SECOND time (measured live: #bdbdbd at 0.4 — nearly white). */
.ui-tm-trg[b-fsoxgvgilr]  fluent-button.ui-icon-btn.ui-icon-btn-off {
    color: var(--text-secondary);
}

/* The wrapper Popover draws round trigger + card is `inline-flex` by default; here it must add no box (the card is `position: fixed`, placed by script, so nothing needs a positioned wrapper). */
[b-fsoxgvgilr] .ui-pop-wrap.ui-tm-wrap {
    display: contents;
}

/* The card is the width of its two columns (131 px, sheet §7c ruling — "not of the 240 px field it hangs from"): two 56 px columns + the divider + 8 px padding + 1 px border each side. */
[b-fsoxgvgilr] .ui-pop.ui-tm-pop {
    box-sizing: border-box;
    width: max-content;
    padding: var(--menu-pad);
}
/* frontend/Components/Ui/TimeField/TimePickerPanel.razor.rz.scp.css */
/* FPL-001/REQ-011 (item 39), row 45 — the picker's content, drawn from sheet 04-data-entry.html §7c (CSS l.581–593): `.tp-cols`, `.tp-col`, `.tp-win`, `.tp-o`, plus the `.opt` / `.dow` / `.menu-foot`
   classes it copies. Measured on the sheet at 1280 × 900: the popover 131 × 303 = 2 borders + 16 padding + 16 header + 224 window (7 x 32) + 45 footer; a 56 px column, the divider ADDED OUTSIDE the second
   (57), rows 32 (--opt-h), hover #f5f7fa (--fill-1), selected #f1eafa (--accent-soft). Tokens only; the two new ones are --tp-col-w and --tp-visible. The card itself (surface, border, radius, shadow, the 8 px
   padding, the max-content width) is Popover's `.ui-pop` plus TimeField.razor.css's `.ui-tm-pop`. */

.ui-tp[b-e2prf2ki4y] {
    min-width: 0;
}

.ui-tp-cols[b-e2prf2ki4y] {
    display: flex;
}

.ui-tp-col[b-e2prf2ki4y] {
    box-sizing: border-box;
    width: var(--tp-col-w);
}

.ui-tp-col + .ui-tp-col[b-e2prf2ki4y] {
    border-left: var(--border-w) solid var(--line);
    width: calc(var(--tp-col-w) + var(--border-w));   /* border-box: the divider is added OUTSIDE the 56 px column, so both columns' rows are the same width */
}

.ui-tp-dow[b-e2prf2ki4y] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--lh-small);
    color: var(--text-secondary);
    font-size: var(--fs-caption);
}

/* The window: --tp-visible rows tall, the scroller. The scrollbar is hidden — a classic 15px bar would make the column wider than the sheet's 56 — the wheel and the keys still scroll it. `position: relative`
   makes the window the offsetParent of its rows (timePicker.js reveal reads their offsetTop). */
.ui-tp-win[b-e2prf2ki4y] {
    position: relative;
    height: calc(var(--opt-h) * var(--tp-visible));
    overflow-y: auto;
    scrollbar-width: none;
}

.ui-tp-win[b-e2prf2ki4y]::-webkit-scrollbar {
    display: none;
}

.ui-tp-list[b-e2prf2ki4y] {
    outline: none;
}

.ui-tp-list:focus-visible[b-e2prf2ki4y] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: calc(-1 * var(--focus-w));
}

.ui-tp-o[b-e2prf2ki4y] {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: var(--opt-h);
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    font: inherit;
    font-size: var(--fs-body);
    font-variant-numeric: tabular-nums;
    color: var(--text);
    cursor: pointer;
    transition: background var(--motion-menu) var(--ease);
}

.ui-tp-o:hover[b-e2prf2ki4y] {
    background: var(--fill-1);
}

.ui-tp-o.is-on[b-e2prf2ki4y] {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: var(--fw-medium);
}

/* the sheet's `.menu-foot`: a hairline above, "Now" quiet at the left, "Clear" at the right */
.ui-tp-foot[b-e2prf2ki4y] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding-top: var(--menu-pad);
    margin-top: var(--menu-pad);
    border-top: var(--border-w) solid var(--line);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.ui-tp-foot-spacer[b-e2prf2ki4y] {
    flex: 1;
}

/* The sheet's `.b-open { padding: 0 }` is declared AFTER `.b-sm`, so a small open button has no side padding ("Now" measured 26 x 28, "Clear" 31 x 28, the card 131 wide). The layer's Button gives a small
   button `padding: 0 var(--btn-pad-x-sm)` through `fluent-button.ui-btn[size='small']`, which out-specifies its own `.ui-btn-open { padding: 0 }` — measured live: "Now" 48 wide, the footer 116, the card 134 (the
   footer, not the columns, then sets the card's width). Fixed HERE only, on this footer (item 39); the same divergence sits in DatePicker's footer (row 44 is unchanged by this REQ) and in Button itself —
   reported, not touched. */
.ui-tp-foot[b-e2prf2ki4y]  fluent-button.ui-btn.ui-btn-open[size='small'] {
    padding: 0;
}
/* frontend/Components/Ui/TimeField/TimeRange.razor.rz.scp.css */
/* FPL-001/REQ-003, row 45's crossing-midnight piece (remainder item 5b). Every class below is
   scoped to THIS file — reusing a class name defined in TextInput.razor.css (`.ui-fld-lbl`,
   `.ui-hint`) would NOT pick up that file's styling: Blazor CSS isolation scopes per FILE, and an
   element authored in TimeRange.razor carries TimeRange's own scope attribute, never TextInput's
   (the exact class of bug this same item found and fixed for icons — caught here before shipping,
   not after). Each rule below is defined fresh, matching the same measured values TextInput.md's
   own label/hint rules use.

   Item 5b also found the marker overlapping the end field's own input by 44px and compensated for
   it locally, here, with a token-derived margin. Item 5c (remainder) measured a PLAIN TextInput
   (row 36) and DatePicker's own field (row 44) and found BOTH overflow their declared width the
   same way — the defect was `.ui-in`'s own missing `box-sizing` (content-box by browser default),
   row 36's, not this component's. Fixed at the source (`TextInput.razor.css`); the local
   compensation here is retired in the same commit so nothing double-corrects. */

.ui-trg[b-28nakpthp5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ui-trg-w[b-28nakpthp5] {
    width: 100%;
}

.ui-trg > .ui-fld-lbl[b-28nakpthp5] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-medium);
}

.ui-tr-row[b-28nakpthp5] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-12);
}

/* Read-only: the sheet's own exact form (04-data-entry.html lines 1292-1298) — a monospace,
   tabular-numeral time string, the marker inline right after it on the same line. */
.ui-tr-ro[b-28nakpthp5] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--control-h);
    color: var(--text);
    font-size: var(--fs-body);
}

.ui-tr-mono[b-28nakpthp5] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* The "+1 day" marker now composes <StatusPill> (row 26, built remainder item 7) — it owns its own
   look entirely (StatusPill.razor.css). This file only owns the WRAPPER around it: Blazor CSS
   isolation scopes per file, so a rule here can never reach StatusPill's own rendered `.ui-pill`
   element directly (the same class of bug item 5's icon-sizing fix found) — `.ui-tr-marker-wrap` is
   authored in THIS file, carries THIS file's own scope attribute, and is what the alignment rule
   below actually targets. In edit mode the marker sits beside the End field's own input, not the
   label above it — `margin-bottom` centers it against the input's own height (token-derived, not a
   hardcoded value: `(--control-h - --pill-h) / 2`), a disclosed placement choice (the sheet only
   draws this marker in its read-only compound form, never beside an editable field). Read-only mode
   needs no such wrapper — `.ui-tr-ro`'s own `align-items: center` already centers the pill
   naturally alongside the mono time string. */
.ui-tr-marker-wrap[b-28nakpthp5] {
    display: inline-flex;
    flex: none;
}

.ui-tr-row > .ui-tr-marker-wrap[b-28nakpthp5] {
    margin-bottom: calc((var(--control-h) - var(--pill-h)) / 2);
}

.ui-trg > .ui-tr-hint[b-28nakpthp5] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/Ui/Timeline/Timeline.razor.rz.scp.css */
/* FPL-001/REQ-003, row 22 — Timeline (day bar). Ours in CSS AND markup. Every text element sets its
   own explicit colour from a token (the row-20/List leak class).

   `::deep` IS needed for `.ui-tl-blk-wrap ::deep .ui-tooltip-region` alone (R15): a tracked block
   wraps the real <Tooltip> (row 27), whose own root sizes to its content by default (`display:flex`
   since item 14b's own region-equals-child fix; block-level outer display, so this still needs an
   explicit override) -- since the block's percentage width must stay a direct flex child of
   `.ui-tl-day`, the width lives on `.ui-tl-blk-wrap` (this component's own markup, carrying its own
   scope attribute per the Button/B1 lesson) and `::deep` reaches into Tooltip's internal region span
   to fill it. */

.ui-tl-caption[b-50ncjcc5rf] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    margin: 0 0 var(--space-8);
}

/* box-sizing: border-box (whole-branch pass) -- declared height 28px + this rule's own 1px border
   rendered 30px live. */
.ui-tl-day[b-50ncjcc5rf] {
    box-sizing: border-box;
    position: relative;
    display: flex;
    height: var(--day-h);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--fill-1);
}

.ui-tl-blk-wrap[b-50ncjcc5rf] {
    display: block;
    height: 100%;
}

.ui-tl-blk-wrap[b-50ncjcc5rf]  .ui-tooltip-region {
    display: block;
    width: 100%;
    height: 100%;
}

.ui-tl-blk[b-50ncjcc5rf] {
    width: 100%;
    height: 100%;
    border: none;
    border-right: var(--border-w) solid var(--surface);
    padding: 0;
    margin: 0;
    display: block;
}

.ui-tl-blk-untracked[b-50ncjcc5rf] {
    background: var(--fill-1);
    cursor: default;
}

button.ui-tl-blk[b-50ncjcc5rf] {
    cursor: pointer;
}

button.ui-tl-blk-work[b-50ncjcc5rf] { background: var(--accent-soft); }
button.ui-tl-blk-idle[b-50ncjcc5rf] { background: var(--neutral-bg); }
button.ui-tl-blk-brk[b-50ncjcc5rf] { background: var(--warn-bg); }

button.ui-tl-blk:hover[b-50ncjcc5rf],
button.ui-tl-blk:focus-visible[b-50ncjcc5rf] {
    outline: var(--border-w) solid var(--accent);
    outline-offset: calc(var(--border-w) * -1);
}

.ui-tl-hours[b-50ncjcc5rf] {
    position: relative;
    height: var(--tick-h);
    background-image: repeating-linear-gradient(90deg, var(--line) 0 var(--border-w), transparent var(--border-w) calc(100% / 24));
}

.ui-tl-hlabels[b-50ncjcc5rf] {
    display: flex;
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
}

.ui-tl-hlabels span[b-50ncjcc5rf] {
    flex: 1;
}

.ui-tl-hlabels span:last-child[b-50ncjcc5rf] {
    flex: none;
}

.ui-tl-shots[b-50ncjcc5rf] {
    position: relative;
    height: var(--shot-h);
    margin-top: var(--space-4);
}

.ui-tl-shotseg[b-50ncjcc5rf] {
    position: absolute;
    top: 0;
    height: 100%;
    background-image: repeating-linear-gradient(90deg, var(--text-secondary) 0 var(--shot-tick-w), transparent var(--shot-tick-w) calc(100% / 24));
}

.ui-tl-empty[b-50ncjcc5rf] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    margin: var(--space-8) 0 0;
}
/* frontend/Components/Ui/Timeline/TimelineLog.razor.rz.scp.css */
/* FPL-001/REQ-003, row 22 — Timeline's dated activity log. Ours in CSS AND markup. No `::deep`
   needed: every element below is this component's own markup, nothing is caller-composed
   ChildContent. Every text element sets its own explicit colour from a token. */

.ui-tl-log[b-ktf2ccvtpb] {
    position: relative;
    padding-left: var(--log-text-x);
}

.ui-tl-log[b-ktf2ccvtpb]::before {
    content: "";
    position: absolute;
    left: var(--log-rail-x);
    top: var(--space-8);
    bottom: var(--space-8);
    width: var(--border-w);
    background: var(--line);
}

.ui-tl-log-h[b-ktf2ccvtpb] {
    margin: var(--space-12) 0 var(--space-4);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-semibold);
}

.ui-tl-log-i[b-ktf2ccvtpb] {
    position: relative;
    display: flex;
    gap: var(--space-12);
    padding: var(--space-4) 0;
    color: var(--text);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.ui-tl-log-i .ui-tl-log-t[b-ktf2ccvtpb] {
    position: absolute;
    left: calc(var(--log-text-x) * -1);
    width: var(--log-time-w);
    text-align: right;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    font-variant-numeric: tabular-nums;
}

.ui-tl-log-i[b-ktf2ccvtpb]::before {
    content: "";
    position: absolute;
    left: calc((var(--log-dot) / 2 + var(--space-8)) * -1);
    top: calc(var(--space-8) + var(--space-2));
    width: var(--log-dot);
    height: var(--log-dot);
    margin-left: calc(var(--log-dot) / -2);
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: var(--space-2) solid var(--accent);
}

.ui-tl-log-i-sys[b-ktf2ccvtpb]::before {
    border-color: var(--placeholder);
}
/* frontend/Components/Ui/Toolbar/FilterOverflowTrigger.razor.rz.scp.css */
.ui-fot-anchor[b-5rvf17gr7g] {
    position: relative;
    display: inline-flex;
}
/* frontend/Components/Ui/Toolbar/Toolbar.razor.rz.scp.css */
.ui-toolbar[b-kz6tj2032k] {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    margin-bottom: var(--space-16);
    flex-wrap: wrap;
}

.ui-toolbar-sticky[b-kz6tj2032k] {
    position: sticky;
    /* --ui-grid-sticky-top (shared with Grid, row 19): defaults to 0px so a toolbar with no fixed
       chrome above it is unaffected; a host page under the current MudBlazor shell already sets
       this locally (see Gallery.razor's own <style> block). */
    top: var(--ui-grid-sticky-top, 0px);
    z-index: 2;
    background: var(--surface);
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

/* FPL-001/REQ-027 FR-17 (item 62, Amended (1)) — bottom-pinned Toolbar. Ordinary `position: sticky;
   bottom: 0`, not `fixed`: as long as this element is the LAST child in its own scrolling column
   (the host's own duty -- see Toolbar.md), it sits at its natural in-flow place while content is
   short (no gap) and the column's own scroll end stops exactly where this element begins, so it
   never covers the last content row -- the same mechanism Grid's own sticky footer-totals row
   already relies on (Grid.razor.css). Unlike ActionFooter's own conditional hairline (only once
   content scrolls under it), the sheet's `.foot` (02-actions.html:248) draws this top hairline and
   surface UNCONDITIONALLY here -- FR-17's own words name no scroll-detection nuance. No box-shadow:
   "draws no shadow, per the house register" (FR-17). */
.ui-toolbar-sticky-bottom[b-kz6tj2032k] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--surface);
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
    border-top: var(--border-w) solid var(--line);
}

.ui-toolbar-filters[b-kz6tj2032k] {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    flex-wrap: wrap;
}

.ui-toolbar-actions[b-kz6tj2032k] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: none;
    margin-left: auto;
}

/* .toolbar.wrapped (08-page-parts.html:795-796): past the layer's one breakpoint (narrow, 900px,
   UI-LAYER.md), the trailing unit (where <FilterStateRow> composes) drops to its own full-width row
   ahead of the filters, losing its right-alignment -- exact sheet rule, translated 1:1. */
@media (max-width: 900px) {
    .ui-toolbar-actions[b-kz6tj2032k] {
        margin-left: 0;
        order: -1;
        width: 100%;
        justify-content: flex-start;
    }
}
/* frontend/Components/Ui/Tooltip/Tooltip.razor.rz.scp.css */
/* Rule 15/planner ruling (2026-09-22, remainder item 14b): the region's own box must equal its
   child's box in BOTH dimensions, delta 0, whatever the child's display type -- found broken in
   height by row 34/Filmstrip's own 64x40 thumb measuring 64x42. `display: block` (D's own fix,
   6fbc4c99e, for the WIDTH half of this contract) leaves the child inside an inline formatting
   context whenever that child is itself inline-level (a supplier custom element's own default,
   e.g. <fluent-button>) -- the classic "phantom space below an inline/replaced box" leak, sized to
   the font's own line-height. `display: flex` removes the region's children from any inline
   formatting context entirely (a flex item is never part of one), closing the gap regardless of the
   child's own display type, while staying a BLOCK-level box itself (flex, not inline-flex) so the
   width contract this same rule already carries is unaffected -- block-vs-inline outer display is
   what that fix depended on, not block-vs-flex internally. Verified zero-delta on three child shapes
   (a 64x40 non-flex button, a supplier fluent-button, a 600px-wide field) -- see Tooltip.md. */
.ui-tooltip-region[b-t1br7ovjje] {
    position: relative;
    display: flex;
}

/* Bug #3696: opt-in (`FillWidth`). The region is a block-level flex ROW, so a block child with no explicit width shrinks to its content; with this class the child fills the region. Not applied by default: a blanket rule would stretch
   inline-level children (a StatusPill's wrapper measured 56 -> 600 px). The bubble (`.ui-tip`, absolutely positioned) is excluded. Scoped CSS: a rule on a child that another component renders needs `::deep` (found live — the first version matched nothing). */
.ui-tooltip-fill[b-t1br7ovjje] >  :not(.ui-tip) {   /* ::deep: the child is rendered by the caller's own component, which carries no scope attribute of this stylesheet's */
    flex: 1 1 auto;
    min-width: 0;
}

.ui-tip[b-t1br7ovjje] {
    box-sizing: border-box;   /* the sheet's `*{box-sizing:border-box}`: max-width 240 INCLUDES the 8px side padding (built without it: 256 — measured live on the name tooltip) */
    position: absolute;
    z-index: var(--z-tip);
    max-width: var(--tip-max-w);
    width: max-content;
    padding: var(--tip-pad-y) var(--tip-pad-x);
    background: var(--tip-bg);
    color: var(--tip-text);
    border-radius: var(--radius);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-regular);
    text-align: left;
    white-space: normal;
    display: none;
    pointer-events: none;
}

/* FPL-001/REQ-038 FR-2: a text with a newline keeps its line breaks (one line per entry); a long line still wraps at `--tip-max-w`. Only a bubble that carries this class — a text without a newline is unchanged. */
.ui-tip.ui-tip-lines[b-t1br7ovjje] {
    white-space: pre-line;
}

/* HIDDEN = `display: none` (REQ-012 FR-7b). It used to be `opacity: 0; visibility: hidden` on an absolute box — and a hidden absolute box still counts as SCROLLABLE OVERFLOW, so a page grew a sideways scrollbar for text
   nobody could see (the gallery's row 54 / 27 states reached x 1370; the representatives page's drawer and list did the same). `display: none` adds nothing to the page's scrollable area on ANY page, by construction. The bubble is
   `display: block` only while tooltip.js holds it open — ONE at a time, the delay (300 ms, DEC-007) the pointer's, keyboard focus in and out AT ONCE. */
.ui-tip[data-tip-open][b-t1br7ovjje] {
    display: block;
}

/* THE FALLBACK, and only the fallback: while the engine is absent (`data-tooltip-js` on <html> is set by tooltip.js, last, once every listener is in) a bubble still shows from :hover and from KEYBOARD focus, so a page whose script failed to
   load never hides a reason (Rule 15) — with the engine's delay, its one-at-a-time and its placement missing. With the engine present these rules are inert: the engine is the only thing that shows or hides a bubble (rules beside it would
   bring back the 300 ms focus-out hide, and would show the bubbles of ancestors). Keyboard focus, not any focus (02-actions.html:825 "immediately on keyboard focus"): `:focus-within` also matched a button the pointer had just clicked and
   the drawer's own initial focus on its close button (item 33's "Close" sliver). Nested regions: only the innermost that HAS a bubble shows — the outer must not while an inner region with a bubble is hovered/focused; an inner region WITHOUT one (IconButton's label region while disabled, a Button's own region inside a Tooltip)
   must not silence the outer (measured: with the exclusion on any inner region, a disabled IconButton's reason never showed without the script). The FOCUS rule cannot say "an inner region with a bubble that holds the focus" — `:has()` may not nest inside `:has()`, and a selector
   list containing one is invalid, so the browser drops the WHOLE rule, silently (that is what the first version did; the live pass with the script blocked showed no bubble at all) — so it says the weaker "no inner region with a bubble". Only the engine-less fallback pays for that. */
:root:not([data-tooltip-js]) .ui-tooltip-region:not(.ui-tooltip-when-truncated):hover:not(:has(.ui-tooltip-region:hover > .ui-tip)) > .ui-tip[b-t1br7ovjje],
:root:not([data-tooltip-js]) .ui-tooltip-region:not(.ui-tooltip-when-truncated):has(:focus-visible):not(:has(.ui-tooltip-region > .ui-tip)) > .ui-tip[b-t1br7ovjje] {
    display: block;
}
/* (`:not(.ui-tooltip-when-truncated)` above: OnlyWhenTruncated shows a DUPLICATE of visible text only when it is cut — tooltip.js measures the cut per open; with no script there is no one to, so it never shows.) */

/* The sheet's arrow (02-actions.html:338-345): "a small arrow" — a --tip-arrow square rotated 45° on the edge facing the anchor, centred (or, for the end placement, --btn-pad-x in from the right).
   The built Tooltip had none (found by the second review of item 33's live check). */
.ui-tip[b-t1br7ovjje]::after {
    content: "";
    position: absolute;
    width: var(--tip-arrow);
    height: var(--tip-arrow);
    background: var(--tip-bg);
    transform: rotate(45deg);
    left: 50%;
    margin-left: calc(var(--tip-arrow) / -2);
}

.ui-tip-above[b-t1br7ovjje]::after,
.ui-tip-end[b-t1br7ovjje]::after {
    bottom: calc(var(--tip-arrow) / -2);
}

.ui-tip-below[b-t1br7ovjje]::after {
    top: calc(var(--tip-arrow) / -2);
}

.ui-tip-end[b-t1br7ovjje]::after {
    left: auto;
    right: var(--btn-pad-x);
    margin-left: 0;
}

.ui-tip-above[b-t1br7ovjje] {
    bottom: 100%;
    margin-bottom: var(--tip-gap);
    left: 50%;
    transform: translateX(-50%);
}

.ui-tip-below[b-t1br7ovjje] {
    top: 100%;
    margin-top: var(--tip-gap);
    left: 50%;
    transform: translateX(-50%);
}

/* Flip (02-actions.html:825, "flips above when there is no room below", and the reverse): tooltip.js sets `data-tip-flipped` on a bubble whose own side has no room inside its bounds and whose other side has — the mirrored
   placement, the arrow on the opposite edge. Every "above" placement (above, start, end) mirrors to below; `below` mirrors to above. */
.ui-tip[data-tip-flipped]:is(.ui-tip-above, .ui-tip-end, .ui-tip-start)[b-t1br7ovjje] {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: var(--tip-gap);
}

.ui-tip[data-tip-flipped]:is(.ui-tip-above, .ui-tip-end, .ui-tip-start)[b-t1br7ovjje]::after {
    bottom: auto;
    top: calc(var(--tip-arrow) / -2);
}

.ui-tip[data-tip-flipped].ui-tip-below[b-t1br7ovjje] {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--tip-gap);
}

.ui-tip[data-tip-flipped].ui-tip-below[b-t1br7ovjje]::after {
    top: auto;
    bottom: calc(var(--tip-arrow) / -2);
}

/* PLACED by tooltip.js: the arrow's centre is the ANCHOR's centre (`--tip-arrow-x`, px from the bubble's left, clamped to its body) in every placement — start, centred, end, and after a shift. The static rules above
   (50%, or `--btn-pad-x` from an edge) are the fallback for a bubble the engine has not placed; the `End` one sat 3–3.5 px off its glyph (REQ-012 evidence 3). The diamond's centre is the arrow's tip line. */
.ui-tip[data-tip-placed][b-t1br7ovjje]::after {
    left: var(--tip-arrow-x, 0px);   /* a plumbing property set per open by tooltip.js (like Grid's --ui-grid-sticky-top): the lint's zero fallback; the rule only applies once the engine has set it */
    right: auto;
    margin-left: calc(var(--tip-arrow) / -2);
}

/* `Start` (REQ-009, found live on row 48's grip at the editor's left edge): above the anchor and aligned to its LEFT edge — the mirror of
   `End` below; the bubble grows rightwards, so a control at the LEFT edge of its container (a repeating row's grip, in a drawer's gutter)
   never has its reason run off the container. It was `left: 0` and nothing vertical — a bubble with no top or bottom sat on its own
   anchor — and no caller used it. */
.ui-tip-start[b-t1br7ovjje] {
    bottom: 100%;
    margin-bottom: var(--tip-gap);
    left: 0;
    transform: none;
}

.ui-tip-start[b-t1br7ovjje]::after {
    bottom: calc(var(--tip-arrow) / -2);
    left: var(--btn-pad-x);
    margin-left: 0;
}

/* Item 33 (found live): above the anchor and aligned to its RIGHT edge — the bubble grows leftwards, so a control at the right edge of its container
   (a drawer footer's Save) never has its reason run off the viewport. The centred default is right everywhere else. */
.ui-tip-end[b-t1br7ovjje] {
    bottom: 100%;
    margin-bottom: var(--tip-gap);
    right: 0;
    left: auto;
    transform: none;
}

/* REQ-012 FR-1 / AC-3 — the ring of a DISABLED-WITH-REASON control. Opacity dims the element's own outline along with everything else (measured: the accent ring on a .4-opacity control is ≈ 1.9:1 on a SearchBox,
   ≈ 2.6:1 on a pager arrow — below the 3:1 non-text bar in both schemes), and no colour reaches 3:1 at .4 alpha, so the ring cannot be drawn BY the dimmed element. It is drawn by this UNDIMMED ancestor instead —
   the region every §16 control is wrapped in (`DisabledReasonTooltip`, always) — keyed on `.ui-dis`, the one marker class every such control carries on the element that takes keyboard focus. Precedent: the Grid
   draws a cell's ring on its row, `tr:has(> td:focus-visible)`. Same geometry as the layer's ring everywhere else (`--focus-w` solid `--accent`, `--focus-offset`). The region's box equals its control's
   (the contract above), so the ring hugs the control. Excluded: the hidden native inputs of Checkbox / Radio / Switch — their region can be as wide as the row, so THEIR label (undimmed; its parts are dimmed)
   draws the ring itself (Checkbox.razor.css, Radio.razor.css, Switch.razor.css). Only the INNERMOST region rings: regions nest (IconButton: the reason's region around the label's region; NumberStepper), and both would
   match `:has()` for the same focused control — two rings, one offset from the other. */
.ui-tooltip-region:has(.ui-dis:focus-visible:not(.ui-ck-input, .ui-sw-input)):not(:has(.ui-tooltip-region .ui-dis:focus-visible))[b-t1br7ovjje] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius);
}

/* …and the dimmed control's OWN ring is cleared, or there would be two (one of them at 40%). `!important` because each control's own `:focus-visible` rule (Button's supplier ring, the field frames' focus
   outline, the native default) sits in another component's isolated scope and would otherwise win on specificity or order. */
.ui-tooltip-region:has(.ui-dis:focus-visible)[b-t1br7ovjje]  .ui-dis:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* FR-2 (the CSS half; the selection collapse is disabledText.js): a disabled text control paints no caret. `caret-color` is inherited, so it reaches the inner `<input>` of a shadow-DOM host too. */
.ui-tooltip-region[b-t1br7ovjje]  input.ui-dis,
.ui-tooltip-region[b-t1br7ovjje]  textarea.ui-dis {
    caret-color: transparent;
}

/* FPL-001/REQ-025 FR-6 (item 60, cluster "tooltip") — the ring of the WRAPPER'S OWN focus, when `FocusableWhenTruncated` made it a tab stop of itself (a truncated plain text, or any content with no focusable element of its own — never a
   descendant's focus, which is the ring above's own, different, case). REQ-018's ring convention, reused verbatim (`--focus-w` solid `--accent`, `--focus-offset`) — not a new ring style — so the browser's own default outline on a plain
   `tabindex="0"` span is what this rule replaces (AC-19a). `tooltip.js`'s `updateFocusable` is the only thing that ever gives the region a `tabindex` to begin with (never when it already has its own focusable descendant — the region can
   therefore never carry BOTH this class and a focused descendant at the same time, so no `:not()` guard is needed against the ring above double-firing). */
.ui-tooltip-region.ui-tooltip-focusable-when-truncated:focus-visible[b-t1br7ovjje] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}
/* frontend/Components/Ui/Tree/Tree.razor.rz.scp.css */
/* FPL-001/REQ-003, row 23 — Tree (the container). Fluent FluentTreeView, kept (see TreeNode.razor's
   own header comment for the measurement record). `ui-tree-wrap` exists purely so `::deep` has a
   real HTML ancestor to descend from (Button/B1's lesson, see Tree.razor's own header comment) --
   found live here too: without it, this rule silently matched nothing. */

.ui-tree-wrap[b-b76x4i6p7e] {
    display: contents;
}

[b-b76x4i6p7e] .ui-tree {
    display: block;
    width: 100%;
}
/* frontend/Components/Ui/Tree/TreeNode.razor.rz.scp.css */
/* FPL-001/REQ-003, row 23 — Tree, one node. Fluent FluentTreeItem KEPT (hybrid) — see this file's
   companion TreeNode.razor for the full measurement record on why, unlike Accordion.

   The `fluent-tree-item`/`fluent-menu-item` `::part()` overrides do NOT live here -- a THIRD real
   supplier-integration finding, measured live: `::deep` needs a plain HTML ancestor carrying this
   component's OWN Blazor scope attribute (Button/B1's lesson), but wrapping <FluentTreeItem> in
   that ancestor span breaks the supplier's own recursive nesting -- confirmed directly: every
   nested item's own `data-indent` attribute came back `null` the moment a wrapper existed between a
   parent <fluent-tree-item> and its child, because the supplier relies on the child being a genuine
   DIRECT light-DOM child for its own slot="item" resolution, which `display: contents` does NOT
   preserve (contents affects box generation, not the DOM parent-child chain slot assignment reads).
   No wrapper thus needing not this DIFFERENT unscoped-selector approach: those overrides live in
   `Frontend/wwwroot/css/tree-supplier-overrides.css`, a plain (non-Blazor-scoped) stylesheet loaded
   before `supplier-fluent.css` — see that file's own header comment and TreeNode.md's "Supplier"
   section for the full record. Safe specifically because Tree/TreeNode are the ONLY code in the app
   that ever renders `<fluent-tree-item>`/menu-inside-a-tree-item (DEC-015 §2's boundary is enforced
   structurally, not by this file's own scoping).

   Everything below IS this component's own directly-written markup (not reaching into a supplier's
   shadow DOM), so it needs no `::deep` at all — the normal Blazor scope attribute already lands on
   it correctly. */

.ui-tree-node-err[b-uos58z47d5] {
    padding: var(--space-4) var(--space-8) var(--space-8) var(--space-32);
    color: var(--error);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    display: flex;
    gap: var(--space-4);
}

.ui-tree-node-err-ic[b-uos58z47d5] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    flex: none;
}

.ui-tree-node-aside[b-uos58z47d5] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
}

.ui-tree-node-count[b-uos58z47d5] {
    color: var(--text-secondary);
    font-size: var(--fs-small);
}

.ui-tree-node-menuwrap[b-uos58z47d5] {
    position: relative;
    display: inline-flex;
}

.ui-tree-node-menu-trigger[b-uos58z47d5] {
    height: var(--control-h-sm);
    min-width: var(--control-h-sm);
    padding: 0 var(--space-4);
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--fs-body);
    cursor: pointer;
}

.ui-tree-node-menu-trigger:hover[b-uos58z47d5] {
    background: var(--fill-1);
    color: var(--text);
}

mark[b-uos58z47d5] {
    background: var(--warn-bg);
    color: var(--text);
}
/* frontend/Components/Ui/TwoColumnPageLayout/TwoColumnPageLayout.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 77 — M5 two-column page layout. Matches `08-page-parts.html`'s own
   `.twocol` (744-745), `.twocol > *`/`.twocol.stacked`/`.companion-h` (825-830) verbatim except the
   stacked-companion-width departure below (see TwoColumnPageLayout.razor's own header comment for
   why the sheet's own CSS and its own prose disagree there). `--page-narrow` (1000px) cannot be read
   inside `@media(...)` — hardcoded here and registered in breakpoints-manifest.txt. */

/* width:100% -- found live: without it, a flex-row host (this gallery's own .gallery-row is one)
   lets `.ui-twocol` shrink-wrap to its own content's max-content size instead of filling the host's
   full available width whenever that content is short (the "record" specimen's own few short
   fields) -- the 1fr track then means "1fr of the content's own preferred size," not "1fr of the
   space this layout actually has," and the companion ends up stranded mid-row instead of pinned to
   the true right edge. width:100% makes the grid container's own width host-independent, so 1fr
   always means the real remaining space regardless of what kind of box this layout lives in. */
.ui-twocol[b-3e0ot29ogn] {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr var(--preview-w);
    gap: var(--section-gap-y);
    align-items: start;
}

.ui-twocol > *[b-3e0ot29ogn] {
    min-width: 0;
}

/* The companion never stretches to the form's own height ("both columns starting on the same top
   line" -- align-items:start above already prevents stretch; this is belt-and-suspenders against a
   host's own CSS reset changing that default). */
.ui-twocol-companion[b-3e0ot29ogn] {
    align-self: start;
}

[b-3e0ot29ogn] .ui-twocol-companion-h {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
    margin: 0 0 var(--space-8) 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

[b-3e0ot29ogn] .ui-twocol-companion-h b {
    color: var(--text);
    font-weight: var(--fw-semibold);
}

/* Below --page-narrow: stacked, companion UNDER the form at its own 400px, never a tab, never a
   drawer, gutter becomes the same 24px of vertical space (gap stays --section-gap-y). */
@media (max-width: 1000px) {
    .ui-twocol[b-3e0ot29ogn] {
        grid-template-columns: 1fr;
    }

    /* Sheet's own `.twocol.stacked{grid-template-columns:1fr}` alone leaves the companion stretched
       to the form's full width -- contradicts the sheet's own prose ("keeps its 400px at the left
       edge rather than stretching to 656"). Constrained explicitly here; prose wins. max-width:100%
       is a defensive default, not a gallery-proven fix (see TwoColumnPageLayout.md's own account of
       why the gallery harness itself couldn't isolate this): a bare fixed 400px would never shrink
       for a real host narrower than ~450px, and the sheet never draws state c below its own real
       720px, so this is undrawn territory, not a contradicted rule. */
    .ui-twocol-companion[b-3e0ot29ogn] {
        width: var(--preview-w);
        max-width: 100%;
        justify-self: start;
    }
}
/* frontend/Components/Ui/VerdictBlock/VerdictBlock.razor.rz.scp.css */
/* FPL-001/REQ-003, catalogue row 73 — M1 verdict block. Matches 08-page-parts.html's own `.verdict`
   rule (lines 733-738) and its family-7b additions (lines 781-788) verbatim -- every token already
   declared in tokens.css (--verdict-pad, --verdict-measure, --code-pad-y/x, --banner-line-error,
   --font-mono), nothing new added here. Background NEVER changes per state (colour is never
   load-bearing, the sheet's own M1 caption) -- only the icon's own colour does. */

/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app;
   pinned here for consistency even though this block has no declared width/height today (it fills
   its own flex/block container) -- a host later constraining its size would otherwise get the
   padding/border added back on top. */
.ui-vb[b-a2u3ewggqw] {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: var(--space-12);
    padding: var(--verdict-pad);
    background: var(--surface);
    border: var(--border-w) solid var(--line);
    border-radius: var(--radius);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.ui-vb-ic[b-a2u3ewggqw] {
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: var(--text-secondary);
    flex: none;
    margin-top: var(--space-2);
}

.ui-vb.ui-vb-attn .ui-vb-ic[b-a2u3ewggqw] {
    color: var(--warn);
}

.ui-vb.ui-vb-blocked .ui-vb-ic[b-a2u3ewggqw] {
    color: var(--error);
}

.ui-vb-b[b-a2u3ewggqw] {
    flex: 1;
    min-width: 0;
    max-width: var(--verdict-measure);
}

/* `::deep`: the `<b>` figures are built by VerdictFigureContext.Figure(int) in a plain .cs file, so they never carry this file's scope attribute — the unscoped `.ui-vb-b b` never matched, and the
   figures rendered in the UA's bold 700 against the sheet's `.verdict b { font-weight: var(--fw-semibold) }` 600 (measured live on item 33's page: 700 vs 600). Same lesson as `.ui-vb-gone` below. */
.ui-vb-b[b-a2u3ewggqw]  b {
    font-weight: var(--fw-semibold);
}

/* The "--" that replaces a failed figure -- never a substituted stale value. `::deep` is required:
   these elements are built by VerdictFigureContext.Figure(int)'s own RenderTreeBuilder code in
   VerdictBlockEnums.cs, a plain .cs file the Razor compiler never processes -- Blazor CSS isolation
   scope attributes are assigned by the Razor COMPILER to elements authored in a .razor file's own
   markup, never to elements a .cs file builds at runtime, however they end up nested in the DOM.
   `.ui-vb-b` (an ANCESTOR, authored directly in VerdictBlock.razor) DOES carry this file's own scope
   attribute, so `::deep` (which needs only an ancestor, not the element itself) reaches through it --
   found live, the same class of gap Popover/DatePicker/TagOverflow's own `::deep` fix hit (remainder
   item 16), here one level deeper (a C#-built element, not a missing wrapper). */
[b-a2u3ewggqw] .ui-vb-gone {
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}

/* Matches this layer's own established code-chip look (NamedError's own .ui-seam-code) --
   background/border/colour/font come from the SAME shared chip treatment the sheet's own global
   `.code` rule gives every named-error/seam code across the whole product, not a one-off here.
   `::deep` required for the same reason as .ui-vb-gone above. */
/* box-sizing: border-box (whole-branch pass, box-sizing sweep) -- no global reset in this app;
   pinned here for consistency with NamedError's own `.ui-seam-code` (the shared chip treatment this
   rule matches) even though this chip sizes to its own content today. */
[b-a2u3ewggqw] .ui-vb-code {
    box-sizing: border-box;
    display: inline-block;
    margin: 0 0 0 var(--space-4);
    vertical-align: baseline;
    padding: var(--code-pad-y) var(--code-pad-x);
    background: var(--surface);
    border: var(--border-w) solid var(--banner-line-error);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--error);
}

.ui-vb-link[b-a2u3ewggqw] {
    color: var(--accent);
}

/* FPL-001/REQ-018 (item 49) FR-1(a): drew the browser's default outline — outset, the layer's default.
   Independently found and fixed the same way by item 47 (FPL-001/REQ-017 FR-12) on the representatives
   page's own "show them" link ("auto 1px rgb(16, 16, 16)", measured live) — the two items landed the
   identical rule; this merge keeps the one copy. */
.ui-vb-link:focus-visible[b-a2u3ewggqw] {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.ui-vb-why[b-a2u3ewggqw] {
    display: block;
    margin-top: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}
/* frontend/Components/Ui/VerticalBar/VerticalBar.razor.rz.scp.css */
/* Catalogue row 66 (Simple vertical bar) — the one thing this form adds to ChartFrame's own shared
   scaffolding: a single --series-1 bar per bucket. Baseline/xaxis/tooltip/click/text-state/
   unavailable-state are ALL ChartFrame's own; see VerticalBar.razor's own header comment. */
.ui-vbar-bar[b-ycvudypwhh] {
    display: block;
    width: 100%;
    background: var(--series-1);
    border-radius: var(--space-2) var(--space-2) 0 0;
}

/* FPL-001/REQ-050 — the value above each bar (sheet 05 §14 `.bar-val`, b2/b3). The box sits IN FLOW before the bar (a bottom-aligned bar never moves), one caption line high, `--space-4` above the bar. Its WIDTH is set inline
   by the component (VerticalBar.razor `FitWidth`): the column's PITCH less 2 px clear each side, from the plot's width (`cqw`: the plot is an inline-size container when ShowValues is on), the bucket count and tokens only.
   The fit rule needs no JS: the box is a ONE-LINE, overflow-hidden flex-wrap row whose FIRST item is a zero-width pseudo-element and whose second is the nowrap label — a label wider than the box cannot share line one with
   the zero-width item, so it wraps to line two, which the hidden overflow never paints (decided by layout before the first paint: nothing flashes, a resize re-decides). */
.ui-vbar-val-box[b-ycvudypwhh] {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    height: var(--lh-caption);
    margin-bottom: var(--space-4);
}

.ui-vbar-val-box[b-ycvudypwhh]::before {
    content: "";
    width: 0;
    height: var(--lh-caption);
}

.ui-vbar-val[b-ycvudypwhh] {
    flex: none;
    white-space: nowrap;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    font-variant-numeric: tabular-nums;
}
/* frontend/Components/Ui/VerticalStackedBar/VerticalStackedBar.razor.rz.scp.css */
/* Catalogue row 65 (Vertical stacked bar) — the one thing this form adds to ChartFrame's own shared
   scaffolding: a stack of 2-9 coloured segments per bucket (four until REQ-013). Baseline/xaxis/tooltip/click/text-state/
   unavailable-state are ALL ChartFrame's own; see VerticalStackedBar.razor's own header comment. */

.ui-vsb-stack[b-5wbq0a7g9b] {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    border-radius: var(--space-2) var(--space-2) 0 0;
    overflow: hidden;
}

/* The white hairline between segments -- a border-top on every segment except the DOM-last one
   (which, thanks to column-reverse, is the visually TOPMOST segment with nothing above it). */
.ui-vsb-seg[b-5wbq0a7g9b] {
    width: 100%;
    border-top: var(--border-w) solid var(--seg-line);
}

.ui-vsb-seg:last-child[b-5wbq0a7g9b] {
    border-top: 0;
}

.ui-vsb-s1[b-5wbq0a7g9b] { background: var(--series-1); }
.ui-vsb-s2[b-5wbq0a7g9b] { background: var(--series-2); }
.ui-vsb-s3[b-5wbq0a7g9b] { background: var(--series-3); }
.ui-vsb-s4[b-5wbq0a7g9b] { background: var(--series-4); }
.ui-vsb-s5[b-5wbq0a7g9b] { background: var(--series-5); }
.ui-vsb-s6[b-5wbq0a7g9b] { background: var(--series-6); }
.ui-vsb-s7[b-5wbq0a7g9b] { background: var(--series-7); }
.ui-vsb-s8[b-5wbq0a7g9b] { background: var(--series-8); }
.ui-vsb-s9[b-5wbq0a7g9b] { background: var(--series-9); } /* slate — "Other", always last: the top of the stack */

/* REQ-013 (`ShowValues`): the sheet's `.seg.v` — a value label rides a segment only when it is at least one caption line plus its hairline tall (the component decides;
   this is only how a labelled one looks). White on every one of the nine (>= 3.46 : 1, SeriesTokensTests). */
.ui-vsb-seg-v[b-5wbq0a7g9b] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-accent);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    font-variant-numeric: tabular-nums;
}

/* "Hovering a bar outlines the whole column" -- .ui-chart-col is ChartFrame's own class, not this
   file's, so ::deep is needed to reach it (item 16's own recurring lesson). */
[b-5wbq0a7g9b] .ui-chart-col:hover .ui-vsb-stack {
    outline: var(--border-w) solid var(--text);
    outline-offset: var(--border-w);
}
/* frontend/Services/common/collapse/CollapsedText.razor.rz.scp.css */
.collapsed-text-body[b-1bi9r3wajv] {
    overflow-wrap: anywhere;
}

.collapsed-text-body-collapsed[b-1bi9r3wajv] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--collapsed-lines);
    line-clamp: var(--collapsed-lines);
    overflow: hidden;
}