/* Bad Marine LLC — "Tactical Bridge" theme. Palette locked; mirrors
   ~/skippy_mmucc/src/skippy_mmucc_frontend/src/index.scss. Don't change these hex values without
   updating the refinery-sibling-projects-and-brand memory. */
:root {
    --bg-matte-carbon: #0d0d0d;
    --bg-dark-armor: #1a1a1a;
    --bg-dark-armor-raised: #232323;
    --text-brushed-aluminum: #d1d5db;
    --text-dim: #8b93a1;
    --accent-cyan-glow: #00e5ff;
    --guest-amber: #d97706;
    --danger: #ef4444;
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.18);
}

html, body {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    margin: 0;
    background: var(--bg-matte-carbon);
    color: var(--text-brushed-aluminum);
}

a { color: var(--accent-cyan-glow); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: #f3f4f6; font-weight: 600; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; margin-top: 1.5rem; }
code { color: var(--accent-cyan-glow); background: rgba(0, 229, 255, 0.07); padding: 0 .25em; border-radius: 3px; }

button, input, select, textarea {
    font-family: inherit;
    font-size: 0.95em;
    background: var(--bg-dark-armor-raised);
    color: var(--text-brushed-aluminum);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 0.45em 0.8em;
}
button { cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .05s ease; }
button:hover:not(:disabled) { border-color: var(--accent-cyan-glow); }
button:active:not(:disabled) { transform: scale(0.97); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: #6b7280; }

table { border-collapse: collapse; width: 100%; margin: .5rem 0; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
th { color: var(--text-dim); font-weight: 600; border-bottom: 1px solid var(--border-strong); }
tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

/* --- shell --- */
.page { min-height: 100vh; }
.top-row {
    background: var(--bg-dark-armor);
    border-bottom: 1px solid var(--border-strong);
    padding: 0.55rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.top-row .brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: .04em; color: #fff; }
.top-row .brand img { height: 30px; width: 30px; }
.top-row nav { display: inline-flex; gap: 1rem; }
.top-row nav a { color: var(--text-brushed-aluminum); }
.top-row nav a:hover { color: var(--accent-cyan-glow); text-decoration: none; }

/* Full-width, every screen (Sean, 2026-09-13: "apply this same change to EVERY screen... so we are
   working with the same real estate going forward"). Was max-width: 90rem, which left real dead
   space on a wide/ultra-wide monitor - first fixed per-page (Home.razor's .rf-home, then
   IntakeMatchResolve.razor's .rf-intake-match-full, each via a scoped `.content:has(...)`
   override) before Sean asked for it everywhere at once; both page-level overrides were removed
   once this global rule made them redundant. */
.content, .px-4 { padding: 1.25rem 1.5rem; }

.status { color: var(--text-dim); font-size: 0.8em; }

/* Dev-auth strip (MainLayout.razor) - only rendered when Refinery:FakeAd:Enabled */
.rf-devbar {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    padding: .4rem .7rem; margin-bottom: 1rem; font-size: .82em;
    background: rgba(217, 119, 6, 0.10); border: 1px solid var(--guest-amber); border-radius: 6px;
}
.rf-devbar span { color: var(--text-dim); }
.rf-devbar strong { color: var(--accent-cyan-glow); }
.rf-devbar .roles { color: var(--text-dim); }
.rf-devbar a { margin-left: auto; }
/* Demo plan M6: the public demo's "Sample data - Try it as" bar. */
.rf-demobar a { margin-left: 0; padding: .1rem .55rem; border: 1px solid var(--border-strong); border-radius: 4px; }
.rf-demobar a.active { color: var(--accent-cyan-glow); border-color: var(--accent-cyan-glow); }
.rf-demobar a.rf-demo-manual { margin-left: auto; color: var(--guest-amber); border-color: var(--guest-amber); font-weight: 600; }

/* [?] HelpTip (Components/Shared/HelpTip.razor) - Instruction Suppression Rule, 2026-09-13:
   instructional prose that used to sit in a page's header block lives behind this instead. */
.rf-helptip { position: relative; display: inline-flex; align-items: center; }
.rf-helptip-btn {
    width: 1.15rem; height: 1.15rem; border-radius: 50%; padding: 0; line-height: 1;
    font-size: .7rem; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--text-dim); border: 1px solid var(--border-strong);
    cursor: help;
}
.rf-helptip-btn:hover, .rf-helptip-btn:focus-visible { border-color: var(--accent-cyan-glow); color: var(--accent-cyan-glow); }
.rf-helptip-text {
    display: none; position: absolute; z-index: 30; top: 140%; left: 0;
    background: var(--bg-dark-armor-raised); border: 1px solid var(--border-strong); border-radius: 6px;
    padding: .55rem .7rem; width: max-content; max-width: 22rem; font-size: .82em; font-weight: normal;
    color: var(--text-brushed-aluminum); box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.rf-helptip:hover .rf-helptip-text, .rf-helptip:focus-within .rf-helptip-text { display: block; }

/* High-density review-screen buttons (Sean, 2026-09-13 UI/UX pass) - a solid primary action and a
   bordered/outline secondary one, for screens with one clear "do this" button among several. */
.rf-btn-primary {
    background: #475569; border-color: #475569; color: #fff; font-weight: 600;
}
.rf-btn-primary:hover:not(:disabled) { background: #64748b; border-color: #64748b; }
.rf-btn-outline { background: transparent; }

/* Compact list-screen header + single-row filter toolbar (Sean, 2026-09-19, "Enterprise UI/UX
   Architect" spec on the Validation queue - "eliminate the massive vertical space waste"). Global,
   not scoped to one page - ReviewQueue.razor is the first user, but any queue/search screen with a
   3-line instructional paragraph and a stacked multi-row filter block can move to this same shape.
   No Tailwind: plain semantic classes, styled here with the theme's own custom properties. */
.rf-queue-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.rf-queue-header h1 { margin: 0; }

/* One flex row, no wrap - every control gets an explicit compact width instead of stretching, and
   labels sit inline (not stacked above their input) so the whole bar stays well under 40px tall. */
.rf-filter-toolbar {
    display: flex; flex-wrap: nowrap; align-items: center; gap: .75rem;
    margin-bottom: .75rem; overflow-x: auto; padding-bottom: .15rem;
}
.rf-filter-group { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; white-space: nowrap; }
.rf-filter-group label { font-size: .78em; color: var(--text-dim); }
.rf-filter-toolbar input, .rf-filter-toolbar select {
    height: 2rem; padding: 0 .5rem; border-radius: 6px; font-size: .88em;
    /* box-sizing: border-box - the app has no global reset for this, so a literal width: 140px
       below would otherwise render wider once padding/border are added on top (content-box, the
       CSS default). Scoped to just this toolbar's own inputs, not a global change. */
    box-sizing: border-box;
}
.rf-filter-date { width: 140px; }
.rf-filter-county { width: 180px; }
.rf-filter-case { width: 160px; }

/* "Browse Queue" as a secondary ghost tab next to the search controls, not a mode switch - there is
   only one queue view now, this just labels it. */
.rf-tab-ghost {
    background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim);
    border-radius: 999px; padding: 0 .9rem; height: 2rem; font-size: .85em; flex: 0 0 auto;
}
.rf-tab-ghost[disabled] {
    opacity: 1; color: var(--accent-cyan-glow); border-color: var(--accent-cyan-glow); cursor: default;
}

/* The primary "Work Next Case (FIFO)" action anchors the right edge of the same row. */
.rf-toolbar-spacer { margin-left: auto; display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; }
.rf-toolbar-spacer .rf-btn-primary { height: 2rem; padding: 0 1rem; white-space: nowrap; }

/* A CountyGroup.FifoOnly member's toolbar - same ghost-tab shape as Browse Queue's, styled in the
   same amber the app already uses for "something needs attention" (.rf-flag/.rf-needs-attn), since
   this is a real standing restriction on the identity, not an ordinary neutral tab. */
.rf-tab-ghost--fifo {
    display: inline-flex; align-items: center; height: 2rem; padding: 0 .9rem; border-radius: 999px;
    background: rgba(180,83,9,.18); border: 1px solid #b45309; color: #b45309; font-weight: 600;
    font-size: .85em;
}

/* Self-service "lock this filter so it stays applied" toggle (Sean, 2026-09-19) - same amber active
   state as the FIFO-only tab above, since a locked filter is likewise a standing state worth
   noticing at a glance, not just an ordinary momentary UI toggle. */
.rf-lock-toggle {
    background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim);
    border-radius: 6px; height: 2rem; padding: 0 .7rem; font-size: .85em; flex: 0 0 auto;
    white-space: nowrap;
}
.rf-lock-toggle.active {
    background: rgba(180,83,9,.18); border-color: #b45309; color: #b45309; font-weight: 600;
}

/* Field-row flag/agreed/needs-attention markers - global (moved out of ReviewRecord.razor's own
   scoped <style> block 2026-09-19) so LocationRecord.razor's own port of the same fix
   (2026-09-19: "all the other fixes you just made in validation should be made over here") can
   reuse them verbatim rather than duplicating the rules per screen. */
.rf-flag { color: #b45309; font-size: .85em; margin-top: .15rem; }
/* Live rule check (RuleCheck): "Must fix" blocks completion, "Check" is a warning. */
.rf-rule-problem {
    border-left: 3px solid var(--danger); background: rgba(239,68,68,.10); color: var(--text-brushed-aluminum);
    border-radius: 3px; padding: .3rem .5rem; margin-top: .3rem; font-size: .9em;
}
.rf-rule-problem--warn { border-left-color: var(--guest-amber); background: rgba(217,119,6,.10); }
.rf-rule-problem-kind { font-weight: 700; margin-right: .35rem; color: var(--danger); }
.rf-rule-problem--warn .rf-rule-problem-kind { color: var(--guest-amber); }
.rf-rule-problem-now { color: var(--text-dim); font-size: .9em; margin-top: .15rem; }
.rf-rule-problem-id { color: var(--text-dim); font-size: .75em; margin-left: .4rem; }
.rf-rule-link {
    display: inline-block; margin: .3rem .4rem 0 0; padding: .1rem .5rem; border-radius: 999px; font: inherit; font-size: .85em;
    background: transparent; border: 1px solid var(--accent-cyan-glow); color: var(--accent-cyan-glow); cursor: pointer;
}
.rf-rule-link--back { margin-top: .4rem; }
.rf-rule-link--off { border-color: var(--border-strong); color: var(--text-dim); cursor: default; }
/* Management: the two lanes of a routed report (ManagementResolve). */
/* MG3: management's own priority on a queue row. */
.rf-mgmt-priority { border-radius: 3px; padding: 0 .35rem; margin-right: .25rem; font-weight: 700; }
.rf-mgmt-priority--high { background: var(--danger); color: #fff; }
.rf-mgmt-priority--low { background: var(--bg-dark-armor-raised); color: var(--text-brushed-aluminum); border: 1px solid var(--border-strong); }
.rf-mp-control { display: flex; align-items: center; gap: .4rem; margin: .4rem 0 .8rem; }
.rf-mp-label { font-weight: 600; margin-right: .2rem; }
.rf-mp-btn {
    font: inherit; cursor: pointer; padding: .15rem .7rem; border-radius: 999px;
    background: transparent; border: 1px solid var(--border-strong); color: var(--text-brushed-aluminum);
}
.rf-mp-btn.active { border-color: var(--accent-cyan-glow); color: var(--accent-cyan-glow); font-weight: 700; }
.rf-mq-tiles { display: flex; gap: .75rem; margin: .5rem 0 1rem; }
.rf-mq-tile {
    display: flex; flex-direction: column; align-items: flex-start; min-width: 9rem; padding: .6rem .9rem; cursor: pointer;
    background: var(--bg-dark-armor-raised); border: 1px solid var(--border-strong); border-radius: 6px;
    color: var(--text-brushed-aluminum); font: inherit;
}
.rf-mq-tile.active { border-color: var(--accent-cyan-glow); }
.rf-mq-tile-n { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.rf-mg-admin { border-left: 3px solid var(--accent-cyan-glow); background: rgba(0,229,255,.08); padding: .5rem .8rem; margin-bottom: 1rem; max-width: 48rem; }
.rf-waiver { max-width: 48rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .3rem; }
.rf-mg-hold { display: flex; align-items: center; gap: .6rem; }
.rf-mq-age { margin-top: 2rem; }
.rf-mq-age h2 { font-size: 1.05rem; display: flex; align-items: center; gap: .35rem; }
.rf-mg-lanes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin: .5rem 0 1rem; }
.rf-mg-lane { display: flex; align-items: center; gap: .6rem; }
.rf-mg-done { color: #16a34a; font-weight: 600; }
.rf-mg-open { color: var(--guest-amber); font-weight: 600; }
.rf-mg-return { display: flex; gap: .6rem; align-items: flex-start; max-width: 48rem; margin-bottom: 1rem; }
.rf-mg-return textarea { flex: 1; }
.rf-rule-summary { margin-bottom: .6rem; display: flex; flex-direction: column; gap: .25rem; }
.rf-rule-summary-head { font-weight: 700; display: flex; align-items: center; gap: .35rem; }
.rf-rule-summary-item {
    text-align: left; cursor: pointer; font: inherit; color: var(--text-brushed-aluminum);
    border: none; border-left: 3px solid var(--danger); background: rgba(239,68,68,.10);
    border-radius: 3px; padding: .3rem .5rem; font-size: .9em;
}
.rf-rule-summary-item.rf-rule-problem--warn { border-left-color: var(--guest-amber); background: rgba(217,119,6,.10); }
.rf-agreed { color: #16a34a; font-size: .85em; margin-left: .5rem; }
.rf-needs-attn {
    background: rgba(180,83,9,.18); color: #b45309; border-radius: 3px; padding: 0 .4rem;
    font-size: .75em; margin-left: .5rem; font-weight: 600;
}

/* Document tabs (which OTHER report in the case an image pane is showing) - global copy for
   LocationRecord.razor's own port (2026-09-19: "all the other fixes you just made in validation
   should be made over here"), using the theme's plain global tokens rather than ReviewRecord.razor's
   own local --rf-* variable set. Blazor's CSS scoping means this never overrides
   ReviewRecord.razor's own more-specific scoped .rf-doc-tab rule for its own elements (same class
   name, harmless coexistence) - it only ever applies where nothing more specific already does. */
.rf-doc-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; }
.rf-doc-tab {
    border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg-dark-armor-raised);
    color: var(--text-dim); padding: .2rem .5rem; font-size: .78em; cursor: pointer;
    display: flex; align-items: center; gap: .35rem;
}
.rf-doc-tab:hover { border-color: var(--accent-cyan-glow); color: var(--text-brushed-aluminum); }
.rf-doc-tab.active { border-color: var(--accent-cyan-glow); color: var(--accent-cyan-glow); font-weight: 600; }
.rf-doc-tab-badge { background: #164e63; color: #67e8f9; border-radius: 999px; font-size: .85em; line-height: 1; padding: .1em .4em; }
.rf-doc-tab-badge--dim { background: rgba(139,147,161,.2); color: var(--text-dim); }

/* Shared pagination control (Components/Shared/Pager.razor, Sean, 2026-09-17) - one consistent
   look on every list screen (queues, admin tables, search results). Renders nothing when the whole
   list already fits on one page. */
.rf-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin: .75rem 0; font-size: .85em; color: var(--text-dim); }
.rf-pager-controls { display: flex; align-items: center; gap: .4rem; }
.rf-pager-controls button { padding: .3rem .6rem; font-size: .9em; }
.rf-pager-page { padding: 0 .3rem; white-space: nowrap; }

/* Match/confidence pills (Sean, 2026-09-13) - qualitative only (strong/weak/unverified), never a
   fabricated precision percentage: CaseMatcher itself only ever reports which signals matched
   (exact vs. sounds-like name), not a numeric confidence score, so the UI doesn't invent one. */
.rf-pill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78em; font-weight: 600; white-space: nowrap; }
.rf-pill-strong { background: rgba(34, 197, 94, .15); color: #22c55e; }
.rf-pill-weak { background: rgba(217, 119, 6, .15); color: var(--guest-amber); }
.rf-pill-neutral { background: rgba(255, 255, 255, .08); color: var(--text-dim); }
/* A general "stand out" marker pill (e.g. the INCOMING badge on /intake/match) - distinct from the
   match-confidence pills above and deliberately NOT the cyan accent, which is reserved for actions/
   links (Sean, 2026-09-13). Same amber as rf-pill-weak's color, just a different semantic name. */
.rf-pill-accent { background: rgba(217, 119, 6, .15); color: var(--guest-amber); }

/* Shared dashboard date-range control (Components/Shared/DashboardDateRangeControls.razor, Sean,
   2026-09-18) - the same From/To/To-Date bar on every dashboard + Metrics. */
.rf-daterange-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .5rem 0 1.25rem; font-size: .9em; color: var(--text-dim); }
.rf-daterange-bar input[type="date"] { padding: .3rem .5rem; font-size: .95em; }
.rf-daterange-todate { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
.rf-daterange-bar--compact { margin: 0; }
.rf-daterange-presets { display: inline-flex; gap: .25rem; }
.rf-daterange-preset {
    font: inherit; font-size: .9em; cursor: pointer; padding: .15rem .6rem; border-radius: 999px;
    background: transparent; border: 1px solid var(--border-strong); color: var(--text-brushed-aluminum);
}
.rf-daterange-preset:hover { border-color: var(--accent-cyan-glow); color: var(--accent-cyan-glow); }

/* System Admin sub-navigation (AdminTabs.razor) */
/* Admin sub-navigation - 2 tiers, fixed height, never wraps (Sean, 2026-09-23: 21 wrapped links
   -> 5 category pills over the active category's tabs). Each row scrolls sideways on a narrow
   window instead of wrapping, so the bar's height - and every locked-viewport admin page's
   calc(100vh - ...) below it - stays constant. Palette tokens only. */
.admin-subnav {
    --subnav-row: 30px;
    display: grid; grid-template-rows: var(--subnav-row) var(--subnav-row); row-gap: 2px;
    height: calc(var(--subnav-row) * 2 + 2px); margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-strong);
}
.admin-subnav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .35rem;
    white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.admin-subnav ul::-webkit-scrollbar { display: none; }
.admin-subnav li { flex: 0 0 auto; }
.category-pill {
    display: inline-flex; align-items: center; gap: .35rem; height: 24px; padding: 0 .75rem;
    border: 1px solid var(--border-strong); border-radius: 999px;
    color: var(--text-dim); font-size: .85rem; text-decoration: none;
}
.category-pill:hover { color: var(--text-brushed-aluminum); text-decoration: none; }
.category-pill.active { background: var(--bg-dark-armor-raised); color: var(--accent-cyan-glow); border-color: var(--accent-cyan-glow); }
.subtab-bar { align-self: stretch; }
.subtab {
    position: relative; display: inline-flex; align-items: center; gap: .3rem; height: var(--subnav-row);
    padding: 0 .7rem; color: var(--text-dim); font-size: .85rem; text-decoration: none;
}
.subtab:hover { color: var(--text-brushed-aluminum); text-decoration: none; }
.subtab.active { color: var(--accent-cyan-glow); }
.subtab.active::after {
    content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -1px; height: 2px;
    background: var(--accent-cyan-glow); border-radius: 2px;
}
.subtab-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
    padding: 0 4px; border-radius: 999px; font-size: .7rem; font-weight: 700; line-height: 1; color: #0d0d0d;
}
.subtab-badge.warn { background: var(--guest-amber); }
.subtab.danger { color: var(--danger); }
.subtab.danger.active::after { background: var(--danger); }

/* Form calibration - locked 100vh IDE layout (/admin/form-calibration, Sean, 2026-09-19,
   "Enterprise UI/UX Architect" spec). Same locked-viewport shape as ReviewRecord.razor's own
   .rf-workspace / LocationRecord.razor's .rf-loc-shell: a fixed-height flex column (header /
   toolbar / body), the body a flex row of a scrollable canvas pane and a fixed-width inspector
   pane, each side scrolling independently. Height offset is a first estimate for an admin page
   (top nav + .admin-subnav + this page's own slim header, no pipeline stepper/banners the record
   screens carry) - not pixel-verified against a real window yet, same honest caveat every
   locked-viewport page in this app carries; nudge the constant if it clips or leaves a gap.
   Measured 2026-09-23 with the 2-tier admin nav: the workspace starts 187px down (incl. the dev
   identity strip) + 19px bottom padding = 206px = 13.75rem; 9.5rem overflowed by 64px.
   Re-measured 2026-09-27: 13.75rem left every locked page 5px too tall (845 in an 840 window) -
   on Windows that brings up scrollbars (Sean saw a stray one). 14.1rem fits exactly. */
.calibration-workspace { display: flex; flex-direction: column; height: calc(100vh - 14.1rem); min-height: 26rem; }
/* A locked-viewport page never scrolls as a whole - each of its panes does. The height offset above
   can be a few px off when the top menu wraps on a narrower window, so on desktop widths the page
   itself doesn't scroll at all (no stray scrollbar, Sean 2026-09-27). Narrow screens keep normal
   scrolling - the studios stack there. */
@media (min-width: 1001px) and (min-height: 560px) {
    html:has(.studio, .calibration-workspace, .mmucc-workspace, .fd-workspace) { overflow: hidden; }
}
.calibration-header { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.calibration-header h1 { margin: 0; }
.calibration-toolbar {
    flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; flex-wrap: nowrap;
    height: 2.5rem; padding: 0 .25rem; margin-bottom: .5rem; overflow-x: auto;
}
.calibration-toolbar > * { flex: 0 0 auto; }
.calibration-toolbar select, .calibration-toolbar input[type="text"] { height: 2rem; box-sizing: border-box; }
.calibration-toolbar .fc-sep { color: var(--text-dim); }
.calibration-toolbar .fc-spacer { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.calibration-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 0; align-items: stretch; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }

/* .canvas-pane is the non-scrolling frame (position:relative, so the floating zoom pill below can
   anchor to ITS corner regardless of scroll); .canvas-scroll is the actual scrollable viewport
   inside it. Splitting these two is what lets the zoom pill stay pinned to a fixed screen corner
   while the (possibly much larger, zoomed-in) page content scrolls underneath it - an
   absolutely-positioned child of the SCROLLING element would scroll away with the content instead. */
.canvas-pane { flex: 1 1 60%; position: relative; overflow: hidden; background: #050505; }
.canvas-scroll { position: absolute; inset: 0; overflow: auto; }
/* Space+drag panning swaps the cursor so it reads as "grab the page," not "draw a box." */
.canvas-scroll.fc-pan-ready { cursor: grab; }
.canvas-scroll.fc-panning { cursor: grabbing; }

.zoom-toolbar {
    position: absolute; top: .5rem; right: .5rem; z-index: 5;
    display: inline-flex; align-items: center; gap: .25rem;
    background: rgba(26, 26, 26, .92); border: 1px solid var(--border-strong); border-radius: 999px;
    padding: .2rem .3rem;
}
.zoom-toolbar button { height: 1.8rem; width: 1.8rem; padding: 0; border-radius: 50%; font-size: .95em; }
.zoom-toolbar button.fc-zoom-wide { width: auto; border-radius: 999px; padding: 0 .7rem; font-size: .8em; }
.zoom-toolbar .fc-zoom-pct { min-width: 3.2rem; text-align: center; font-size: .82em; color: var(--text-dim); }

.inspector-pane {
    flex: 0 0 26rem; max-width: 26rem; overflow-y: auto; padding: .75rem .9rem;
    background: var(--bg-dark-armor); border-left: 1px solid var(--border-strong);
}
.inspector-pane h3 { margin: 0 0 .5rem; font-size: 1em; }

/* State A - "Mapped fields on this form" list. Sticky search + page-filter row so it stays visible
   while the (potentially long) field list scrolls underneath it inside the same inspector pane. */
.fc-mapped-toolbar { position: sticky; top: -.75rem; background: var(--bg-dark-armor); padding: .5rem 0; margin: -.75rem 0 .5rem; z-index: 2; }
.fc-mapped-toolbar input { width: 100%; box-sizing: border-box; margin-bottom: .4rem; }
.fc-page-filter { display: flex; flex-wrap: wrap; gap: .3rem; }
.fields-table { font-size: .88em; }
.fields-table th, .fields-table td { padding: .3rem .4rem; }

/* State B - the selected-box inspector. */
.fc-location-badge { display: inline-block; background: rgba(0, 229, 255, .1); color: var(--accent-cyan-glow); border-radius: 999px; padding: .15rem .7rem; font-size: .8em; font-weight: 600; margin-bottom: .5rem; }
.fc-coord-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: .5rem 0; }
.fc-coord-grid label { display: block; font-size: .78em; color: var(--text-dim); }
.fc-coord-grid input { width: 100%; box-sizing: border-box; margin-top: .15rem; }
.fc-field-search-wrap { position: relative; }
.fc-field-dropdown {
    position: absolute; z-index: 6; top: 100%; left: 0; right: 0; margin-top: .2rem;
    max-height: min(60vh, 32rem); overflow-y: auto; background: var(--bg-dark-armor-raised);
    border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}
.fc-field-dropdown > div { padding: .4rem .55rem; cursor: pointer; border-bottom: 1px solid var(--border-subtle); }
.fc-field-dropdown > div:hover { background: rgba(0, 229, 255, .08); }
.fc-field-dropdown > div:last-child { border-bottom: none; }
.fc-btn-danger-outline { background: transparent; border-color: var(--danger); color: var(--danger); }
.fc-btn-danger-outline:hover:not(:disabled) { background: rgba(239, 68, 68, .1); border-color: var(--danger); }

/* Boxes on the canvas. The active/selected box gets a persistent pulsing halo - it never fades on
   its own, only when a different box is selected or "Back to All Fields"/Escape clears _selected. */
.fc-box { position: absolute; box-sizing: border-box; }
.fc-box-active { animation: fc-pulse 1.6s ease-in-out infinite; z-index: 3; }
@keyframes fc-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(0, 229, 255, .55), 0 0 10px 2px rgba(0, 229, 255, .35); }
    50% { box-shadow: 0 0 0 2px rgba(0, 229, 255, .9), 0 0 16px 6px rgba(0, 229, 255, .55); }
}
.fc-resize-handle { position: absolute; width: 9px; height: 9px; background: var(--accent-cyan-glow); border: 1px solid #002; border-radius: 2px; }
.fc-rh-nw { left: -5px; top: -5px; cursor: nwse-resize; }
.fc-rh-n { left: 50%; top: -5px; margin-left: -4.5px; cursor: ns-resize; }
.fc-rh-ne { right: -5px; top: -5px; cursor: nesw-resize; }
.fc-rh-e { right: -5px; top: 50%; margin-top: -4.5px; cursor: ew-resize; }
.fc-rh-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.fc-rh-s { left: 50%; bottom: -5px; margin-left: -4.5px; cursor: ns-resize; }
.fc-rh-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.fc-rh-w { left: -5px; top: 50%; margin-top: -4.5px; cursor: ew-resize; }

/* MMUCC6 mapping - locked 100vh Schema Mapping Studio (/admin/mmucc-mapping, Sean, 2026-09-21,
   "Enterprise UI/UX Architect" spec). Same locked-viewport shape as .calibration-workspace: a
   fixed-height flex column (header / domain tabs / body / sticky footer), the body a flex row of a
   65% mapping-grid pane and a 35% unmapped-source-pool pane, each scrolling independently. Height
   offset matches .calibration-workspace's own (same admin-tab + slim-header context, no pipeline
   stepper/banners) - same honest "not pixel-verified against a real window yet" caveat. */
.mmucc-workspace { display: flex; flex-direction: column; height: calc(100vh - 14.1rem); min-height: 26rem; }
.mmucc-header { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.mmucc-header h1 { margin: 0; }
.mmucc-tabs { flex: 0 0 auto; display: flex; gap: .3rem; margin-bottom: .5rem; flex-wrap: wrap; }
.mmucc-tab {
    background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim);
    border-radius: 999px; padding: .3rem 1rem; font-size: .85em; cursor: pointer;
}
.mmucc-tab:hover { border-color: var(--accent-cyan-glow); color: var(--text-brushed-aluminum); }
.mmucc-tab.active { background: rgba(0, 229, 255, .1); border-color: var(--accent-cyan-glow); color: var(--accent-cyan-glow); font-weight: 600; }
.mmucc-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 0; align-items: stretch; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.mmucc-grid-pane { flex: 1 1 65%; min-width: 0; overflow-y: auto; padding: .6rem .75rem; }
.mmucc-pool-pane {
    flex: 0 0 35%; max-width: 35%; overflow-y: auto; padding: .6rem .75rem;
    background: var(--bg-dark-armor); border-left: 1px solid var(--border-strong);
}
.mmucc-pool-pane h2 { margin-top: 0; font-size: .85em; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; }
.mmucc-grid { font-size: .88em; }
.mmucc-grid select { font-size: .95em; max-width: 18rem; }
.mmucc-row-pending { background: rgba(180, 83, 9, .08); }
.src-badge {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    background: rgba(0, 229, 255, .07); color: var(--accent-cyan-glow); border-radius: 4px; padding: .1rem .4rem;
}
.mmucc-domain-tag {
    display: inline-block; font-size: .72em; color: var(--text-dim);
    border: 1px solid var(--border-subtle); border-radius: 4px; padding: 0 .35rem; white-space: nowrap;
}
.mmucc-pool-search { position: sticky; top: -.6rem; background: var(--bg-dark-armor); padding: .5rem 0; margin: -.6rem 0 .5rem; z-index: 2; }
.mmucc-pool-search input { width: 100%; box-sizing: border-box; margin-bottom: .4rem; }
.mmucc-pool-pills { display: flex; flex-wrap: wrap; gap: .3rem; }
.mmucc-pool-tags { display: flex; flex-wrap: wrap; gap: .4rem; align-content: flex-start; }
.mmucc-tag {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .8em;
    background: var(--bg-dark-armor-raised); border: 1px solid var(--border-strong); color: var(--text-brushed-aluminum);
    border-radius: 999px; padding: .3rem .75rem;
}
.mmucc-tag:hover { border-color: var(--accent-cyan-glow); color: var(--accent-cyan-glow); }
.mmucc-footer {
    flex: 0 0 auto; display: flex; align-items: center; gap: 1rem; margin-top: .5rem;
    padding: .6rem .9rem; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-dark-armor);
}
.mmucc-progress { flex: 1 1 auto; display: flex; align-items: center; gap: .6rem; min-width: 0; }
.mmucc-progress-bar { flex: 0 0 auto; width: 12rem; height: .5rem; background: var(--bg-dark-armor-raised); border-radius: 999px; overflow: hidden; }
.mmucc-progress-fill { height: 100%; background: var(--accent-cyan-glow); }
.mmucc-progress-label { font-size: .85em; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mmucc-btn-ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim); }
.mmucc-btn-ghost:hover:not(:disabled) { border-color: var(--accent-cyan-glow); color: var(--accent-cyan-glow); }

/* A crosswalk rule this picker can display but not yet edit (CountyCrosswalk / StringKeyedCrosswalk
   - MmuccScalarFieldMapping's two special crosswalk-table shapes, distinct from the plain named
   Crosswalk the picker's dropdown already covers) - shown as a fixed, non-interactive label rather
   than a select the picker would silently render blank or wrong. */
.mmucc-fixed-rule { font-size: .85em; color: var(--text-dim); white-space: nowrap; }
.mmucc-needs-crosswalk { display: inline-block; margin-left: .4rem; padding: .05rem .4rem; border-radius: 8px; font-size: .75em; white-space: nowrap; color: var(--guest-amber); border: 1px solid currentColor; }
.mmucc-sidecar-list { margin-top: .9rem; font-size: .85em; color: var(--text-dim); }
.mmucc-sidecar-list ul { margin: .4rem 0 0; padding-left: 1.1rem; max-height: 12rem; overflow-y: auto; }

/* /admin/legacy-output (docs/design-legacy-output-mapping.md) */
.lo-page { display: flex; flex-direction: column; gap: .8rem; }
.lo-header { display: flex; align-items: center; gap: .6rem; }
.lo-header h1 { margin: 0; }
.lo-panel { border: 1px solid var(--border-strong); border-radius: 8px; padding: .6rem .8rem; background: var(--bg-dark-armor); }
.lo-panel h2, .lo-tables h2 { margin: 0 0 .4rem; font-size: .85em; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; }
.lo-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .35rem 0; }
.lo-ok { color: #22c55e; font-size: .9em; }
.lo-bad { color: var(--danger); font-size: .9em; }
.lo-dim { color: var(--text-dim); font-size: .82em; }
.lo-errors { color: var(--danger); margin: 0; padding-left: 1.2rem; }
.lo-statuses { display: inline-block; }
.lo-status { display: block; font-size: .85em; }
.lo-body { display: grid; grid-template-columns: 15rem 1fr; gap: .8rem; align-items: start; }
.lo-tables { display: flex; flex-direction: column; gap: .3rem; }
.lo-table-btn { text-align: left; display: flex; flex-direction: column; padding: .4rem .55rem; border-radius: 8px; }
.lo-table-btn.active { border-color: var(--accent-cyan-glow); color: var(--accent-cyan-glow); }
.lo-add { display: flex; flex-direction: column; gap: .3rem; margin-top: .4rem; }
.lo-editor { min-width: 0; }
.lo-grid-wrap { overflow-x: auto; max-height: 60vh; overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: 6px; }
.lo-grid { width: 100%; font-size: .85em; }
.lo-grid th { position: sticky; top: 0; background: var(--bg-dark-armor-raised); z-index: 1; }
.lo-grid .lo-unmapped td { opacity: .75; }
.lo-danger { color: #fb7185; }
@media (max-width: 900px) { .lo-body { grid-template-columns: 1fr; } }

/* System Settings console (/admin/settings, Sean, 2026-09-23 spec): a 2-column card grid of
   label-left / control-right rows, one page-wide draft, and a sticky command bar that says whether
   anything is unsaved. Palette tokens only. */
.settings-workspace { padding-bottom: 4.5rem; }
.settings-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.settings-header h1 { margin: 0; }
.settings-error { color: var(--danger); margin: 0 0 .75rem; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.settings-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
/* The two columns' themes (Sean, 2026-09-27: "even them out but group them"). */
.settings-group-title {
    font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-dim); border-bottom: 1px solid var(--border-strong); padding-bottom: .35rem;
}
@media (max-width: 1000px) { .settings-grid { grid-template-columns: 1fr; } }
.settings-card {
    background: var(--bg-dark-armor); border: 1px solid var(--border-strong); border-radius: 6px;
    padding: 1rem 1.25rem;
}
.settings-card.full { grid-column: 1 / -1; }
.settings-card h2 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font-size: 1rem; color: var(--text-brushed-aluminum); }
.form-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 2.4rem; padding: .35rem 0; border-bottom: 1px solid var(--border-subtle);
}
.form-row:last-child { border-bottom: none; }
.form-subhead {
    display: flex; align-items: center; gap: .35rem; margin: .6rem 0 0; padding-bottom: .2rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-cyan-glow);
}
.settings-card h2 + .form-subhead { margin-top: 0; }
.form-row.stacked { flex-direction: column; align-items: stretch; gap: .35rem; }
.form-row.disabled { opacity: .45; }
.form-label { color: var(--text-dim); font-size: .9rem; }
.form-value { color: var(--text-brushed-aluminum); font-size: .9rem; }
.form-row input:not([type=checkbox]), .form-row select { width: 16rem; max-width: 100%; box-sizing: border-box; }
.form-row input.num-input { width: 6rem; }
.form-row input.num-input.short { width: 4.5rem; }
.form-row input.mono-input { width: 100%; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem; }
code.tag { font-size: .75rem; }
.pill-group { display: inline-flex; gap: .35rem; }
.status-pill {
    display: inline-flex; align-items: center; height: 22px; padding: 0 .6rem; border-radius: 999px;
    font-size: .8rem; border: 1px solid var(--border-strong); color: var(--text-dim);
}
.status-pill.ok { color: var(--accent-cyan-glow); border-color: var(--accent-cyan-glow); }
.status-pill.warn { color: var(--guest-amber); border-color: var(--guest-amber); }
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; }
.stepper button { width: 2rem; border: none; border-radius: 0; background: var(--bg-dark-armor-raised); color: var(--text-brushed-aluminum); cursor: pointer; }
.stepper button:disabled { opacity: .4; cursor: default; }
.stepper input { width: 3.5rem !important; border: none; border-radius: 0; text-align: center; }
/* Toggle switch - a real checkbox underneath, so @bind and keyboard/space still work. */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .slider {
    position: absolute; inset: 0; cursor: pointer; border-radius: 999px;
    background: var(--bg-dark-armor-raised); border: 1px solid var(--border-strong); transition: background .15s;
}
.switch .slider::before {
    content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; border-radius: 50%;
    background: var(--text-dim); transition: transform .15s, background .15s;
}
.switch input:checked + .slider { background: rgba(0, 229, 255, .18); border-color: var(--accent-cyan-glow); }
.switch input:checked + .slider::before { transform: translateX(16px); background: var(--accent-cyan-glow); }
.switch input:focus-visible + .slider { outline: 2px solid var(--accent-cyan-glow); outline-offset: 2px; }
.switch input:disabled + .slider { cursor: default; }
.kv-toolbar { display: flex; gap: .5rem; align-items: center; margin-bottom: .6rem; flex-wrap: wrap; }
.kv-toolbar .kv-search { flex: 1 1 18rem; }
.kv-empty { color: var(--text-dim); margin: .5rem 0; }
.kv-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.kv-table th { text-align: left; color: var(--text-dim); font-weight: 600; padding: .35rem .5rem; border-bottom: 1px solid var(--border-strong); }
.kv-table td { padding: .25rem .5rem; border-bottom: 1px solid var(--border-subtle); }
.kv-table td input { width: 100%; box-sizing: border-box; }
.kv-table td.dim { color: var(--text-dim); white-space: nowrap; font-size: .82rem; }
.kv-table tr.dirty td:first-child { box-shadow: inset 3px 0 0 var(--guest-amber); }
.settings-command-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    height: 3.5rem; padding: 0 1.5rem; background: var(--bg-dark-armor-raised);
    border-top: 1px solid var(--border-strong); box-shadow: 0 -6px 18px rgba(0, 0, 0, .45);
}
.settings-command-bar .status { font-size: .9rem; }
.settings-command-bar .status.ok { color: var(--text-dim); }
.settings-command-bar .status.warn { color: var(--guest-amber); font-weight: 600; }
.settings-command-bar .actions { display: inline-flex; gap: .6rem; }
.btn-primary {
    background: var(--accent-cyan-glow); color: #0d0d0d; border: 1px solid var(--accent-cyan-glow);
    font-weight: 700; border-radius: 8px; padding: .45rem 1rem; cursor: pointer;
}
.btn-primary:disabled { opacity: .4; cursor: default; }
.btn-ghost {
    background: transparent; color: var(--text-brushed-aluminum); border: 1px solid var(--border-strong);
    border-radius: 8px; padding: .45rem 1rem; cursor: pointer;
}
.btn-ghost:disabled { opacity: .4; cursor: default; }
.btn-danger {
    background: var(--danger); color: #fff; border: 1px solid var(--danger);
    font-weight: 700; border-radius: 8px; padding: .45rem 1rem; cursor: pointer;
}
.btn-danger:disabled { opacity: .4; cursor: default; }
/* Shown above the command bar before a deleted-case change that would permanently delete more. */
.settings-purge-warning {
    position: fixed; left: 0; right: 0; bottom: 3.5rem; z-index: 21;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: .6rem 1.5rem; background: rgba(239, 68, 68, .14); border-top: 2px solid var(--danger);
    color: var(--text-brushed-aluminum);
}
.settings-purge-warning .actions { display: inline-flex; gap: .6rem; }

