/* app.css — RAB global shell CSS.
   UX B14 (2026-07-14): extracted VERBATIM from base.html's first inline <style>
   block so it serves immutable-cached (1y, keyed by ?v) instead of re-downloading
   with every no-store HTML page view (~49KB/pageview). Linked in base.html at the
   block's exact former slot: AFTER fonts.css, BEFORE ui_states.css — cascade order
   is byte-for-byte preserved. The only global CSS still inline in base.html is the
   small B13 notification-center block (it sits AFTER ui_states.css; moving it here
   would reorder it across that link). Rules move here consciously — the effective-CSS
   equivalence + drift pin lives in tests/test_css_extraction_equivalence.py.
   To change shell CSS, edit THIS file (bump the ?v in base.html) — not a new inline block. */
        /* ═══ Design tokens (2026 overhaul foundation) ═══
           Reference with var(--token) in new components. Existing hex codes
           are untouched — migrate gradually to avoid visual regressions. */
        :root{
            --color-ink:#0f172a;        --color-ink-2:#1e293b;
            --color-mute:#64748b;       --color-mute-2:#94a3b8;
            --color-border:#e5e7eb;     --color-border-2:#e2e8f0;
            --color-bg:#f2f4f7;         --color-bg-soft:#f8fafc;
            --color-card:#fff;
            --color-primary:#1d4ed8;    --color-primary-lt:#eff6ff;   --color-primary-bd:#bfdbfe;
            --color-primary-hover:#2563eb; --color-primary-fade:#3b82f6;
            --color-success:#16a34a;    --color-success-lt:#dcfce7;   --color-success-ink:#166534;
            --color-warn:#d97706;       --color-warn-lt:#fef3c7;      --color-warn-ink:#92400e;
            --color-danger:#dc2626;     --color-danger-lt:#fee2e2;    --color-danger-ink:#991b1b;
            --color-info:#1e40af;       --color-info-lt:#dbeafe;      --color-info-ink:#1e3a8a;
            --color-accent:#7c3aed;     --color-accent-lt:#f3e8ff;    --color-accent-ink:#6b21a8;
            --space-1:4px;  --space-2:8px;  --space-3:12px;  --space-4:16px;  --space-5:20px;  --space-6:24px;  --space-8:32px;
            --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px;
            --shadow-sm:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
            --shadow-md:0 4px 8px -2px rgba(16,24,40,.08),0 2px 4px -1px rgba(16,24,40,.04);
            --shadow-lg:0 12px 24px -6px rgba(16,24,40,.14),0 4px 8px -3px rgba(16,24,40,.06);
            --font-ui:'DM Sans',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
            --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
            --t-fast:.12s ease;  --t-med:.2s ease;  --t-slow:.3s ease;  --spring:cubic-bezier(.2,.9,.25,1);
        }
/* ─── Utility classes (v98 — replace common inline styles) ─── */
.ta-l{text-align:left !important;} .ta-r{text-align:right !important;} .ta-c{text-align:center !important;}
.fw-500{font-weight:500;} .fw-600{font-weight:600;} .fw-700{font-weight:700;} .fw-800{font-weight:800;}
.fs-10{font-size:10px;} .fs-11{font-size:11px;} .fs-12{font-size:12px;} .fs-13{font-size:13px;} .fs-14{font-size:14px;} .fs-16{font-size:16px;} .fs-18{font-size:18px;} .fs-22{font-size:22px;} .fs-24{font-size:24px;}
.mb-0{margin-bottom:0 !important;} .mb-4{margin-bottom:4px;} .mb-8{margin-bottom:8px;} .mb-12{margin-bottom:12px;}
.mt-0{margin-top:0 !important;} .mt-4{margin-top:4px;} .mt-8{margin-top:8px;} .mt-12{margin-top:12px;}
.p-0{padding:0 !important;} .p-xs{padding:2px 4px;} .p-sm{padding:4px 8px;} .p-md{padding:6px 10px;} .p-lg{padding:8px 14px;}
.d-none{display:none !important;} .d-inline{display:inline;} .d-block{display:block;} .d-flex{display:flex;} .d-grid{display:grid;}
.g-4{gap:4px;} .g-6{gap:6px;} .g-8{gap:8px;} .g-12{gap:12px;}
.w-100{width:100%;} .w-50{width:50%;} .w-auto{width:auto;}
.c-mute{color:var(--color-mute);} .c-mute-2{color:var(--color-mute-2);} .c-ink{color:var(--color-ink);} .c-primary{color:var(--color-primary);} .c-success-ink{color:var(--color-success-ink);} .c-danger{color:var(--color-danger);} .c-warn-ink{color:var(--color-warn-ink);}
/* Responsive mobile helpers (≤ 760px): hide-on-mobile, stack columns */
@media (max-width:760px){
    .hide-mobile{display:none !important;}
    .stack-mobile{display:flex;flex-direction:column;gap:8px;}
    .p-sm{padding:8px 10px;} /* bump tap targets on mobile */
    .p-md{padding:10px 14px;}
}

        /* ═══ Toast system — window.toast(msg, type) where type is success|error|warn|info ═══ */
        #toastHost{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:360px;pointer-events:none;}
        .toast{background:#fff;border:1px solid var(--color-border);border-left:4px solid var(--color-primary);border-radius:var(--radius-md);padding:10px 14px 10px 12px;box-shadow:var(--shadow-md);font-size:13px;color:var(--color-ink);display:flex;align-items:flex-start;gap:10px;pointer-events:auto;animation:toastIn .2s var(--spring);min-width:220px;}
        .toast.success{border-left-color:var(--color-success);}
        .toast.error{border-left-color:var(--color-danger);}
        .toast.warn{border-left-color:var(--color-warn);}
        .toast.info{border-left-color:var(--color-info);}
        .toast .ico{font-size:16px;line-height:1;flex-shrink:0;margin-top:1px;}
        .toast .msg{flex:1;line-height:1.4;word-wrap:break-word;}
        .toast .msg b{font-weight:700;}
        .toast .x{background:none;border:none;color:var(--color-mute-2);cursor:pointer;font-size:16px;padding:0;line-height:1;flex-shrink:0;}
        .toast .x:hover{color:var(--color-ink);}
        .toast.out{animation:toastOut .2s var(--spring) forwards;}
        @keyframes toastIn{0%{opacity:0;transform:translateX(24px);}60%{opacity:1;transform:translateX(-3px);}100%{opacity:1;transform:translateX(0);}}
        @keyframes toastOut{from{opacity:1;transform:translateX(0);max-height:200px;}to{opacity:0;transform:translateX(20px);max-height:0;margin:0;padding:0;border:0;}}
        @media(max-width:768px){ #toastHost{top:8px;right:8px;left:8px;max-width:none;} }
        /* UX B12 (2026-07-14): Undo button inside act+Undo toasts (window.toastUndo). */
        .toast.has-undo .msg{margin-right:2px;}
        .toast .undo{background:none;border:1px solid var(--color-primary);color:var(--color-primary);font:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:2px 10px;border-radius:var(--radius-sm,6px);flex-shrink:0;line-height:1.3;transition:background .15s,color .15s;}
        .toast .undo:hover{background:var(--color-primary);color:#fff;}
        .toast .undo:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}
        .toast .undo:disabled{opacity:.6;cursor:default;}
        /* UX B12: quiet inline save acknowledgment (window.saveState) -- 'Saving...' -> 'Saved'. */
        .save-state{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:11px;font-weight:600;vertical-align:middle;white-space:nowrap;transition:opacity .3s ease;}
        .save-state.ss-fade{opacity:0;}
        .save-state .ss-txt{line-height:1;}
        .save-state.is-saving{color:var(--color-mute-2,#94a3b8);}
        .save-state.is-saved{color:var(--color-success,#16a34a);}
        .save-state.is-error{color:var(--color-danger,#dc2626);}
        .save-state .ss-dot{width:9px;height:9px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;display:inline-block;animation:ssSpin .6s linear infinite;}
        .save-state .ss-ico{font-size:12px;line-height:1;}
        @keyframes ssSpin{to{transform:rotate(360deg);}}
        @media(prefers-reduced-motion:reduce){
          .save-state .ss-dot{animation:none;}
          .save-state.ss-fade{transition:none;}
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif; -webkit-font-smoothing:antialiased; background:#f2f4f7; color:#333; }
        .sidebar { position:fixed; top:0; left:0; width:236px; height:100vh; height:100dvh; background:#fff; border-right:1px solid #eaedf2; display:flex; flex-direction:column; z-index:100; overflow-y:auto; overflow-x:hidden; transition:transform .2s ease; }
        .sb-brand { padding:14px 18px 12px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #f0f0f0; text-decoration:none; }
        .sb-brand-icon { width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
        .sb-brand-icon img { width:44px; height:44px; object-fit:contain; }
        .sb-brand-text { font-size:14px; font-weight:700; color:#1a365d; line-height:1.2; }
        .sb-brand-sub { font-size:10px; color:#64748b; font-weight:400; }
        /* PR #810 (2026-07-27): .sb-nav / .sb-section(-label) / .sb-arrow / .sb-group
           styled ONLY the retired classic collapsing nav (its emoji rows and the
           accordion groups base_sidebar_nav.js opened). No template emits them now. */
        .sb-link { display:flex; align-items:center; gap:10px; padding:8px 18px; margin:1px 10px; border-radius:10px; font-size:13px; font-weight:500; color:#4b5563; text-decoration:none; transition:all .15s; cursor:default; }
        .sb-link:hover { background:#f0f2f5; color:#0f172a; }
        .sb-link.active { background:#eff6ff; color:#1d4ed8; font-weight:600; }
        .sb-link .sb-badge { margin-left:auto; background:#ef4444; color:#fff; font-size:9px; font-weight:800; padding:1px 5px; border-radius:8px; line-height:14px; }
        .sb-footer { padding:12px 16px; border-top:1px solid #f0f0f0; }
        .sb-user { font-size:12px; font-weight:600; color:#374151; }
        .sb-role { font-size:10px; color:#64748b; text-transform:capitalize; }
        .sb-footer-links { display:flex; gap:10px; margin-top:6px; }
        .sb-footer-links a { font-size:11px; color:#6b7280; text-decoration:none; }
        .sb-footer-links a:hover { color:#1d4ed8; }
        /* ═══ Sidebar v2 (Option E — pinned + flat) ═══ */
        /* PR #810 (2026-07-27): was a two-nav fork gated on html.sb-v2 (classic shown by
           default, flat nav display:none until the class landed pre-paint). Classic is
           retired, so the flat nav is simply the nav -- no class, no gate, no flicker. */
        .sb-modern-nav { display:flex; flex-direction:column; flex:1; padding:6px 0 8px; }
        .sb-pin-wrap { padding:4px 10px 6px; border-bottom:1px solid #eef0f3; margin-bottom:4px; background:linear-gradient(180deg,#fbfcfd 0%, #fff 100%); }
        .sb-pin-wrap .sb-link { margin:1px 0; padding:8px 14px; font-weight:600; }
        .sb-pin-wrap .sb-link:not(.active) { background:transparent; }
        .sb-pin-wrap .sb-link:not(.active):hover { background:#eef2f7; }
        .sb-pin-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1.1px; color:#64748b; padding:6px 14px 3px; -webkit-user-select:none;user-select:none; }
        /* a11y contrast (2026-07-27): #94a3b8 -> #64748b. #94a3b8 was 2.56:1 on the #fff
           sidebar, under the 4.5:1 AA floor every other sidebar gray already meets — it had
           escaped test_base_a11y_polish::test_sidebar_text_grays_meet_contrast_floor by
           omission, not exemption, and that test now pins it. Sibling .sb-pin-label is the
           same 9px/700 uppercase spec at #64748b, so the flat nav rendered two identical
           section labels at two grays. Links stay #4b5563 (7.56:1), darker than the labels,
           so labels still recede. Keep the literal — the pin matches on `color:#64748b`. */
        .sb-flat-label { padding:12px 16px 4px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#64748b; -webkit-user-select:none;user-select:none; border-top:1px dashed transparent; }
        .sb-flat-label:first-of-type { padding-top:8px; }
        .sb-modern-nav .sb-link { margin:1px 10px; }
        /* ═══ Sidebar v2 customization — pin + drag ═══ */
        .sb-modern-nav .sb-link { position:relative; padding-right:30px; }
        .sb-pin-tgl { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:20px; height:20px; border:0; background:transparent; padding:0; font-size:11px; line-height:1; border-radius:4px; cursor:pointer; opacity:0; color:#94a3b8; transition:opacity .15s, color .15s, background .15s, transform .15s; display:flex; align-items:center; justify-content:center; }
        .sb-modern-nav .sb-link:hover .sb-pin-tgl { opacity:.55; }
        .sb-pin-tgl:hover { opacity:1 !important; color:#1d4ed8; background:#eff6ff; }
        /* UX B11 (2026-07-13): pin toggles are hover-only on desktop — a resting sidebar
           stays quiet. .pinned no longer force-shows (dropped the !important) so it rides the
           same 0 -> .55 (row hover) -> 1 (button hover) opacity cascade, only recoloring and
           rotating to signal the pinned state. Touch devices (no hover) always show them. */
        .sb-pin-tgl.pinned { color:#1d4ed8; transform:translateY(-50%) rotate(-45deg); }
        .sb-pin-tgl.pinned:hover { color:#dc2626; transform:translateY(-50%) rotate(0deg); }
        @media (hover: none) {
          .sb-pin-tgl { opacity:.5; }
          .sb-pin-tgl.pinned { opacity:.9; }
        }
        .sb-pin-wrap .sb-link { cursor:default; }
        .sb-section-group { display:flex; flex-direction:column; }
        .sb-modern-nav .sb-link[draggable="true"] { cursor:default; }  /* 2026-07-14: arrow, not grab hand — reorder still works via drag */
        .sb-modern-nav .sb-link.dragging { opacity:.35; cursor:grabbing; }
        .sb-modern-nav .sb-link.drop-above { box-shadow:inset 0 2px 0 0 #1d4ed8; }
        /* UX Wave 1 C6: vendored Lucide SVG icons in the flat sidebar. */
        .sb-modern-nav .ico { display:block; }
        /* UX B7 (2026-07-13): Apple system-settings tiles - white glyph on a domain-
           colored rounded square (22px, ~6.5px radius). Tiles stay colored even on the
           active row (Apple behavior). Domain class comes from rab/nav.py per row. */
        .sb-modern-nav .sb-tile { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--tile-c,#64748b); background:transparent; }  /* 2026-07-14: no filled box — glyph IS the icon, drawn in the domain color at full size */
        .sb-modern-nav .sb-tile .ico { display:block; }
                                                                /* UX B8 (2026-07-13): Apple "Liquid Glass" selection highlight on the flat
           sidebar. CSS-only, scoped to .sb-modern-nav. Base rules give engines without
           backdrop-filter / color-mix a clean solid frosted pill + a plain rgba tile
           ring; the @supports blocks layer on blur/saturate glass and a domain-colored
           glow. Media guards drop the motion (prefers-reduced-motion) and the
           translucency (prefers-reduced-transparency). Pinned rows share the .sb-link /
           .sb-tile classes (.sb-pin-wrap lives inside .sb-modern-nav) so they inherit the
           identical treatment; the only extra rule is a padding nudge because pinned rows
           start at a different left padding (14px vs 18px). The active pill's 1px border is
           compensated by -1px padding (box-sizing:border-box) so a row never jumps when it
           activates. */
        .sb-modern-nav .sb-tile--ops { --tile-c:#1d4ed8; }
        .sb-modern-nav .sb-tile--records { --tile-c:#b45309; }
        .sb-modern-nav .sb-tile--money { --tile-c:#15803d; }
        .sb-modern-nav .sb-tile--system { --tile-c:#64748b; }
        .sb-modern-nav .sb-tile--plant { --tile-c:#7c3aed; }
        .sb-modern-nav .sb-tile--documents { --tile-c:#0891b2; }
        .sb-modern-nav .sb-tile--service { --tile-c:#be185d; }
        .sb-modern-nav .sb-link { transition:background .15s ease, box-shadow .18s ease, transform .18s cubic-bezier(.2,.9,.25,1); }
        .sb-modern-nav .sb-tile { transition:box-shadow .18s ease, transform .18s cubic-bezier(.2,.9,.25,1); }
        /* Active pill - solid frosted fallback (base .sb-modern-nav .sb-link is 8px 30px 8px
           18px; -1px padding on each edge offsets the new 1px border, no layout jump). */
        .sb-modern-nav .sb-link.active { background:rgba(239,244,255,.9); border:1px solid rgba(29,78,216,.18); padding:7px 29px 7px 17px; box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 4px rgba(16,24,40,.08), 0 4px 14px rgba(29,78,216,.10); }
        /* Pinned rows start at 14px left padding - keep their active indent flush with
           their neighbors (13px + 1px border = 14px content edge). */
        .sb-pin-wrap .sb-link.active { padding:7px 29px 7px 13px; }
        /* Active tile glow - plain rgba ring fallback; color-mix domain glow layered below. */
        .sb-modern-nav .sb-link.active .sb-tile { transform:scale(1.08); }  /* no ring on a boxless glyph — the active row pill + color carry the state */
        .sb-modern-nav .sb-link:not(.active):hover .sb-tile { transform:scale(1.03); }
        @supports (backdrop-filter: blur(1px)) {
          .sb-modern-nav .sb-link.active { background:linear-gradient(135deg, rgba(255,255,255,.55), rgba(239,244,255,.35)), rgba(29,78,216,.08); backdrop-filter:blur(10px) saturate(1.5); -webkit-backdrop-filter:blur(10px) saturate(1.5); }
          .sb-modern-nav .sb-link:not(.active):hover { background:rgba(148,163,184,.10); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
        }
        @supports (color: color-mix(in srgb, red 50%, blue)) {
          .sb-modern-nav .sb-link.active .sb-tile { transform:scale(1.08); }  /* boxless: no glow ring */
        }
        @media (prefers-reduced-motion: reduce) {
          .sb-modern-nav .sb-link, .sb-modern-nav .sb-tile { transition:none; }
          .sb-modern-nav .sb-link.active .sb-tile, .sb-modern-nav .sb-link:not(.active):hover .sb-tile { transform:none; }
        }
        @media (prefers-reduced-transparency: reduce) {
          .sb-modern-nav .sb-link.active { background:rgba(239,244,255,.9); backdrop-filter:none; -webkit-backdrop-filter:none; }
          .sb-modern-nav .sb-link:not(.active):hover { backdrop-filter:none; -webkit-backdrop-filter:none; }
        }
        /* UX B7: pinned rows MOVE (not duplicate) - base_sidebar_v2.js hides the home-
           section original while its pinned copy is at the top. */
        .sb-modern-nav .sb-link.sb-pinned-away { display:none; }
        .sb-modern-nav .sb-link.drop-below { box-shadow:inset 0 -2px 0 0 #1d4ed8; }
        .sb-pin-wrap.drop-zone-empty { min-height:28px; border:1px dashed #bfdbfe; border-radius:8px; margin:2px 10px; }
        /* UX B11 (2026-07-13): the drag/click mechanics hint was deleted; when the Pinned
           block is empty base_sidebar_v2.js shows ONE faint invitation line
           (.sb-pin-empty-msg) that vanishes the moment any pin exists. No how-to prose. */
        .sb-pin-empty-msg { padding:8px 14px; font-size:11px; color:#64748b; font-style:italic; text-align:center; -webkit-user-select:none;user-select:none; }
        .topbar { display:none; position:fixed; top:0; left:0; right:0; height:52px; background:rgba(255,255,255,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid #eaedf2; z-index:101; padding:0 12px; align-items:center; gap:12px; }
        .topbar-hamburger { background:none; border:none; font-size:22px; cursor:pointer; color:#374151; padding:6px; }
        .topbar-brand { font-weight:700; font-size:15px; color:#1a365d; }
        .sb-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.3); z-index:99; }
        .main { margin-left:236px; min-height:100vh; }
        /* v102: sidebar collapse (desktop) — Ctrl+B or the toolbar ◀ button slides
           the sidebar off-screen and lets the page reclaim the 236px. Persists via
           localStorage. Mobile (≤1024px) already auto-hides via its own media query. */
        #sbRestoreBtn { display:none; position:fixed; top:12px; left:12px; z-index:1003;
            background:var(--color-primary); color:#fff; border:0; padding:8px 14px;
            border-radius:999px; font-size:12px; font-weight:700; cursor:pointer;
            box-shadow:0 4px 12px rgba(29,78,216,.35); font-family:inherit;
            letter-spacing:.3px; display:none; align-items:center; gap:6px;
            transition:background .15s, box-shadow .15s, transform .1s; }
        #sbRestoreBtn:hover { background:var(--color-primary-hover);
            box-shadow:0 6px 16px rgba(29,78,216,.45); transform:translateX(2px); }
        /* v102 fix (2026): the desktop "collapse sidebar" rules are scoped to
           min-width:1025px so they can NEVER win the cascade over the mobile
           drawer at <=1024px. Previously `body.sb-collapsed aside.sidebar`
           (specificity 0,2,2) outranked the hamburger's `.sidebar.open` (0,2,0)
           and pinned the drawer off-screen, so the menu could not open on a
           non-fullscreen window. Below 1025px the <=1024px media query is the
           sole owner of the sidebar; the JS below also strips sb-collapsed there. */
        @media (min-width:1025px) {
            body.sb-collapsed aside.sidebar { transform:translateX(-100%); transition:transform .2s ease; }
            body.sb-collapsed .main { margin-left:0; }
            body.sb-collapsed #sbRestoreBtn { display:inline-flex; }
        }
        /* v102: sidebar collapse button — pill-shaped, clearly labeled so it
           reads as "this hides the menu" at a glance, not just a decorative arrow. */
        .sb-collapse-btn { display:inline-flex; align-items:center; gap:4px;
            background:#f1f5f9; border:1px solid #e2e8f0; color:var(--color-mute);
            cursor:pointer; padding:4px 10px; font-size:11px; font-weight:700;
            border-radius:999px; font-family:inherit; letter-spacing:.3px;
            text-transform:uppercase;
            transition:background .15s, color .15s, border-color .15s, transform .1s; }
        .sb-collapse-btn:hover { background:var(--color-primary-lt);
            color:var(--color-primary); border-color:var(--color-primary-bd);
            transform:translateX(-2px); }
        .sb-collapse-btn .chev { font-size:13px; line-height:1; margin-right:2px; }
        @media (max-width:1024px) { .sb-collapse-btn { display:none; } #sbRestoreBtn { display:none !important; } }
        .container { max-width:100%; padding:24px 28px; }
        h1 { font-size:22px; color:#0f172a; margin-bottom:4px; font-weight:800; }
        h2 { font-size:18px; color:#111827; margin:20px 0 10px; font-weight:700; }
        .subtitle { color:#6b7280; font-size:13px; margin-bottom:16px; }
        .page-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:16px; position:sticky; top:0; z-index:40; background:var(--color-bg); transition:box-shadow .18s var(--spring), border-color .18s var(--spring), backdrop-filter .18s ease; }
        /* UX B10 P1-A (2026-07-13): sticky standard header. base_shell_boot.js toggles
           .is-scrolled (scrollY>8) to add a hairline + elevation once the page scrolls.
           The mobile top offset clears the fixed 52px topbar in its own media query below. */
        .page-header.is-scrolled { border-bottom:1px solid var(--color-border); box-shadow:var(--shadow-md); }
        @supports (backdrop-filter: blur(6px)) {
          .page-header.is-scrolled { background:rgba(242,244,247,.82); backdrop-filter:blur(8px) saturate(1.4); -webkit-backdrop-filter:blur(8px) saturate(1.4); }
        }
        .page-header h1 { margin-bottom:0; }
        .page-actions { display:flex; gap:8px; flex-wrap:wrap; }
        .card { background:#fff; border-radius:14px; border:1px solid #eaedf2; padding:20px; margin-bottom:16px; box-shadow:var(--shadow-sm); }
        .card-title { font-size:15px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px; color:#111827; }
        .grid { display:grid; gap:16px; }
        .grid-2 { grid-template-columns: 1fr 1fr; }
        .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
        .grid-4 { grid-template-columns: repeat(4, 1fr); }
        .stat-card { background:#fff; border-radius:14px; padding:18px 22px; border:1px solid #eaedf2; box-shadow:var(--shadow-sm); }
        .stat-value { font-size:28px; font-weight:800; color:#111827; }
        .stat-label { font-size:11px; color:#6b7280; text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }
        table { width:100%; border-collapse:collapse; font-size:13px; }
        th { background:#f1f5f9; padding:8px 12px; text-align:left; font-weight:700; color:#374151; border-bottom:2px solid #e2e8f0; font-size:11px; text-transform:uppercase; letter-spacing:.3px; }
        td { padding:8px 12px; border-bottom:1px solid #f3f4f6; }
        tr:hover td { background:#f9fafb; }
        .badge { display:inline-block; padding:2px 9px; border-radius:10px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.2px; }
        .badge-green { background:#dcfce7; color:#166534; }
        .badge-yellow { background:#fef9c3; color:#854d0e; }
        .badge-red { background:#fee2e2; color:#991b1b; }
        .badge-blue { background:#dbeafe; color:#1e40af; }
        .badge-purple { background:#f3e8ff; color:#7c3aed; }
        .badge-gray { background:#f3f4f6; color:#4b5563; }
        .btn { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:10px; font-size:13px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:all .18s, transform .12s var(--spring); font-family:inherit; }
        /* UX B10 P1-A: tactile press. Scoped :not(:disabled) so disabled buttons never compress. */
        .btn:active:not(:disabled):not([aria-disabled="true"]) { transform:scale(.98); }
        .btn-primary { background:var(--color-primary); color:#fff; box-shadow:0 1px 3px rgba(29,78,216,.2); }
        .btn-primary:hover { background:var(--color-info); }
        .btn-success { background:var(--color-success); color:#fff; }
        .btn-success:hover { background:var(--color-success-ink); }
        .btn-danger { background:var(--color-danger); color:#fff; }
        .btn-danger:hover { background:var(--color-danger-ink); }
        .btn-secondary { background:#f3f4f6; color:#374151; border:1px solid #d1d5db; }
        .btn-secondary:hover { background:#e5e7eb; }
        .btn-sm { padding:4px 10px; font-size:11px; }
        .btn-ghost { background:none; color:#6b7280; border:none; padding:5px 10px; border-radius:4px; font-size:12px; }
        .btn-ghost:hover { color:#111827; background:#f3f4f6; }
        .form-group { margin-bottom:14px; }
        .form-group label { display:block; font-size:12px; font-weight:600; color:#374151; margin-bottom:4px; }
        .form-control { width:100%; padding:8px 12px; border:1px solid #e2e8f0; border-radius:10px; font-size:13px; background:#fff; font-family:inherit; transition:border-color .15s,box-shadow .15s; }
        .form-control:focus { outline:none; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(59,130,246,.12); }
        select.form-control { appearance:auto; }
        .form-inline { display:flex; gap:12px; align-items:end; flex-wrap:wrap; }
        .form-inline .form-group { margin-bottom:0; }
        .flash { padding:12px 16px; border-radius:12px; margin-bottom:12px; font-size:13px; font-weight:500; position:relative; animation:flashIn .25s ease; }
        .flash-success { background:#dcfce7; color:#166534; border:1px solid #86efac; }
        .flash-error { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
        .flash-warning { background:#fef9c3; color:#854d0e; border:1px solid #fde68a; }
        .flash-undo { background:#eff6ff; color:#1e40af; border:1px solid #93c5fd; display:flex; align-items:center; gap:10px; }
        .flash-undo .undo-btn { background:#2563eb; color:#fff; border:none; border-radius:6px; padding:4px 12px; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; } .flash-undo .undo-btn:hover { background:#1d4ed8; }
        .flash-dismiss{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:16px;cursor:pointer;color:inherit;opacity:.5;line-height:1;}
        .flash-dismiss:hover{opacity:1;}
        @keyframes flashIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
        @keyframes flashOut{from{opacity:1;max-height:60px;}to{opacity:0;max-height:0;padding:0;margin:0;border:0;overflow:hidden;}}
        /* Contextual Help Sidebar */
        .ctx-help-btn{position:fixed;bottom:20px;right:20px;width:40px;height:40px;border-radius:50%;background:#94a3b8;color:#fff;border:none;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:499;display:flex;align-items:center;justify-content:center;transition:.2s;opacity:.7;}
        .ctx-help-btn:hover{opacity:1;background:#2563eb;}
        .ctx-help-btn:hover{background:#1d4ed8;transform:scale(1.08);}
        .ctx-help-btn.pulse{animation:ctxPulse 2s ease-in-out 3;}
        @keyframes ctxPulse{0%,100%{box-shadow:0 4px 12px rgba(37,99,235,.3);}50%{box-shadow:0 4px 20px rgba(37,99,235,.6);}}
        .ctx-panel{position:fixed;top:0;right:-400px;width:380px;height:100vh;background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.1);z-index:2000;transition:right .3s ease;display:flex;flex-direction:column;}
        .ctx-panel.open{right:0;}
        .ctx-panel-hdr{padding:14px 16px;background:#0f172a;color:#fff;display:flex;align-items:center;gap:10px;}
        .ctx-panel-hdr h3{font-size:15px;font-weight:700;margin:0;flex:1;}
        .ctx-panel-close{background:none;border:none;color:#94a3b8;font-size:20px;cursor:pointer;}.ctx-panel-close:hover{color:#fff;}
        .ctx-panel-body{flex:1;overflow-y:auto;padding:14px 16px;font-size:13px;color:#374151;}
        .ctx-panel-body .cpb-what{font-size:13px;color:#374151;padding:10px;background:#f0f9ff;border-radius:8px;border-left:3px solid #3b82f6;margin-bottom:12px;}
        .ctx-panel-body h4{font-size:11px;font-weight:700;color:#1e40af;text-transform:uppercase;letter-spacing:.5px;margin:12px 0 6px;}
        .ctx-panel-body ul,.ctx-panel-body ol{margin:0 0 8px;padding-left:18px;font-size:12px;line-height:1.7;}
        .ctx-panel-body .cpb-btn{display:block;padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;font-size:11px;margin-bottom:4px;}
        .ctx-panel-body .cpb-btn strong{color:#1e40af;}
        .ctx-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.2);z-index:1999;}
        .ctx-overlay.open{display:block;}
        
@media(max-width:1024px){
    .sidebar.open{transform:translateX(0);}
    .sb-overlay.open{display:block;}
    .sidebar{transform:translateX(-100%);}
    .topbar{display:flex !important;}
    .main{margin-left:0 !important;padding-top:52px !important;}
    .page-header{top:52px;}
}
@media(max-width:768px){.ctx-panel{width:100vw;right:-100vw;}.ctx-help-btn{bottom:12px;right:12px;width:40px;height:40px;font-size:18px;}}
        .text-right { text-align:right; }
        .text-center { text-align:center; }
        .text-red { color:#dc2626; }
        .text-green { color:#16a34a; }
        .text-muted { color:var(--color-mute); }
        .mt-2 { margin-top:8px; }
        .mb-2 { margin-bottom:8px; }
        .mr-2 { margin-right:8px; }
        .mkt-plant { background:#f3e8ff; color:#7c3aed; padding:1px 5px; border-radius:3px; font-size:10px; font-weight:700; }
        .mkt-live { background:#dcfce7; color:#166534; padding:1px 5px; border-radius:3px; font-size:10px; font-weight:700; }
        .override-badge { background:#fef3c7; color:#92400e; padding:1px 4px; border-radius:3px; font-size:10px; font-weight:700; cursor:pointer; }
        /* ── ENHANCED PRINT ── */
    @media print {
        .sidebar,.topbar,.no-print,.sb-overlay,.hero,.qa-grid,.gear-btn,.settings-overlay,#fileSlideout,#fsOverlay{display:none !important;}
        .main{margin-left:0 !important;}
        .container{max-width:100%;padding:8px !important;}
        body{background:#fff !important;color:#000 !important;font-size:11px !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
        .card,.wcard,.sec,.stat-card{box-shadow:none !important;border:1px solid #ccc !important;break-inside:avoid;page-break-inside:avoid;margin-bottom:8px !important;padding:10px !important;}
        table{font-size:10px !important;border-collapse:collapse !important;}
        th,td{padding:4px 6px !important;border:1px solid #ddd !important;}
        th{background:#f0f0f0 !important;}
        .badge{border:1px solid #999 !important;}
        h1{font-size:18px !important;}
        h2{font-size:14px !important;}
        a{color:#000 !important;text-decoration:none !important;}
        .btn{display:none !important;}
        .stats{grid-template-columns:repeat(6,1fr) !important;gap:4px !important;}
        .wg{grid-template-columns:1fr 1fr !important;}
    }
        @media (max-width:768px) {
            .sidebar { transform:translateX(-100%); width:260px; box-shadow:4px 0 24px rgba(0,0,0,.15); }
            .sidebar.open { transform:translateX(0); }
            .sb-overlay.open { display:block; }
            .topbar { display:flex; }
            .main { margin-left:0; padding-top:36px;/*beta*/padding-top:52px; }
            .container { padding:12px 10px; }
            .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
            .form-inline { flex-direction:column; align-items:stretch; }
            .form-inline .form-group { width:100%; }
            h1 { font-size:20px; } h2 { font-size:16px; }
            .card { padding:14px; border-radius:8px; overflow-x:auto; }
            .stat-value { font-size:22px; }
            table.wide-table { min-width:500px; }  /* Only force width on complex tables, not all */
            th,td { padding:6px 8px; font-size:11px; white-space:nowrap; }
            .btn { padding:8px 14px; font-size:13px; }
            .page-header { flex-direction:column; align-items:flex-start; }
            /* iOS: prevent zoom on input focus — 16px minimum */
            input, select, textarea { font-size:16px !important; }
            input[type="number"] { font-size:16px !important; }
            /* Bigger tap targets on mobile */
            .btn { min-height:40px; }
            .btn-sm { min-height:40px; padding:8px 14px; font-size:12px; }
            select.form-control { min-height:40px; min-width:90px; }
            select { min-width:90px; }
            /* iOS safe area (notch) padding */
            body { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
        }
    .file-clip{color:#f59e0b;font-size:15px;font-weight:900;cursor:pointer;position:relative;display:inline-block;text-shadow:0 0 4px rgba(245,158,11,.3);vertical-align:middle;line-height:1;}
    .file-clip .fc-count{position:absolute;top:-6px;right:-9px;background:#ef4444;color:#fff;font-size:8px;font-weight:800;min-width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;}
    .file-clip:hover{text-shadow:0 0 8px rgba(245,158,11,.6);}

    /* ── GLOBAL POLISH (v38) ── */
    html{scroll-behavior:smooth;}
    /* Hide number input spinners globally */
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
    input[type=number]{-moz-appearance:textfield;}
    ::selection{background:#dbeafe;color:#1e40af;}
    
    /* Sticky table headers */
    .card table thead th{position:sticky;top:var(--ph-sticky-top,0px);z-index:2;background:#f1f5f9;} /* UX B10 verify-and-fix (2026-07-13): pin below the sticky .page-header (z-index:40) via --ph-sticky-top (base_shell_boot.js sets it to the pinned header height; 0 fallback = classic) so the header never occludes viewport-sticky report-table column headers (settlements/weights) on desktop. */
    
    /* Better table rows */
    tbody tr{transition:background .1s;}
    tbody tr:hover td{background:#f0f4ff;}
    tbody tr:active td{background:#e0e7ff;}
    
    /* Clickable rows */
    tr[onclick],tr[style*="cursor:pointer"]{transition:background .1s;}
    tr[onclick]:hover td,tr[style*="cursor:pointer"]:hover td{background:#eff6ff;}
    
    /* Smooth card hover (only on non-mobile) */
    @media(min-width:769px){
        .card{transition:box-shadow .2s;}
        .card:hover{box-shadow:var(--shadow-md);}
        .show-mobile { display:none !important; }
        .hide-desktop { display:none !important; }
    }
    
    /* Better scrollbars */
    ::-webkit-scrollbar{width:6px;height:6px;}
    ::-webkit-scrollbar-track{background:transparent;}
    ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px;}
    ::-webkit-scrollbar-thumb:hover{background:#94a3b8;}
    .sidebar::-webkit-scrollbar{width:4px;}

    /* -- Horizontal-scroll affordance (v-fix 2026) --------------------------
       Wide tables/grids live in these scroll wrappers. Two fixes for the
       "at less-than-fullscreen widths the horizontal scroll doesn't show /
       isn't intuitive" reports: (1) the generic .table-scroll/.table-wrap
       helpers now scroll at EVERY width (previously only inside
       @media(max-width:768px), so they silently failed at 769-1024px); and
       (2) a deliberately VISIBLE, styled horizontal scrollbar on every scroll
       wrapper (the global bar is a near-invisible 6px transparent sliver) so
       "there's more to the right" reads at a glance. Scoped to the wrappers --
       the page + sidebar scrollbars stay thin. ---------------------------- */
    .table-scroll, .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
    .table-scroll, .table-wrap, .xl-table-wrap, .sh-tbl-wrap, .lp-table-scroll, .bi-tbl-wrap {
        scrollbar-width:thin;                /* Firefox */
        scrollbar-color:#94a3b8 #e2e8f0;     /* Firefox: thumb / track */
    }
    .table-scroll::-webkit-scrollbar, .table-wrap::-webkit-scrollbar,
    .xl-table-wrap::-webkit-scrollbar, .sh-tbl-wrap::-webkit-scrollbar,
    .lp-table-scroll::-webkit-scrollbar, .bi-tbl-wrap::-webkit-scrollbar { height:11px; width:11px; }
    .table-scroll::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track,
    .xl-table-wrap::-webkit-scrollbar-track, .sh-tbl-wrap::-webkit-scrollbar-track,
    .lp-table-scroll::-webkit-scrollbar-track, .bi-tbl-wrap::-webkit-scrollbar-track { background:#eef1f5; border-radius:6px; }
    .table-scroll::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb,
    .xl-table-wrap::-webkit-scrollbar-thumb, .sh-tbl-wrap::-webkit-scrollbar-thumb,
    .lp-table-scroll::-webkit-scrollbar-thumb, .bi-tbl-wrap::-webkit-scrollbar-thumb { background:#94a3b8; border-radius:6px; border:2px solid #eef1f5; }
    .table-scroll::-webkit-scrollbar-thumb:hover, .table-wrap::-webkit-scrollbar-thumb:hover,
    .xl-table-wrap::-webkit-scrollbar-thumb:hover, .sh-tbl-wrap::-webkit-scrollbar-thumb:hover,
    .lp-table-scroll::-webkit-scrollbar-thumb:hover, .bi-tbl-wrap::-webkit-scrollbar-thumb:hover { background:#64748b; }
    /* A bare <table> placed DIRECTLY in a .card becomes its own horizontal
       scroller -- closes the 769-1024px "less than full screen" gap for pages
       that don't use a .table-scroll wrapper (settlements, flocks, weights,
       companies, etc.). display:block + overflow-x:auto keeps the thead
       columns aligned and the sticky header working (browser-verified on
       flocks + settlements). DIRECT children only -- tables already inside a
       .table-scroll/.xl-table-wrap/etc. are untouched (no double scroller).
       SCOPED to <=1024px (2026-06-24): at desktop a display:block table
       shrink-to-fits its content (the anonymous-table box ignores width:100%)
       and stops filling the card -- a regression from the original unscoped
       rule (#390). Above the canonical 1024px breakpoint tables revert to
       native display:table: full width + native sticky/print. The block+scroll
       affordance is only needed below 1024px, which is all the rule ever
       targeted. */
    @media (max-width: 1024px) {
      .card > table { display:block; overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch;
          scrollbar-width:thin; scrollbar-color:#94a3b8 #e2e8f0; }
      .card > table::-webkit-scrollbar { height:11px; width:11px; }
      .card > table::-webkit-scrollbar-track { background:#eef1f5; border-radius:6px; }
      .card > table::-webkit-scrollbar-thumb { background:#94a3b8; border-radius:6px; border:2px solid #eef1f5; }
      .card > table::-webkit-scrollbar-thumb:hover { background:#64748b; }
    }
    
    /* Link transitions */
    a{transition:color .15s;}
    
    /* Page title with breadcrumb style */
    .page-header h1{display:flex;align-items:center;gap:8px;}
    
    /* Stat card hover */
    .stat-card{transition:box-shadow .2s,transform .2s;}
    @media(min-width:769px){.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}}
    
    /* Badge polish */
    .badge{transition:transform .1s;}.badge:hover{transform:scale(1.04);}
    
    /* Focus-visible for accessibility */
    :focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:4px;}
    
    /* Loading state utility */
    .loading{opacity:.5;pointer-events:none;position:relative;}
    .loading::after{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid #e2e8f0;border-top-color:#3b82f6;border-radius:50%;animation:spin .6s linear infinite;}
    @keyframes spin{to{transform:rotate(360deg);}}
    /* a11y (2026-06-02): skip-to-content link (WCAG 2.4.1) — first focusable element, hidden until focused. */
    .skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:#1e40af;color:#fff;padding:8px 14px;border-radius:0 0 6px 0;font-weight:700;text-decoration:none;}
    .skip-link:focus{left:0;}
    /* a11y (2026-06-02): honor the OS reduced-motion setting — neutralizes the
       toast/flash/pulse/spin animations, the infinite grid conflict pulse, and
       smooth-scroll for users who opt out (WCAG 2.3.3 / 2.2.2). */
    @media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}}
    
    /* Toast utility */
    .g-toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));right:24px;background:#0f172a;color:#fff;padding:12px 20px;border-radius:12px;font-size:13px;font-weight:600;z-index:9999;box-shadow:0 8px 30px rgba(0,0,0,.2);transform:translateY(100px);opacity:0;transition:.3s cubic-bezier(.34,1.56,.64,1);font-family:inherit;}
    .g-toast.show{transform:translateY(0);opacity:1;}
    
    /* Empty state utility */
    .empty-state{text-align:center;padding:40px 20px;color:var(--color-mute);}
    .empty-state .es-icon{font-size:40px;margin-bottom:8px;opacity:.4;}
    .empty-state h3{font-size:15px;color:#64748b;margin:0 0 4px;font-weight:600;}
    .empty-state p{font-size:13px;margin:0;}


    /* -- AGE-APPROPRIATE FONT SIZES (v68 global) -- */
    .card table td { font-size: 13px !important; }
    .card table th { font-size: 12px !important; }
    .form-control { font-size: 14px !important; min-height: 40px; }
    .btn { font-size: 13px !important; min-height: 38px; padding: 8px 16px; }
    label { font-size: 12px; font-weight: 600; }
    @media (max-width: 768px) {
        .btn, button, select, .form-control { min-height: 44px !important; }
        a.sb-link { min-height: 44px; display: flex; align-items: center; }
    }
    /* -- MOBILE FOUNDATION (v68 global) -- */
    @media (max-width: 768px) {
        .card { padding: 12px !important; }
        .card table { font-size: 12px; }
        .form-inline { flex-direction: column !important; align-items: stretch !important; }
        .form-inline .form-group { width: 100% !important; }
        .form-inline .form-group input,
        .form-inline .form-group select { width: 100% !important; min-width: 0 !important; }
        .form-inline .form-group button { width: 100% !important; }
        .grid-2, .grid.grid-2,
        .grid-3, .grid.grid-3,
        .grid-4, .grid.grid-4 { grid-template-columns: 1fr !important; }
        h1 { font-size: 20px !important; }
        h2 { font-size: 16px !important; }
        h3 { font-size: 14px !important; }
        /* iOS: 16px prevents autozoom when focusing text inputs */
        input[type="text"], input[type="number"], input[type="email"],
        input[type="tel"], input[type="password"], input[type="search"],
        input[type="date"], input[type="datetime-local"],
        textarea, select { font-size: 16px !important; }
        .page-header { flex-direction: column; gap: 8px; }
        .page-header .page-actions { width: 100%; }
        /* v68: Mobile utilities */
        .hide-mobile { display: none !important; }
        .stat-value, .kpi-value { font-size: 22px !important; }
        table th, table td { padding: 6px 8px !important; }
        .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        /* Force flex-wrap on inline flex containers */
        div[style*="display:flex"][style*="gap:10px"],
        div[style*="display:flex"][style*="gap:12px"],
        div[style*="display:flex"][style*="gap:8px"] { flex-wrap: wrap !important; }
        /* Reports sidebar collapse */
        .rpt-shell { grid-template-columns: 1fr !important; }
        .rpt-sidebar { display: none; }
        .rpt-sidebar.open { display: block; position: fixed; top: 52px; left: 0; width: 280px;
            height: calc(100vh - 52px); z-index: 100; background: #fff;
            box-shadow: 4px 0 12px rgba(0,0,0,.15); overflow-y: auto; padding: 16px; }
        /* Settlement/cost grids */
        .sc-grid { grid-template-columns: 1fr !important; }
        .sc-fcr-grid { grid-template-columns: repeat(2, 1fr) !important; }
        /* Stat grid auto-fit */
        .stat-grid, div[style*="grid-template-columns"][style*="repeat"] { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: 10px !important; }
    }

        /* Ctrl+K palette result hover/keyboard highlight (UX Wave 1 2026-07-13) */
        #globalSearchOverlayResults a[data-gsrow]:hover, #globalSearchOverlayResults a[data-gsrow].gsrow-active { background:#f1f5f9; }
        /* ═══ UX B10 P1-A "Feel" — modal chrome, typography, motion guards (2026-07-13) ═══
           Modal rules are scoped to base.html-owned chrome only (the shared confirmModal
           built by static/base_confirm_modal.js); page-local bespoke modals are untouched. */
        #confirmModalBackdrop { animation:cmBackdropIn .18s var(--spring); }
        #confirmModalBackdrop > div { animation:cmPanelIn .18s var(--spring); }
        @keyframes cmBackdropIn { from { opacity:0; } to { opacity:1; } }
        @keyframes cmPanelIn { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
        @supports (backdrop-filter: blur(6px)) {
          /* .35 overrides the .45 solid fallback baked into base_confirm_modal.js's inline
             cssText; blur applies only where supported (the JS solid backdrop is the fallback). */
          #confirmModalBackdrop { background:rgba(15,23,42,.35) !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
        }
        /* Typography rhythm: tabular figures in tables + a label utility. h1/h2
           text-wrap:balance is owned by the states lane (static/ui_states.css in the
           feat/uxb9-states-typo branch) per the B10 spec — not duplicated here. */
        table td { font-variant-numeric: tabular-nums; }
        .u-label { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-mute); }
        @media (prefers-reduced-motion: reduce) {
          /* Kill the new P1-A transforms/animations. The global reduce block above zeroes
             animation/transition durations but not the instant :active scale. */
          .btn:active:not(:disabled):not([aria-disabled="true"]) { transform:none; }
          #confirmModalBackdrop, #confirmModalBackdrop > div { animation:none; }
        }
        @media (prefers-reduced-transparency: reduce) {
          /* Solid fallbacks for the new backdrop-filters. */
          #confirmModalBackdrop { background:rgba(15,23,42,.55) !important; backdrop-filter:none; -webkit-backdrop-filter:none; }
          .page-header.is-scrolled { background:var(--color-bg); backdrop-filter:none; -webkit-backdrop-filter:none; }
        }