/* /admin/priority-classes */
.pc-table { width: 100%; font-size: .9em; }
.pc-table td { vertical-align: top; }
.pc-cond { color: var(--text-dim); font-size: .9em; max-width: 34rem; overflow-wrap: anywhere; }
.pc-editing td { background: rgba(0, 229, 255, .05); }
.pc-mini { padding: .1em .45em; font-size: .85em; }

/* /intake/scans/{id} - the scan beside the setup questions, locked to the viewport. */
.rf-scan-setup { display: flex; gap: 1rem; height: calc(100vh - 7.5rem); min-height: 26rem; }
.rf-scan-pane { flex: 1 1 55%; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rf-scan-meta { display: flex; align-items: center; gap: .75rem; font-size: .85em; padding-bottom: .4rem; }
.rf-scan-object { flex: 1 1 auto; width: 100%; min-height: 0; border: 1px solid var(--border-strong); background: #fff; }
.rf-scan-form { flex: 1 1 45%; min-width: 22rem; overflow-y: auto; min-height: 0; }
.rf-scan-form .rf-mi-card { max-width: none; }

/* /review/{id} manual entry: add/remove a vehicle, occupant, non-motorist, property damage. */
.rf-shape-bar { flex-wrap: wrap; gap: .4rem; }
.rf-shape-label { font-size: .75rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }


/* Manual entry queue: "+ Add a scan" opens this drop box in a pop-up. */
.rf-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 50; }
.rf-modal { background: var(--bg-dark-armor); border: 1px solid var(--border-strong); border-radius: 8px; padding: 1rem 1.25rem 1.25rem; width: min(40rem, calc(100vw - 2rem)); }
.rf-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.rf-modal-close { background: none; border: none; color: var(--text-dim); font-size: 1.4em; line-height: 1; padding: 0 .3rem; cursor: pointer; }
.rf-dropbox { position: relative; border: 2px dashed var(--border-strong); border-radius: 8px; padding: 3rem 1rem; text-align: center;
  color: var(--text-dim); display: flex; flex-direction: column; gap: .4rem; }
.rf-dropbox:hover { border-color: var(--accent-cyan-glow); }
.rf-dropbox input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.rf-dropbox small { font-size: .8em; }

/* A one-line colour key above a table (the Location queue's Location column). */
.rf-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .8em; color: var(--text-dim); margin: .2rem 0 .4rem; }
.rf-legend span { position: relative; display: inline-flex; align-items: center; gap: .35rem; cursor: help; }
/* Hover (or keyboard focus) on a legend entry explains it - same dark bubble as the Home tiles. */
.rf-legend-tip {
  position: absolute; top: 100%; left: 0; margin-top: .35rem; width: 18rem; padding: .4rem .55rem; border-radius: 6px;
  background: var(--bg-dark-armor); border: 1px solid var(--accent-cyan-glow); color: var(--text-brushed-aluminum);
  font-style: normal; font-size: 1.05em; line-height: 1.35; z-index: 5; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .1s ease;
}
.rf-legend span:hover .rf-legend-tip, .rf-legend span:focus .rf-legend-tip { opacity: 1; visibility: visible; }
.rf-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; }

/* Form Calibration: each box's draw-order number = its display and Tab order on Validation/Location. */
.fc-order-badge {
  position: absolute; left: -1px; top: -1px; transform: translateY(-100%);
  font-size: 9px; line-height: 1; padding: 1px 3px; border-radius: 3px 3px 0 0;
  background: var(--accent-cyan-glow); color: #06262b; font-weight: 700; pointer-events: none; white-space: nowrap;
}

/* Case messages with management (CaseMessages.razor, /messages/{id}) - 2026-09-25 */
.rf-msgs { display: flex; flex-direction: column; gap: .5rem; max-width: 52rem; }
.rf-msgs.compact { gap: 0; }
.rf-msgs-empty { color: var(--text-dim, #8b93a1); margin: 0; }
.rf-msg { border: 1px solid var(--border-strong, #333); border-left-width: 3px; border-radius: 6px; padding: .45rem .6rem; background: var(--surface-2, #1a1a1a); }
.rf-msg.to-mgmt { border-left-color: #f59e0b; }
.rf-msg.to-staff { border-left-color: var(--accent-cyan-glow, #00e5ff); }
.rf-msg.mgmt { border-left-color: #8b93a1; }
.rf-msg-head { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-size: .82em; margin-bottom: .25rem; }
.rf-msg-dir { font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: .9em; }
.rf-msg-nav { margin-left: auto; display: inline-flex; gap: .35rem; align-items: center; }
.rf-msg-nav button { padding: 0 .45rem; line-height: 1.3; }
.rf-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.rf-msg-own { margin-top: .25rem; display: flex; gap: .6rem; font-size: .8em; }
.rf-msg-compose { width: 100%; }
.rf-msg-actions { display: flex; gap: .5rem; }
.rf-msg-icon { font-size: 1.05em; cursor: default; }
.rf-msg-icon.read { opacity: .45; }
.rf-msg-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 60; display: flex; align-items: center; justify-content: center; }
.rf-msg-box { background: var(--surface-1, #1a1a1a); border: 1px solid var(--border-strong, #333); border-radius: 6px; padding: 1rem; width: min(40rem, 92vw); max-height: 85vh; overflow: auto; }

/* Field Definitions - locked 100vh Data Management Studio (/admin/field-definitions, Sean,
   2026-09-25 "Enterprise UI/UX Architect" spec). Same shape and height offset as .mmucc-workspace:
   a fixed-height column (header / body), the body a 70% dictionary grid (own scroll, sticky tabs,
   toolbar and headers) beside a 30% inspector of pinned cards (own scroll). */
.fd-workspace { display: flex; flex-direction: column; height: calc(100vh - 14.1rem); min-height: 26rem; }
.fd-header { flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; flex-wrap: wrap; }
.fd-header h1 { margin: 0; }
.fd-notice { color: #22c55e; font-size: .9em; display: inline-flex; gap: .5rem; }
.fd-error { color: var(--danger); font-size: .9em; }
.fd-body { flex: 1 1 auto; min-height: 0; display: flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.fd-grid-pane { flex: 1 1 70%; min-width: 0; display: flex; flex-direction: column; }
.fd-grid-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.fd-inspector {
    flex: 0 0 30%; max-width: 30%; overflow-y: auto; padding: .75rem; display: flex; flex-direction: column; gap: .75rem;
    background: var(--bg-matte-carbon); border-left: 1px solid var(--border-strong);
}
.fd-sticky { flex: 0 0 auto; background: var(--bg-dark-armor); border-bottom: 1px solid var(--border-strong); padding: .5rem .75rem; }
.fd-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.fd-tab {
    background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim);
    border-radius: 999px; padding: .2rem .8rem; font-size: .82em; cursor: pointer;
}
.fd-tab:hover { border-color: var(--accent-cyan-glow); color: var(--text-brushed-aluminum); }
.fd-tab.active { background: rgba(0, 229, 255, .1); border-color: var(--accent-cyan-glow); color: var(--accent-cyan-glow); font-weight: 600; }
.fd-tab-count { opacity: .7; font-weight: 400; margin-left: .15rem; }
.fd-toolbar { display: flex; align-items: center; gap: .9rem; }
.fd-search { flex: 1 1 auto; min-width: 12rem; }
.fd-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .85em; color: var(--text-dim); white-space: nowrap; cursor: pointer; }
.fd-count { font-size: .8em; color: var(--text-dim); white-space: nowrap; }
.fd-grid { width: 100%; border-collapse: collapse; font-size: .85em; }
.fd-grid thead th {
    position: sticky; top: 0; z-index: 2; background: var(--bg-dark-armor-raised);
    text-align: left; font-weight: 600; color: var(--text-dim); padding: .35rem .5rem; border-bottom: 1px solid var(--border-strong);
}
.fd-grid td { padding: .2rem .4rem; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.fd-grid tr:hover td { background: rgba(255, 255, 255, .025); }
.fd-row-disabled td { opacity: .55; }
.fd-label { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-kind {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9em; white-space: nowrap;
    border: 1px solid var(--border-strong); border-radius: 4px; padding: .05rem .4rem; color: var(--text-brushed-aluminum);
}
.fd-select { font-size: .95em; padding: .1rem .3rem; }
.fd-dim { color: var(--text-dim); font-size: .9em; white-space: nowrap; }
.fd-pill { display: inline-block; font-size: .78em; border-radius: 999px; padding: .08rem .55rem; white-space: nowrap; border: 1px solid var(--border-strong); }
.fd-pill.ok { color: #22c55e; border-color: rgba(34, 197, 94, .45); }
.fd-pill.link { color: var(--accent-cyan-glow); border-color: var(--accent-cyan-glow); text-decoration: none; }
.fd-pill.added { color: var(--guest-amber); border-color: rgba(217, 119, 6, .5); }
.fd-actions { white-space: nowrap; }
.fd-mini { font-size: .8em; padding: .1rem .5rem; margin-left: .3rem; }
.fd-card { background: var(--bg-dark-armor); border: 1px solid var(--border-strong); border-radius: 6px; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; }
.fd-card h2 { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: .4rem; }
.fd-card summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.fd-field { display: flex; flex-direction: column; gap: .2rem; font-size: .8em; color: var(--text-dim); }
.fd-field input, .fd-field select { font-size: 1.1em; width: 100%; box-sizing: border-box; }
.fd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.fd-add { align-self: stretch; font-weight: 700; margin-top: .25rem; }
.fd-dropzone {
    position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 5.5rem; border: 2px dashed var(--border-strong); border-radius: 6px; color: var(--text-dim);
    font-size: .85em; padding: .75rem; cursor: pointer;
}
.fd-dropzone:hover { border-color: var(--accent-cyan-glow); color: var(--text-brushed-aluminum); }
.fd-dropzone.busy { opacity: .6; }
.fd-dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.fd-link { font-size: .85em; }
.fd-results { width: 100%; font-size: .8em; border-collapse: collapse; }
.fd-results td, .fd-results th { padding: .15rem .3rem; border-bottom: 1px solid var(--border-subtle); text-align: left; }
.fd-results .ok { color: #22c55e; }
.fd-results .bad { color: var(--danger); }
.fd-grid .src-badge { font-size: .92em; padding: .05rem .3rem; overflow-wrap: anywhere; }
.fd-grid td:first-child { max-width: 17rem; }

/* Operations studios - Learning, Doctor, XML Intake (Sean, 2026-09-25 "Enterprise UI/UX
   Architect" specs). One shared locked-viewport shape: the page never scrolls, every pane scrolls
   on its own. Same height offset as .fd-workspace / .mmucc-workspace (top nav + admin sub-nav). */
.studio { display: flex; flex-direction: column; height: calc(100vh - 14.1rem); min-height: 26rem; gap: .6rem; }
.studio-head { flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.studio-head h1 { margin: 0; }
.studio-toolbar {
    flex: 0 0 auto; display: flex; align-items: center; gap: .75rem; min-height: 40px; padding: 0 .75rem;
    background: var(--bg-dark-armor); border: 1px solid var(--border-strong); border-radius: 6px; flex-wrap: nowrap; overflow-x: auto;
}
.studio-toolbar > * { flex: 0 0 auto; }
.studio-toolbar label { display: inline-flex; align-items: center; gap: .35rem; font-size: .82em; color: var(--text-dim); white-space: nowrap; }
.studio-toolbar input[type=number] { width: 90px; box-sizing: border-box; }
.studio-toolbar .studio-spacer { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.studio-msg { font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40rem; }
.studio-msg.ok { color: #22c55e; } .studio-msg.bad { color: var(--danger); }
.studio-card {
    background: var(--bg-dark-armor); border: 1px solid var(--border-strong); border-radius: 6px; padding: .9rem 1rem;
    display: flex; flex-direction: column; min-height: 0; gap: .5rem;
}
.studio-card > h2 { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; }
.studio-card-head { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.studio-card-head h2 { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: .45rem; }
.studio-card-head .studio-spacer { margin-left: auto; }
.studio-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.studio-stack { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .6rem; }
.studio-stack > .studio-card { flex: 1 1 50%; }
.studio-split { flex: 1 1 auto; min-height: 0; display: flex; gap: .6rem; }
.studio-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .6rem; overflow-y: auto; overflow-x: hidden; }
.studio-count { font-size: .75em; font-weight: 600; border-radius: 999px; padding: .05rem .5rem; background: var(--bg-dark-armor-raised); color: var(--text-dim); border: 1px solid var(--border-strong); }
/* Business rules (/admin/business-rules, 2026-09-27): rules / history / point-in-time (60%) beside the
   rule builder (40%). */
.br-split > .br-left { flex: 1 1 60%; min-width: 0; }
.br-split > .br-right { flex: 1 1 40%; min-width: 0; }
@media (max-width: 1000px) { .br-split { flex-direction: column; overflow-y: auto; } }
.br-table { width: 100%; font-size: .88em; }
.br-table td { vertical-align: top; }
.br-table .src-badge { white-space: nowrap; }
.br-msg { font-size: .9em; margin-top: .15rem; }
.br-when { font-size: .82em; white-space: nowrap; }
.br-off td { opacity: .75; }
.br-sev { font-size: .8em; font-weight: 700; border-radius: 999px; padding: .05rem .55rem; border: 1px solid var(--border-strong); }
.br-sev--error { color: #fff; background: var(--danger); border-color: var(--danger); }
.br-sev--warning { color: #0d0d0d; background: var(--guest-amber); border-color: var(--guest-amber); }
.br-asof { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.br-live { display: flex; align-items: center; gap: .45rem; font-size: .85em; color: var(--text-dim); }
.br-form { display: flex; flex-direction: column; gap: .55rem; }
.br-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .85em; color: var(--text-dim); }
.br-form input, .br-form select { width: 100%; box-sizing: border-box; }
.br-grid { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: .5rem; }
.br-block { border: 1px solid var(--border-strong); border-left: 3px solid var(--accent-cyan-glow); border-radius: 6px; padding: .5rem .6rem; }
.br-block-head { font-weight: 700; font-size: .85em; letter-spacing: .04em; margin-bottom: .35rem; }
.br-block-head .rf-dim { font-weight: 400; letter-spacing: 0; margin-left: .35rem; }
.br-test { background: var(--bg-dark-armor-raised); border: 1px solid var(--border-strong); border-radius: 6px; padding: .6rem; font-size: .82em; white-space: pre-wrap; margin: 0; }
.br-json summary { cursor: pointer; font-size: .85em; color: var(--text-dim); }
.br-json textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace; font-size: .82em; margin-top: .4rem; }
.br-json-actions { display: flex; gap: .5rem; margin-top: .4rem; flex-wrap: wrap; }
/* Lookup values (/admin/lookup-values, 2026-09-27): the code tables (65%, unchanged) beside a tabbed
   utilities pane (35%) - Add list / Bulk CSV import / Point-in-time. */
.lv-split > .lv-tables { flex: 1 1 65%; min-width: 0; }
.lv-split > .lv-tools { flex: 1 1 35%; min-width: 0; }
@media (max-width: 1000px) { .lv-split { flex-direction: column; overflow-y: auto; } }
/* AI pre-pass failures (/ai-failures, 2026-09-27): queue + triage studio. */
.af-reason { font-size: .85em; margin-left: .35rem; display: inline-block; max-width: 36rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.af-split > .af-doc { flex: 1 1 55%; min-width: 0; }
.af-split > .af-side { flex: 1 1 45%; }
@media (max-width: 1000px) { .af-split { flex-direction: column; overflow-y: auto; } .af-split > .af-doc { min-height: 60vh; } }
.af-diag { border-left: 3px solid var(--danger); }
.af-reason-full { font-family: ui-monospace, monospace; font-size: .82em; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.35); border-radius: 6px; padding: .5rem .65rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.af-action { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.af-action a.rf-btn-outline, .cg-actions a.rf-btn-outline { text-decoration: none; }
/* Management resolution studio (/management/{id}, 2026-09-27): the report's state + conversation (60%)
   beside what to do with it (40%), each column scrolling on its own. */
.mr-split > .mr-left { flex: 1 1 60%; }
.mr-split > .mr-right { flex: 1 1 40%; }
@media (max-width: 1000px) { .mr-split { flex-direction: column; overflow-y: auto; } }
.mr-split .studio-card { flex: 0 0 auto; }
.mr-split .studio-card > h2 { font-size: .9rem; }
.mr-accent { border-left: 3px solid var(--accent-cyan-glow); }
.mr-rules { border-left: 3px solid var(--danger); }
.mr-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mr-lane {
    display: flex; justify-content: space-between; align-items: center; padding: .55rem .75rem; border-radius: 6px;
    border: 1px solid var(--guest-amber); color: var(--guest-amber); text-decoration: none; font-weight: 600;
}
.mr-lane.done { border-color: #16a34a; color: #16a34a; }
.mr-lane:hover { text-decoration: none; background: var(--bg-dark-armor-raised); }
.mr-inline { display: flex; align-items: flex-start; gap: .5rem; }
.mr-inline textarea { flex: 1 1 auto; }
.mr-split textarea { width: 100%; box-sizing: border-box; }
.mr-seg { display: flex; flex-wrap: wrap; gap: .3rem; }
.mr-seg-btn { font: inherit; font-size: .85em; cursor: pointer; padding: .2rem .75rem; border-radius: 999px; background: transparent; border: 1px solid var(--border-strong); color: var(--text-brushed-aluminum); }
.mr-seg-btn.active { border-color: var(--accent-cyan-glow); color: var(--accent-cyan-glow); font-weight: 700; }
.mr-seg-btn.active.danger { border-color: var(--danger); color: var(--danger); }
.mr-confirm { color: var(--danger); font-size: .88em; display: flex; align-items: center; gap: .4rem; }
.mr-vault { background: #16a34a; border-color: #16a34a; color: #fff; }
.mr-thread .rf-msgs-timeline { display: flex; flex-direction: column; gap: .45rem; }
/* Sent to Admin worklist */
.esc-wait { font-weight: 700; }
.esc-wait.long { color: var(--guest-amber); }
.esc-note { display: inline-block; max-width: 34rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* The standard search filter bar (/search, deleted-case finder, Waived Reports) - shared here so a
   page that uses it doesn't need its own copy. */
.rf-ss-filterbar { border: 1px solid var(--border-strong); border-radius: 8px; padding: .75rem; margin: .75rem 0; }
.rf-ss-mode { display: flex; gap: .3rem; margin-bottom: .6rem; }
.rf-ss-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.rf-ss-field { display: flex; flex-direction: column; gap: .2rem; }
.rf-ss-field label { font-size: .8em; color: var(--text-dim); }
.rf-ss-actions { display: flex; gap: .5rem; margin-top: .6rem; }
.rf-ss-table-wrap { width: 100%; overflow-x: auto; }
.rf-ss-table { width: 100%; border-collapse: collapse; font-size: .9em; }
.rf-ss-table thead th { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border-strong); color: var(--text-dim); font-size: .78em; text-transform: uppercase; letter-spacing: .04em; }
.rf-ss-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--border-strong); vertical-align: top; }
.rf-ss-empty { padding: 1.5rem 1rem; text-align: center; color: var(--text-dim); }
@media (max-width: 900px) { .rf-ss-grid { grid-template-columns: repeat(2, 1fr); } }
/* Records: the found case's header with its whole-case actions. */
.rf-rl-case { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin: .8rem 0 .4rem; padding: .55rem .75rem; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg-dark-armor-raised); }
.rf-rl-case-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.admin-back { display: inline-block; margin: -.4rem 0 .6rem; font-size: .9em; }
/* Learning: a recommendation's rule inputs fill the row; the note takes what's left. */
.lr-rule { width: 100%; }
.lr-table th, .lr-table td:not(.lr-rule) { white-space: nowrap; }
.lr-table .studio-actions { flex-wrap: nowrap; }
.lr-rule-inputs { display: flex; align-items: center; gap: .4rem; }
.lr-rule-inputs .lr-note { flex: 1 1 auto; min-width: 12rem; }
.lv-search { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; }
.lv-search input { flex: 1 1 auto; }
.lv-tabs { flex: 0 0 auto; display: flex; gap: .3rem; flex-wrap: wrap; }
.lv-form h2 { margin: .2rem 0 .6rem; font-size: .95rem; display: flex; align-items: center; gap: .4rem; }
.lv-form label { display: flex; flex-direction: column; gap: .25rem; margin: 0 0 .6rem; font-size: .88em; color: var(--text-dim); }
.lv-form label:has(> input[type=checkbox]) { flex-direction: row; align-items: center; gap: .45rem; color: var(--text-brushed-aluminum); }
.lv-form input:not([type=checkbox]), .lv-form select { width: 100%; box-sizing: border-box; }
.lv-inline-link { margin: 0 0 .6rem; }
.lv-drop {
    border: 2px dashed var(--border-strong); border-radius: 8px; padding: 1.2rem 1rem; align-items: center; text-align: center;
    color: var(--text-brushed-aluminum) !important; cursor: pointer;
}
.lv-drop:hover { border-color: var(--accent-cyan-glow); }
.lv-result { margin-top: .6rem; padding: .5rem .7rem; border-left: 3px solid var(--accent-cyan-glow); background: rgba(0, 229, 255, .06); }
/* County Group & Workload studio (/admin/county-groups, 2026-09-27): groups table 60% / editor 40%. */
.cg-split > .cg-list { flex: 1 1 60%; min-width: 0; }
.cg-split > .cg-editor { flex: 1 1 40%; min-width: 0; }
@media (max-width: 1000px) { .cg-split { flex-direction: column; overflow-y: auto; } }
.cg-filter { width: 18rem; }
.cg-table { width: 100%; font-size: .88em; }
.cg-table td { vertical-align: top; }
.cg-row-active { background: rgba(0, 229, 255, .06); }
.cg-actions { white-space: nowrap; }
.cg-actions .rf-btn-outline { padding: .15rem .55rem; font-size: .85em; }
.cg-danger { border-color: var(--danger); color: var(--danger); }
.cg-tag-static {
    display: inline-block; margin: 0 .25rem .25rem 0; padding: .05rem .5rem; border-radius: 999px; font-size: .85em;
    background: var(--bg-dark-armor-raised); border: 1px solid var(--border-strong);
}
.cg-editor-body { display: flex; flex-direction: column; gap: .8rem; }
.cg-field { display: flex; flex-direction: column; gap: .3rem; font-size: .88em; color: var(--text-dim); }
.cg-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .9em; }
.cg-days input { width: 4.5rem; }
.cg-picker { display: flex; flex-direction: column; gap: .4rem; border-top: 1px solid var(--border-subtle); padding-top: .6rem; }
.cg-picker-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.cg-picker-head input { flex: 1 1 10rem; min-width: 8rem; }
.cg-picker-head .rf-btn-outline { padding: .15rem .55rem; font-size: .85em; }
.cg-chosen { display: flex; flex-wrap: wrap; gap: .3rem; }
.cg-tag {
    font: inherit; font-size: .82em; cursor: pointer; border-radius: 999px; padding: .1rem .55rem;
    background: rgba(0, 229, 255, .1); border: 1px solid var(--accent-cyan-glow); color: var(--accent-cyan-glow);
}
.cg-pill-grid { display: flex; flex-wrap: wrap; gap: .3rem; max-height: 14rem; overflow-y: auto; padding: .2rem 0; }
.cg-pill {
    font: inherit; font-size: .82em; cursor: pointer; border-radius: 999px; padding: .15rem .6rem;
    background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim);
}
.cg-pill.on { border-color: var(--accent-cyan-glow); color: var(--accent-cyan-glow); font-weight: 600; }
.cg-user-list { display: flex; flex-direction: column; max-height: 14rem; overflow-y: auto; }
.cg-user { display: flex; align-items: center; gap: .45rem; padding: .25rem .3rem; font-size: .88em; cursor: pointer; border-bottom: 1px solid var(--border-subtle); }
.cg-user.on span { color: var(--text-brushed-aluminum); font-weight: 600; }
.cg-user .src-badge { font-size: .8em; }
.cg-editor-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: .5rem; border-top: 1px solid var(--border-strong); padding-top: .6rem; }
/* Work Zone & Export studio (/admin/workzone-settings, 2026-09-27): three category columns, each
   scrolling on its own inside the locked .studio. */
.wz-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.wz-grid.wz-off { opacity: .55; }
@media (max-width: 1000px) { .wz-grid { grid-template-columns: 1fr; overflow-y: auto; } }
.wz-toggle .switch { display: inline-flex; }
.wz-endpoint { display: inline-flex; align-items: center; gap: .4rem; }
.wz-endpoint a.rf-btn-outline { text-decoration: none; }
.wz-search { width: 16rem; }
.wz-field {
    display: flex; align-items: flex-start; gap: .55rem; padding: .35rem .4rem; border-radius: 4px; cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
}
.wz-field:hover { background: var(--bg-dark-armor-raised); }
.wz-field.on .wz-field-label { color: var(--text-brushed-aluminum); font-weight: 600; }
.wz-field input { margin-top: .2rem; }
.wz-field-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.wz-field-label { font-size: .88em; color: var(--text-dim); }
.wz-field .src-badge { font-size: .75em; align-self: flex-start; overflow-wrap: anywhere; }
.studio-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .78em; font-weight: 600; border-radius: 999px; padding: .12rem .6rem; border: 1px solid var(--border-strong); color: var(--text-dim); white-space: nowrap; }
.studio-pill.ok { color: #22c55e; border-color: rgba(34, 197, 94, .45); }
.studio-pill.warn { color: var(--guest-amber); border-color: rgba(217, 119, 6, .55); }
.studio-pill.bad { color: var(--danger); border-color: rgba(239, 68, 68, .55); }
.studio-pill.info { color: var(--accent-cyan-glow); border-color: rgba(0, 229, 255, .45); }
.studio-table { width: 100%; border-collapse: collapse; font-size: .84em; }
.studio-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-dark-armor-raised); text-align: left; color: var(--text-dim); font-weight: 600; padding: .3rem .5rem; border-bottom: 1px solid var(--border-strong); }
.studio-table td { padding: .3rem .5rem; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.studio-table .mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .92em; }
.studio-table input { font-size: .95em; }
.studio-actions { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.studio-actions button { font-size: .8em; padding: .15rem .55rem; }
.studio-empty {
    flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    border: 1px dashed var(--border-strong); border-radius: 6px; color: var(--text-dim); text-align: center; padding: 1.5rem; font-size: .9em;
}
.studio-empty .studio-empty-icon { font-size: 1.8rem; opacity: .55; }
.studio-kv { width: 100%; border-collapse: collapse; font-size: .85em; }
.studio-kv td { padding: .45rem .4rem; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.studio-kv td:first-child { width: 11rem; color: var(--text-dim); white-space: nowrap; }
.studio-kv code { overflow-wrap: anywhere; }
.studio-search { width: 16rem; }
.studio-detail { font-size: .92em; color: #c9c9c9; }
.studio-sub { font-size: .8em; color: var(--text-dim); }
/* Doctor: the vitals strip + autopsy steps */
.vitals-bar { flex: 0 0 auto; display: flex; gap: .45rem; flex-wrap: wrap; }
.vital-card { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border-radius: 6px; font-size: .8em;
    background: var(--bg-dark-armor); border: 1px solid var(--border-strong); }
.vital-card .vital-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--text-dim); }
.vital-card.ok .vital-dot { background: #22c55e; } .vital-card.warn .vital-dot { background: var(--guest-amber); }
.vital-card.bad .vital-dot { background: var(--danger); } .vital-card.info .vital-dot { background: var(--accent-cyan-glow); }
.vital-card .vital-name { color: var(--text-dim); } .vital-card .vital-value { color: var(--text-brushed-aluminum); font-weight: 600; }
.autopsy-step { border-left: 3px solid var(--border-strong); padding: .2rem .6rem; }
.autopsy-step.ok { border-color: #22c55e; } .autopsy-step.warn { border-color: var(--guest-amber); }
.autopsy-step.bad { border-color: var(--danger); } .autopsy-step.info { border-color: var(--accent-cyan-glow); }
.autopsy-input { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; flex: 1 1 auto; min-width: 0; }
/* Intake: drop zone + code box */
.dropzone {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .3rem;
    min-height: 7rem; border: 2px dashed var(--border-strong); border-radius: 6px; color: var(--text-dim); font-size: .88em; padding: 1rem; cursor: pointer;
}
.dropzone:hover { border-color: var(--accent-cyan-glow); color: var(--text-brushed-aluminum); }
.dropzone.busy { opacity: .6; }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.code-editor {
    flex: 1 1 auto; min-height: 8rem; width: 100%; box-sizing: border-box; resize: none;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .78rem;
    background: #121212; color: var(--text-brushed-aluminum); border: 1px solid var(--border-strong); border-radius: 4px; padding: .5rem;
}

/* Schema Ingestion & Imaging studio (/admin/schema-mapping, 2026-09-27): 60/40, each column scrolls. */
.sm-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: .6rem; }
.sm-picker { min-width: 22rem; }
.sm-row { display: flex; gap: .5rem; align-items: center; }
.sm-id { width: 16rem; }
.sm-code {
    width: 100%; box-sizing: border-box; resize: vertical; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .8em; background: var(--bg-dark-armor-raised); color: var(--text); border: 1px solid var(--border-strong); border-radius: 4px; padding: .5rem;
}
.sm-fields { flex: 1 1 auto; min-height: 16rem; }
.sm-sample, .sm-json { flex: 0 0 auto; }
.sm-json summary { cursor: pointer; font-weight: 600; font-size: .92rem; display: flex; align-items: center; gap: .5rem; }
.sm-json[open] summary { margin-bottom: .5rem; }
.sm-target { width: 100%; min-width: 12rem; box-sizing: border-box; }
.sm-map { width: 11rem; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .85em; }
.sm-default { width: 3.5rem; }
.sm-group td { background: var(--bg-dark-armor-raised); }
.sm-child { padding-left: 1.4rem !important; }
.sm-sample-cell { display: inline-flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.sm-versions { flex: 0 0 auto; max-height: 11rem; overflow: auto; border-top: 1px solid var(--border-subtle); }
.sm-life { flex: 0 0 auto; }
.sm-imaging { flex: 1 1 auto; min-height: 18rem; }
.sm-note { max-width: 18rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9em; }
.sm-kv-title { font-size: .75em; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: .5rem 0 .1rem; }
.sm-kv-title:first-child { margin-top: 0; }
.studio-kv input { width: 100%; box-sizing: border-box; }
@media (max-width: 900px) { .sm-grid { grid-template-columns: 1fr; } }
.sm-examples { display: flex; gap: .4rem; }
.sm-examples a { text-decoration: none; color: var(--text-brushed-aluminum); border: 1px solid var(--border-strong); border-radius: 8px; padding: .3em .7em; font-size: .85em; white-space: nowrap; }
.sm-examples a:hover { border-color: var(--accent-cyan-glow); }

/* NHTSA export studio (/admin/nhtsa-fields, 2026-09-27): section tabs over one scrolling table. */
.nh-tabs { flex: 0 0 auto; display: flex; gap: .35rem; flex-wrap: wrap; }
.nh-tab { font-size: .82em; padding: .25rem .7rem; border-radius: 999px; background: transparent; color: var(--text-dim); }
.nh-tab.on { color: var(--accent-cyan-glow); border-color: var(--accent-cyan-glow); background: rgba(0, 229, 255, .08); }
.nh-grid { flex: 1 1 auto; }
.nh-target { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9em; color: var(--text-dim); }
.nh-tab-su { border-style: dashed; }
.nh-search { width: 14rem; }

/* State-unique values (/admin/state-unique-values, 2026-09-27): fields left, the picked field's codes right. */
.su-fields { flex: 3 1 0; }
.su-codes { flex: 2 1 0; }
.su-row { cursor: pointer; }
.su-row:hover td { background: rgba(255, 255, 255, .03); }
.su-row.on td { background: rgba(0, 229, 255, .07); }
.su-meta { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-size: .85em; flex: 0 0 auto; }
.su-bar { display: inline-block; height: .55rem; border-radius: 3px; background: var(--accent-cyan-glow); opacity: .6; }
a.su-link { text-decoration: none; color: var(--text-brushed-aluminum); border: 1px solid var(--border-strong); border-radius: 8px; padding: .3em .7em; font-size: .85em; white-space: nowrap; }
a.su-link:hover { border-color: var(--accent-cyan-glow); }
.nh-endpoint { display: inline-flex; align-items: center; gap: .4rem; margin-left: 1rem; }
.nh-endpoint .rf-btn-outline { font-size: .85em; padding: .25em .6em; }
.nh-preview-key { width: 8rem; }
.pf-out { margin-left: .35rem; font-size: .85em; color: var(--guest-amber); }

/* Legacy output studio (/admin/legacy-output, 2026-09-27). */
.lo-side { flex: 0 0 20rem; }
.lo-side .studio-card { flex: 0 0 auto; }
.lo-main { flex: 1 1 auto; min-width: 0; }
.lo-tablebar { flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .9em; }
.lo-tablebar label { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-dim); }
.lo-tablebar .studio-spacer { margin-left: auto; display: flex; gap: .4rem; }
.lo-colsearch { width: 12rem; }
.lo-statuses { position: relative; font-size: .85em; }
.lo-statuses summary { cursor: pointer; color: var(--text-dim); white-space: nowrap; }
.lo-statuses-pop {
    position: absolute; top: 1.8rem; left: 0; z-index: 20; max-height: 60vh; overflow: auto; min-width: 20rem;
    background: var(--bg-dark-armor-raised); border: 1px solid var(--border-strong); border-radius: 8px; padding: .5rem .7rem;
}
.lo-repush { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .85em; }
.lo-repush label { display: inline-flex; gap: .3rem; align-items: center; color: var(--text-dim); }
.lo-repush input[type=date] { width: 8.5rem; }
.lo-samples { max-width: 12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio > .lo-errors { flex: 0 0 auto; max-height: 6rem; overflow: auto; font-size: .85em; }
.lo-import { display: inline-flex; align-items: center; gap: .35rem; }
.lo-side .lo-table-btn { width: 100%; }
.lo-toolbar { overflow: visible; }
.lo-side .studio-kv td:first-child { width: auto; }
.lo-side .studio-kv td { white-space: nowrap; }

/* System Admin dashboard (/dashboard/system-admin, 2026-09-27): tiles, pipeline, activity. */
.sa-tiles { flex: 0 0 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.sa-tile {
    display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem; border-radius: 6px; text-decoration: none;
    background: var(--bg-dark-armor); border: 1px solid var(--border-strong); color: var(--text-brushed-aluminum);
}
.sa-tile:hover { border-color: var(--accent-cyan-glow); }
.sa-tile-label { font-size: .75em; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.sa-tile-value { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.sa-tile-word { font-size: 1.25rem; padding: .25rem 0; }
.sa-tile-sub { font-size: .78em; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-tile.warn { border-color: rgba(217, 119, 6, .6); } .sa-tile.warn .sa-tile-value { color: var(--guest-amber); }
.sa-tile.bad { border-color: rgba(239, 68, 68, .6); } .sa-tile.bad .sa-tile-value { color: var(--danger); }
.sa-tile.ok .sa-tile-value { color: #22c55e; }
.sa-pipeline { flex: 1 1 0; min-width: 0; }
.sa-right { flex: 1.3 1 0; }
.sa-right .studio-card { flex: 0 0 auto; }
.sa-zero td { color: var(--text-dim); }
@media (max-width: 1100px) { .sa-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }