/* ---- dashboard dark tokens (material black + gold; from Index.txt :root.dark) ---- */
    :root {
      --bg:#121212; --surface:#1a1a1a; --surface-2:#1f1f1f; --surface-3:#222222;
      --border:#2a2a2a; --text:#e8ecf3; --muted:#8a93a6; --gold-root:#c9a84c; --gold:var(--gold-root);
      /* 6e R5 (ARCH ruling, amber cure): `--gold-root` is the ONE home of the brand gold. Surfaces that re-point
         `--gold` (the User Account modal, below) read it to keep the brand gold where they need it. */
      --gold-soft:rgba(201,168,76,0.15);
      /* 4 standardized type sizes — case name > card title > card subheader > everything else.
         edit 9: .8rem body is the card-content baseline (the Venues white-text size); higher tiers
         downsized a bit so the card content reads less cramped — colors (gold/white/muted) carry the hierarchy */
      --fs-case:1.3rem; --fs-card:1.0rem; --fs-sub:.85rem; --fs-body:.8rem;
      /* (Joshua D-32 item 14) THE TOP TAB BAR STANDARD — one home for the four panels' top tab bars (Templates, Studio,
         Sheets, Reports): the first tab's LABEL sits --tabbar-inset from the bar's left edge (bar padding + the tab's own
         side padding), the tabs sit --tabbar-gap apart, and the bar is --tabbar-h tall. 20px is Joshua's standard; the
         6px gap (Templates, Studio, Reports) and the 34px height (Sheets, Reports) are the values the four most shared. */
      /* PUSH 13 F-15 (Joshua: "all the title bars and sub title bars are standardized height"): ONE bar height, --bar-h,
         sized to the parent tab row, for every title bar, tab row, sub-tab row and case bar; --tabbar-h reads it. */
      --bar-h:34px;
      /* PUSH 18 I1-2 (P-6) and Cure 1: --shell-top is the header's bottom edge, the ONE home of where the screen under the
         header starts for every fixed surface that hangs from it (the narrow drawer, its case list and backdrop; the
         account screen). On the real site the header is the page's first box, 34px tall (border-box), so this default
         is exact; on the test site 90-boot.js sets it from the header's measured bottom (the TEST SITE banner + 34px). */
      --shell-top:34px;
      --tabbar-inset:20px; --tabbar-gap:6px; --tabbar-h:var(--bar-h); --tabbar-tab-pad:10px;
      /* PUSH 14 L1 (§COLOURS, 7i as amended by 7l.1/7l.3/7l.5) — THE RUN CARD'S COLOURS, one home for both surfaces: the
         Live Stream's run-card edge and state word read them here (30-livestream.js rowHTML) and Studio's card tones
         read them through studio.css. Amber leans toward orange (7l.5) and is the "needs you now" colour (a question,
         a stall over an hour, files missing, an admin alert, an overdue deadline); gold stays the chrome's. Grey's word
         is lighter than its edge, so an ended card's state word stays readable (F-25). The running purple is not
         here: its one home is the Skills category (LS_CATS.skills.text, 30-livestream.js). */
      --ls-green:#3fbf6a; --ls-amber:#f07a2a; --ls-red:#e0605a; --ls-grey:#6b6f78; --ls-grey-word:#8a93a6;
      accent-color:#c9a84c;   /* gold form-control accents (selectors), not blue */
      color-scheme: dark;   /* native (OS) scrollbars render dark */
    }
    /* dark custom scrollbars (vertical + horizontal), incl. AG Grid viewports */
    ::-webkit-scrollbar { width:11px; height:11px; }
    ::-webkit-scrollbar-track { background:var(--surface); }
    ::-webkit-scrollbar-thumb { background:#55565c; border-radius:6px; border:2px solid var(--surface); min-height:48px; }   /* (Edits 8) a long list can't shrink the thumb into a sliver */
    ::-webkit-scrollbar-thumb:hover { background:#71727a; }
    ::-webkit-scrollbar-corner { background:var(--surface); }
    * { box-sizing:border-box; }
    html,body { margin:0; height:100%; background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; }
    body { display:flex; flex-direction:column; }
    /* persistent shell header — mirrors the future merged site (logo left; section buttons + account right) */
    #shellhdr { display:flex; align-items:center; justify-content:space-between; height:34px; flex:none; padding:0 12px; background:var(--surface); border-bottom:1px solid rgba(201,168,76,0.3); }
    .shell-left { display:flex; align-items:center; gap:12px; min-width:0; }
    /* brand wordmark: legacy App Script font — Playfair Display serif, mixed case (Pairavi white, Law gold) */
    .shell-logo { font-family:'Playfair Display',serif; font-weight:600; font-size:1.22rem; line-height:1; color:var(--text); cursor:pointer; white-space:nowrap; display:inline-flex; align-items:baseline; gap:7px; }
    .shell-logo span { color:var(--gold); }
    .shell-logo .shell-logo-img { height:18px; width:18px; vertical-align:middle; align-self:center; border-radius:3px; }  /* edit 11: logo image matches the browser favicon */
    /* "Dashboard" — sleek gold-tracked uppercase sub-mark set off from the serif wordmark by a hairline */
    .shell-logo .shell-dash { font-family:'DM Sans',sans-serif; font-size:.64rem; font-weight:600; letter-spacing:.30em; text-transform:uppercase; color:var(--text); opacity:.92; padding-left:8px; margin-left:1px; border-left:1px solid rgba(255,255,255,.32); align-self:baseline; }
    /* §2 silver-safety banner — big unmissable TEST-SITE warning. In-flow flex child at the top of the body
       column so it pushes content down (no overlap); hidden by default → revealed ONLY on the non-production
       (silver) instance via /api/config prod=false (gold stays byte-identical, banner never renders there).
       PUSH 18 I1-1 (D-160): it is the test site's ONE warning; the header's "Silver Probe" badge is gone. */
    .testsite-banner { display:none; flex:none; box-sizing:border-box; text-align:center; padding:7px 12px; font-family:'DM Sans',sans-serif; font-weight:800; font-size:0.9rem; letter-spacing:0.12em; text-transform:uppercase; color:#fff; background:repeating-linear-gradient(45deg,#c0392b,#c0392b 16px,#7d1a10 16px,#7d1a10 32px); border-bottom:2px solid #ffd23f; text-shadow:0 1px 2px rgba(0,0,0,.45); }
    body.testsite .testsite-banner { display:block; }
    .shell-right { display:flex; align-items:center; gap:10px; }
    .shell-btn { display:inline-flex; align-items:center; gap:5px; background:none; border:1px solid rgba(201,168,76,0.45); color:var(--gold); font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.72rem; padding:3px 9px; border-radius:4px; cursor:pointer; transition:all .2s; text-decoration:none; } /* inline-flex so the <a>-converted nav buttons (WO §C.1) render like the old <button> */
    .shell-btn:hover { border-color:var(--gold); }
    .shell-btn.active { border-color:var(--gold); }
    .shell-btn .sq, .drawer-nav .sq { display:inline-flex; align-items:center; vertical-align:middle; }   /* nav-pill leading-icon wrapper */
    .shell-btn .sq .lu, .drawer-nav .sq .lu { width:16px; height:16px; }   /* real Lucide nav glyphs at the sibling top-bar icon size (Joshua: bigger — the old 0.6em bullet read as nothing) */
    .delbtn .lu, #addmodal .rt-rmclient .lu, #addmodal .lit-rmrow .lu, #sortmodal .srm .lu, #studio .st-more .lu { width:18px; height:18px; stroke-width:2.4; }   /* red remove-✕: a big, bold X; and (push 15) Studio's run-card "⋯" at the same house size (R-9) */
    /* PUSH 17 A-7 (Joshua 10-01: "just put the home right next to the person to the top right of the screen"): the four
       panel screens' in-bar Home houses (the close of push 14 R-9, push 15 D-111 item 1, push 17 A-2 and A-6) are
       gone. Home is ONE header button beside the account button, on every screen (#home-btn, the .profile-btn rules
       below). The bars that carried a house keep their 12px right padding (#topbar, #rpt-topbar, .tpl-case-strip).
       PUSH 15 (D-111 (p14.1) item 4): the case box's clear X is back at its size before R-9 (50eb2861 made it 18px /
       stroke 2.4): a 1em glyph in its 0.85rem button, the markup's stroke 2 (.tpl-case-search-clear, below). */
    #content { flex:1; min-height:0; display:flex; flex-direction:column; }
    #home { flex:1; min-height:0; display:flex; }
    .home-hint { color:var(--text); font-size:1.05rem; }
    .home-sub { color:var(--muted); font-size:0.85rem; max-width:540px; line-height:1.5; }
    .viewhidden { display:none !important; }
    /* ── Lane E — case browser / case-360 (the dashboard, site root) ── */
    #dash { flex:1; min-width:0; min-height:0; display:flex; }
    #dash-side { width:300px; flex:none; border-right:1px solid var(--border); background:var(--surface); display:flex; flex-direction:column; min-height:0; }
    .ds-controls { padding:8px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:6px; }
    .ds-controls input, .ds-controls select { width:100%; padding:6px 9px; border:1px solid var(--border); border-radius:6px; background:var(--surface-2); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.82rem; }
    .ds-controls input:hover, .ds-controls select:hover, .ds-controls input:focus, .ds-controls select:focus { border-color:var(--gold); outline:none; }
    .ds-controls select option:checked, .ds-controls select option:hover { background:var(--gold); color:#1a1a1a; }  /* edit 11: solid gold highlight (kills the native light-blue) */
    /* The UNIVERSAL gold CLICK+TYPE combobox over a native <select> (filters, wizards, cascaders). The
       select stays the value store; this overlays a typeable input + a floating (fixed) gold list so it
       never clips inside a modal. Matches the grid EnumEditor. */
    .gs-wrap { position:relative; }
    .gs-input { width:100%; padding:6px 26px 6px 9px; border:1px solid var(--border); border-radius:6px; background:var(--surface-2); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.82rem; cursor:pointer; box-sizing:border-box; }
    .gs-input:hover, .gs-input:focus, .gs-wrap.open .gs-input { border-color:var(--gold); outline:none; }
    .gs-input::selection { background:rgba(201,168,76,.40); color:var(--text); }
    .gs-input:disabled { opacity:.55; cursor:not-allowed; }
    .gs-wrap::after { content:"\25BE"; position:absolute; right:9px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:.7rem; pointer-events:none; }
    /* PARITY pin B-1 (named, never silent): 1300 → 6200. The gold menu is body-appended and fixed, so inside the
       Modify-Parties overlay (.mp-ov 6100) a 1300 menu rendered BEHIND it. 6200 clears the overlay and matches the
       .mp-sel-list it replaces, while staying under #confirmmodal (6300) — the documented ladder holds. */
    .gs-menu { display:none; position:fixed; max-height:280px; overflow-y:auto; background:var(--surface-2); border:1px solid var(--gold); border-radius:6px; z-index:6200; box-shadow:0 6px 22px rgba(0,0,0,.55); padding:3px; }
    .gs-menu.open { display:block; }
    .gs-opt { padding:4px 9px; font-size:.82rem; color:var(--text); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:4px; }
    .gs-opt:hover { background:var(--surface-3); }   /* muted hover — matches the defendant-name combo (.comboopt), the firm-wide standard */
    /* (Joshua 20260722) the HIGHLIGHTED row is what Tab/Enter will take — it has to read as a commitment, not as
       hover. Gold text + a gold spine, distinct from the muted hover above. Matters most when the typed text
       matches in the MIDDLE of an option ("ma" → US Mail): nothing is written into the box in that case (F-2
       forbids jamming non-prefix text), so this row is the ONLY signal of what accepting will do. */
    .gs-opt.hi { background:var(--surface-3); color:var(--gold); }   /* (Joshua) gold text alone carries it — no left spine */
    /* the matched substring, so it is obvious WHY an option is in the list — the other half of the same question */
    .gs-mk { color:var(--gold); font-weight:700; }
    .gs-opt.hi .gs-mk { text-decoration:underline; text-underline-offset:2px; }
    .gs-opt.sel { font-weight:700; }
    .gs-opt.dis { opacity:.45; cursor:not-allowed; }
    .gs-empty { padding:6px 9px; font-size:.76rem; color:var(--muted); }
    /* Misc-edit b2.6 (Joshua 2026-07-09): the people-filter selects clipped long employee names. They're converted to goldSelect comboboxes (the native <select> is display:none, so its own min-width no longer sizes the visible control) — widen the .gs-wrap that wraps each so the longest full name fits with slack. */
    .gs-wrap:has(> #assignsel), .gs-wrap:has(> #dash-person), .gs-wrap:has(> #rpt-person) { min-width:230px; }
    .gs-wrap:has(> .nf-viewas) { min-width:150px; max-width:200px; }   /* (View as) the LS manager stream selector — goldSelect-converted like the other people pickers, sized compact for the toolbar */
    /* gate FIX 4 + refinement (Joshua 2026-07-09): the Events Jump paints the landed-on row a steady navigational BLUE that PERSISTS until the next click/keystroke — distinct from green=edit and gold=selection. Applied via getRowClass (PK-keyed, so it survives scroll/virtualization); !important so it reads over any conditional cell coloring. */
    .ag-row.jump-highlight, .ag-row.jump-highlight .ag-cell { background-color:rgba(37,138,221,0.30) !important; }
    /* section headers (Search / Filter / Cases) */
    .ds-hdr { font-size:.62rem; text-transform:uppercase; letter-spacing:.09em; font-weight:700; color:var(--gold); margin:3px 2px -2px; }
    .ds-listhdr { display:flex; justify-content:space-between; align-items:center; padding:7px 12px; border-bottom:1px solid var(--border); background:var(--surface-2); }
    .ds-listhdr > span:first-child { font-size:.62rem; text-transform:uppercase; letter-spacing:.09em; font-weight:700; color:var(--gold); }
    #dash-filternote { font-size:.7rem; color:var(--muted); }
    #dash-list { flex:1; overflow-y:auto; }
    .dash-case { padding:7px 12px; font-size:.82rem; color:var(--text); text-decoration:none; cursor:pointer; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
    .dash-case:hover { background:var(--surface-2); }
    .dash-case.active { background:var(--surface-3); border-left:3px solid var(--gold); padding-left:9px; }
    .dash-case .dc-dot { width:8px; height:8px; border-radius:50%; flex:none; }  /* edit 11: status color tag */
    .dash-case .dc-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .dash-case.active .dc-name { color:var(--gold); font-weight:600; }
    .dash-case .dc-meta { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-top:1px; }
    .dash-empty { padding:18px; color:var(--muted); font-size:.82rem; text-align:center; }
    #dash-main { flex:1; min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden; padding:18px 22px; }
    /* edit 11: sidebar collapse (desktop) — the arrow that was in the Apps Script app */
    #dash { position:relative; }
    .ds-hdr-row { display:flex; align-items:center; justify-content:space-between; }
    /* edit 18b: collapse control = a slim full-width bar pinned at the very bottom of the sidebar
       (out of the way of the case list); reopen handle stays a small muted tab on the divider. */
    #dash-side { position:relative; }
    .side-collapse { flex:none; width:100%; height:26px; display:flex; align-items:center; justify-content:center;
      background:var(--surface-2); border:none; border-top:1px solid var(--border); color:var(--muted);
      cursor:pointer; font-size:1.05rem; line-height:1; padding:0; }
    .side-collapse:hover { color:var(--gold); background:var(--surface-3); }
    .side-expand { position:absolute; bottom:0; left:0; z-index:6; display:none;
      align-items:center; justify-content:center; width:22px; height:26px; padding:0;
      background:var(--surface-2); border:1px solid var(--border); border-left:none; border-bottom:none; border-radius:0 7px 0 0;
      color:var(--muted); cursor:pointer; font-size:1.05rem; line-height:1; }   /* reopen tab in the SAME bottom-left area as the collapse bar */
    .side-expand:hover { color:var(--gold); background:var(--surface-3); }
    #dash.side-collapsed #dash-side { width:0; min-width:0; border-right:none; overflow:hidden; }
    #dash.side-collapsed .side-expand { display:flex; }
    .nav-burger { display:none; background:none; border:none; color:var(--gold); font-size:1.15rem; line-height:1; cursor:pointer; padding:2px 6px; }
    .drawer-nav { display:none; }
    #drawer-backdrop { display:none; }
    /* edit 11 mobile @media blocks live at the END of this stylesheet (source order must beat the
       later-defined .d-grid / .d-it-* base rules at equal specificity). */
    .dash-welcome { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); gap:8px; text-align:center; }
    .dash-welcome .dw-icon { width:42px; height:42px; border-radius:7px; opacity:.92; }  /* edit 12: favicon image (was the ⚖ glyph) */
    .case-title-row { display:flex; align-items:baseline; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
    .case-status-dot { width:9px; height:9px; border-radius:50%; flex:none; align-self:center; }  /* edit 11: status color tag next to the case */
    .case-related { display:flex; align-items:baseline; gap:5px; margin:-7px 0 16px 6px; font-size:var(--fs-body); color:var(--text); }  /* edit 11: Related under the case name; #3-fix: -7 top → a small gap below the (bigger) case number */
    .case-related .cr-label { color:var(--gold); font-weight:600; flex:none; }
    .case-related .cr-stack { display:flex; flex-direction:column; min-width:0; }  /* V3: name + number stack so the number aligns under the name */
    .case-related .cr-item:not(:first-child) { margin-top:6px; }  /* gap between multiple related cases */
    .case-related .cr-num { color:var(--text); opacity:.8; }  /* edit 12/V3: case number on the 2nd line, no parens */
    .case-title { font-family:'DM Sans',sans-serif; font-style:italic; font-weight:600; font-size:var(--fs-case); letter-spacing:.01em; color:var(--text); }  /* the system UI font, italic (Joshua 2026-07-06: case title = UI font + italic, not the Playfair wordmark serif; the fonts link loads the italic 600 cut) */
    .case-casenum { margin:-10px 0 16px 6px; font-size:var(--fs-card); font-weight:500; color:var(--text); }  /* #3: case number of the highest-no ACTIVE venue — under the case name, BIGGER than the related-case info below it (name 1.3rem > casenum 1rem > related .8rem) */
    .case-statusbadge { font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 11px; border-radius:20px; }
    /* Case-360 header controls — right-aligned across from the case name: collapse/expand-all toggle + the muted × (the .pm-x treatment) */
    .case-ctrls { margin-left:auto; display:inline-flex; align-items:center; gap:2px; align-self:center; }
    .case-ctrls button { background:none; border:none; color:var(--muted); cursor:pointer; line-height:1; padding:2px 5px; display:inline-flex; align-items:center; transition:color .15s; }
    .case-ctrls button:hover { color:var(--gold); }
    .case-ctrls .lu { width:18px; height:18px; }
    .case-close-btn { font-size:1.25rem; }
    /* Card chrome ported from the Apps Script main screen (dark-mode values): white-on-surface3
       header, an Active/Inactive pill toggle, a tab-nav sub-tab bar, and a sticky-first-column table. */
    .d-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; margin-bottom:18px; overflow:hidden; }
    .d-card-hdr { background:var(--surface-3); color:var(--text); font-weight:700; font-size:var(--fs-card); padding:11px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }  /* tier 2 */
    .d-card-hdr .d-caret, .d-card-hdr .d-card-title { cursor:pointer; }  /* collapse only via chevron or label */
    .d-card-hdr .dc-count { color:var(--muted); font-weight:600; font-size:.78rem; }
    .d-toggle { display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:3px; cursor:pointer; user-select:none; }
    .d-toggle-opt { padding:3px 14px; border-radius:999px; font-size:.72rem; font-weight:500; color:var(--muted); transition:all .15s; }
    .d-toggle-opt.on { background:var(--surface); color:var(--gold); }
    .d-subbar { display:flex; gap:2px; flex-wrap:wrap; background:var(--surface-2); border-bottom:1px solid var(--border); padding:0 8px 0 30px; }  /* tabs indented from the card header label */
    .d-subbar.hidden { display:none; }
    /* view selectors are bordered chips that live in the card header (right-adjusted) */
    .d-tabs { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
    .d-subtab { padding:3px 10px; border:1px solid var(--border); border-radius:6px; background:none; color:var(--muted); font-size:.72rem; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; white-space:nowrap; transition:all .15s; }
    .d-subtab:hover { color:var(--text); border-color:var(--muted); }
    .d-subtab.active { color:var(--gold); border-color:var(--gold); }  /* gold box = active */
    .d-subtab .tn { opacity:.55; margin-left:4px; }
    /* Records/Contact child-type tabs — edit 14b: plain text headers (white inactive, gold active),
       no shaded button; the whole child block (header bar + table) is indented under its parent
       (.d-child) so the headers line up with the table content below them. */
    .d-child { margin-left:1in; }   /* indent the child block so it's obviously nested */
    .d-rqbar { display:flex; gap:18px; flex-wrap:wrap; padding:9px 12px; background:none; border-bottom:1px solid var(--border); }
    .d-rqtab { border:none; border-radius:0; background:none; color:var(--text); padding:4px 2px; font-size:.8rem; font-weight:600; text-align:center; border-bottom:2px solid transparent; }
    .d-rqtab:hover { color:var(--gold); }
    .d-rqtab.active { background:none; color:var(--gold); border-bottom-color:var(--gold); }
    /* client selector (multi-client) — same gold-fill pill treatment */
    .d-clientbar { display:flex; gap:6px; flex-wrap:wrap; padding:9px 16px; background:var(--surface-2); border-bottom:1px solid var(--border); }
    /* edit 16: multi-plaintiff client buttons match the venue tab chips (.d-subtab) and ride in the card header */
    .d-clienttab { border:1px solid var(--border); border-radius:6px; background:none; cursor:pointer; font-family:'DM Sans',sans-serif; font-weight:600; color:var(--muted); font-size:.72rem; padding:3px 10px; text-align:center; white-space:nowrap; transition:all .15s; }
    .d-clienttab:hover { color:var(--text); border-color:var(--muted); }
    .d-clienttab.active { color:var(--gold); border-color:var(--gold); }
    /* collapse caret in every card header */
    .d-caret { cursor:pointer; color:var(--muted); font-size:.7rem; line-height:1; transition:transform .15s; display:inline-block; }
    .d-card.collapsed .d-caret { transform:rotate(-90deg); }
    .d-card.collapsed > :not(.d-card-hdr) { display:none; }
    .d-pane.hidden { display:none; }
    .d-clientpane.hidden { display:none; }  /* edit 8: Records client panes */
    .d-norows { padding:16px; color:var(--muted); font-size:var(--fs-body); }
    .d-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px 22px; padding:16px; }
    .d-field.full { grid-column:1/-1; }
    /* edit 10: single-row (field-grid) cards — GOLD Title-Case labels + WHITE values (notes label white per E10.2) */
    .d-field .dk { font-size:var(--fs-body); color:var(--gold); letter-spacing:.04em; font-weight:600; margin-bottom:4px; }  /* edit 11: standardized darker gold */
    .d-field .dk.dk-notes { color:var(--text); letter-spacing:.02em; }  /* edit 10: notes label white (not gold) */
    .d-field .dv { font-size:var(--fs-body); color:var(--text); white-space:pre-wrap; word-break:break-word; }
    .d-field .dv.empty { color:var(--muted); font-style:italic; }
    .d-field .dv.notes { color:var(--muted); font-style:italic; font-size:var(--fs-body); }
    .d-field .dv.pop { display:inline-block; border-left:3px solid var(--gold); padding-left:9px; color:var(--text); }  /* gold bar = important deadline; value stays white for emphasis */
    .d-tblwrap { overflow-x:auto; }
    .d-tbl { width:100%; border-collapse:collapse; font-size:var(--fs-body); }
    .d-tbl th { text-align:left; color:var(--gold); font-size:var(--fs-body); letter-spacing:.02em; padding:6px 12px; border-bottom:1px solid var(--border); white-space:nowrap; background:var(--surface-2); position:sticky; top:0; }  /* edit 10: Title Case (no uppercase) */
    .d-tbl td { padding:6px 12px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:top; white-space:nowrap; }
    .d-tbl td.empty { color:var(--muted); }
    .d-tbl tr:last-child td { border-bottom:none; }
    /* edit 2: notes ride a 2nd line beneath their row (Hearings/Notices were too wide) */
    .d-tbl tr.has-notes td { border-bottom:none; }
    .d-tbl tr.d-notesrow td { color:var(--muted); font-style:italic; font-size:var(--fs-body); padding:1px 12px 8px 24px; white-space:normal; position:static; background:var(--surface); border-bottom:1px solid var(--border); }
    .d-tbl tr.d-notesrow .nlbl { color:var(--gold); font-style:normal; font-weight:600; opacity:.8; }
    /* edit 4 / VAL #1: wide cards render each item as a stacked multi-row block (label/value fields
       grouped into rows, notes muted+indented at the bottom). Wraps + grows taller — never scrolls L-R. */
    .d-item { padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.13); }  /* thin muted-white divider between items (like Sheets) */
    .d-item:last-child { border-bottom:none; }
    .d-item-row { display:grid; gap:10px 18px; }
    .d-item-row + .d-item-row { margin-top:11px; }
    .d-item-field .dk { font-size:.62rem; color:rgba(201,168,76,.78); letter-spacing:.03em; font-weight:600; margin-bottom:2px; }  /* edit 10: Title Case */
    .d-item-field .dv { font-size:.85rem; color:var(--text); white-space:pre-wrap; word-break:break-word; }
    .d-item-field .dv.empty { color:rgba(255,255,255,.28); font-style:italic; }
    .d-item-notes { margin-top:9px; padding-left:16px; color:var(--muted); font-style:italic; font-size:.8rem; white-space:pre-wrap; word-break:break-word; }
    .d-item-notes .nlbl { color:var(--gold); font-style:normal; font-weight:600; opacity:.85; margin-right:5px; }
    /* edit 5: inline item format — bold label-less title row · indented detail line (minimal labels) ·
       muted lines (access/notes). All rows after the first are indented + lightly padded. */
    /* edit: item subheader row in GOLD; detail labels WHITE; all information (values) MUTED */
    .d-it-title { display:flex; flex-wrap:wrap; align-items:baseline; font-size:var(--fs-sub); color:var(--gold); font-weight:600; }
    .d-it-title .d-it-sep { color:var(--muted); margin:0 8px; font-weight:400; }
    .d-it-title .d-it-at { color:var(--muted); margin:0 7px; font-weight:400; font-style:italic; }  /* "at" between a date and a time */
    .d-it-title .d-it-tmuted { color:var(--muted); }   /* e.g. Briefs status: muted but title-size */
    .d-it-title .lbl-w { color:var(--text); }           /* white label inside the gold subheader (e.g. Discovery) */
    /* item body = boxed info panel (left) + boxed Notes panel (right), indented under the subheader */
    .d-it-body { display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; margin:8px 0 0 18px; }
    /* edit 8/10: info box keeps its content size (flex:0 0 auto); edit 10 makes that width UNIFORM across
       rows (itemInline sets identical grid columns) so the notes box starts at the same x on every row */
    .d-it-info { border:1px solid rgba(255,255,255,.15); border-radius:6px; padding:10px 14px; flex:1 1 auto; }  /* grows with the notes box to share freed width; its grid columns are minmax(ch,1fr) so the fields spread */
    .d-it-allocs { display:flex; flex-direction:column; gap:10px; }   /* CLAUDE: per-party allocation rows — even spacing (top pad = inter-row gap = bottom pad = 10px) */
    .d-it-allocs .d-it-muted { margin-top:0; }
    /* edit 10: notes box flexible again (Joshua didn't want a uniform notes-box SIZE — just a uniform notes START) */
    .d-it-notebox { border:1px solid rgba(255,255,255,.15); border-radius:6px; padding:10px 14px; flex:1 1 220px; min-width:200px; display:flex; flex-direction:column; }  /* edit: notes box grows to fill the freed width (e.g. when the sidebar is collapsed) — no max-width cap */
    .d-it-nlabel { font-size:var(--fs-body); color:var(--text); font-weight:700; font-style:normal; margin-right:4px; }  /* edit 10: white; edit 11: inline "Notes:" label */
    .d-it-ntext { font-size:var(--fs-body); color:var(--muted); font-style:italic; white-space:pre-wrap; word-break:break-word; flex:1; }
    /* Case-360 task card: the full running notes thread rendered as rows under the task header (date · author — body) */
    .d-task-notes { flex:1 1 100%; width:100%; border:1px solid rgba(255,255,255,.15); border-radius:6px; overflow:hidden; }
    .d-task-note { padding:7px 14px; border-top:1px solid var(--border); font-size:var(--fs-body); color:var(--muted); line-height:1.45; white-space:pre-wrap; word-break:break-word; }   /* body = muted */
    .d-task-note::before { content:"•"; color:var(--text); font-weight:700; margin-right:8px; }   /* bullet leads each note row */
    .d-task-note:first-child { border-top:none; }
    .d-tn-meta { color:var(--text); font-weight:700; margin-right:8px; white-space:nowrap; }   /* date · author = white */
    .d-tn-empty { color:var(--muted); font-style:italic; }
    .d-tn-empty::before { content:none; }
    /* detail rendered as an aligned grid so virtual columns line up across rows */
    .d-it-grid { display:grid; width:100%; gap:7px 24px; font-size:var(--fs-body); align-items:baseline; }
    .d-it-cell { color:var(--muted); word-break:break-word; }            /* values muted */
    .d-it-cell .lbl { color:var(--text); font-weight:600; margin-right:4px; }  /* labels white */
    .d-it-cell .lbl.lbl-white { color:var(--text); }
    .d-it-cell .d-it-dim { color:var(--muted); }
    .d-it-muted { margin-top:7px; color:var(--muted); font-style:italic; font-size:var(--fs-body); white-space:pre-wrap; word-break:break-word; }
    .d-it-muted .nlbl { color:var(--text); font-style:normal; font-weight:600; }  /* Access label white */
    .d-tbl th:first-child, .d-tbl td:first-child { position:sticky; left:0; z-index:1; background:var(--surface); border-right:1px solid var(--border); }
    .d-tbl th:first-child { background:var(--surface-2); z-index:2; }
    /* Parties & Claims — app-script card exactly: no bullets, meta on an indented
       muted sub-line; COA list numbered via a 2-col grid (number | label+targets). */
    /* edit 2: Causes of Action gets 60%; the rest split with a touch more to Defendants. */
    .d-claims { display:grid; grid-template-columns:18% 22% 60%; gap:22px; padding:16px; }
    .d-claims h4 { color:var(--gold); font-size:var(--fs-body); letter-spacing:.03em; font-weight:700; margin:0 0 10px; }  /* edit 10: Title Case */
    .pc-dismissed .d-claims li > span:first-child { color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(138,147,166,.5); }  /* dismissed parties/claims read muted + struck */
    .d-claims ul, .d-claims ol { list-style:none; margin:0; padding:0; }
    .d-claims li { font-size:var(--fs-body); color:var(--text); margin-bottom:9px; line-height:1.35; }
    .d-claims .cmeta { display:block; color:var(--muted); font-size:var(--fs-body); font-style:italic; margin-top:1px; }
    .d-claims .d-coa-list li { display:grid; grid-template-columns:24px 1fr; gap:8px; align-items:start; }
    .d-claims .d-coa-list .coa-no { color:var(--muted); font-variant-numeric:tabular-nums; text-align:right; }
    .d-claims .d-coa-list .cmeta { display:inline; margin-top:0; margin-left:5px; }
    /* 🔴 F6f — the COA ordinal on the EDITING surfaces (the two Target matrices, the dismiss matrix, the
       add-defendant checklist). The rule above is the Case-360 summary's own and is untouched; this carries the
       same treatment — muted, tabular figures so the numbers align in a column — onto the surfaces that list the
       same causes for editing. Inline rather than the summary's 24px grid track: those rows are table cells and
       flex labels whose name column is `white-space:nowrap` and already sticky/width-tuned, so a grid track would
       fight the existing sizing; a muted number plus a gap reads the same and changes no layout. */
    .lit-matrix .lit-mxname .coa-no, .tpl-mx-table .tpl-mx-name .coa-no,
    .mp-matrix .mp-mxname .coa-no, .mp-chk .coa-no { color:var(--muted); font-variant-numeric:tabular-nums; margin-right:6px; }
    /* top-level case tabs (Case Information / Communications / Tasks) */
    .case-tabs { display:flex; justify-content:center; gap:4px; border-bottom:1px solid var(--border); margin:0 0 18px; }
    .case-tab { padding:9px 18px; background:none; border:none; border-bottom:2px solid transparent; color:var(--muted); font-family:'DM Sans',sans-serif; font-size:.86rem; font-weight:600; cursor:pointer; }
    .case-tab:hover { color:var(--text); }
    .case-tab.active { color:var(--gold); border-bottom-color:var(--gold); }
    .case-pane.hidden { display:none; }
    /* Clients card — per-client inner toggle (Contact Info / Emergency Contacts) */
    .cl-toggle { display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:3px; cursor:pointer; user-select:none; margin:12px 16px 0; }
    .cl-toggle-opt { padding:4px 15px; border-radius:999px; font-size:.74rem; font-weight:500; color:var(--muted); transition:all .15s; }
    .cl-toggle-opt.on { background:var(--surface); color:var(--gold); }
    .cl-sub.hidden { display:none; }
    /* Emergency Contacts ride BELOW the contact grid (like Records → Requests) — a single
       static sub-tab header, always shown, one row per contact. */
    .cl-emtab { display:inline-block; padding:7px 14px; color:var(--gold); font-size:.78rem; font-weight:700; }

    /* ===== REPORTS VIEW (Lane A) — the legacy Apps Script .rpt-* system, ported verbatim
       and adapted to the synth dark tokens (legacy dark-mode variants are the base here;
       legacy --navy emphasis maps to --gold per its own dark-mode convention). ===== */
    /* Chrome density matches the Sheets view (34px topbar, 24px controls) — Joshua's ruling:
       control/click rows stay as short as possible to maximize row real estate. */
    /* Lane D — Templates surface */
    /* ===== TEMPLATES VIEW (Lane D) — the legacy Apps Script .tpl-* system ported
       1:1 and adapted to the synth dark tokens (legacy dark-mode variants are the
       base here; legacy --navy/--navy2 emphasis maps to --surface-3 + --gold). ===== */
    #templates { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; background:var(--bg); }
    #tpl-topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
    #tpl-topbar .tpl-title { font-size:1.05rem; font-weight:700; color:var(--text); }
    /* #tpl-body is now the scroll host (was the form). Sticky head pins; #tplBody scrolls. */
    #tpl-body { flex:1; min-height:0; padding:0; display:flex; flex-direction:column; overflow:hidden; }

    .templates-scroll { flex:1; overflow-y:auto; position:relative; display:flex; flex-direction:column; min-height:0; }
    .templates-scroll::-webkit-scrollbar { width:6px; }
    .templates-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
    .templates-scroll.tpl-scroll--no-scroll { overflow-y:hidden; }
    .templates-scroll.tpl-scroll--no-scroll #tplBody { flex:1; min-height:0; }

    .tpl-stickyhead { position:sticky; top:0; z-index:10; background:var(--bg); box-shadow:0 1px 0 var(--border); }

    .tpl-case-strip { background:var(--surface); border-bottom:1px solid var(--border); padding:0 12px 0 20px; height:var(--bar-h); box-sizing:border-box; display:flex; align-items:center; gap:12px; }   /* push 13 F-15: --bar-h. PUSH 17 A-10 (Joshua 10-02: "make them all the darker color like reports"): --surface, the shade of Reports' #rpt-topbar and Sheets' #topbar, so the four screens' top bars are one shade; the case box inside keeps its lighter --surface-2 */
    .tpl-case-strip-label { font-size:0.72rem; font-weight:600; color:var(--muted); letter-spacing:0.3px; text-transform:uppercase; flex-shrink:0; }
    .tpl-case-search-wrap { position:relative; flex:0 1 685px; min-width:0; }   /* PUSH 17 A-1 (Joshua 10-01, ledger row 25): ONE standard case box on Templates and Studio — 685px holds a 100-character case name at 0.82rem DM Sans plus the box's icons (search, tick, clear); when the window is narrow it shrinks in proportion with the venue side (both flex-shrink 1, min-width 0) */
    .tpl-case-search-wrap input { width:100%; padding:4px 52px 4px 32px; border:1px solid var(--border); border-radius:6px; font-size:0.82rem; font-family:'DM Sans',sans-serif; background:var(--surface-2); color:var(--text); text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }  /* edit 14: tighter padding to match the sidebar case search. PUSH 17 A-1: the app's standard input fill, --surface-2 (the sidebar #dash-search, goldSelect's .gs-input, #addmodal's inputs); a name longer than the box ends in "…", the full name on hover (the input's title) */
    .tpl-case-search-wrap input:focus { outline:none; border-color:var(--gold); }
    .tpl-case-search-wrap input::placeholder { color:var(--muted); }   /* PUSH 17 A-1 (ledger row 22's check): the browser's default placeholder grey (#757575) is 3.6:1 on --surface-2; --muted is over 4.5:1 */
    /* PUSH 15 (D-111 (p14.1) item 2, Joshua: "the top padding is a little less than the bottom padding"). The cause is the
       bar's own 1px bottom rule, not the header's gold line: the rule sits INSIDE the bar's --bar-h, so the box centred in
       what is left had 3px above it (to the gold line) and 3px + the rule below it (to the bar's edge) — and the rule is
       too faint to read as an edge. The box now takes a 1px top margin, the rule's width, so it centres on the bar's FULL
       height; and it is 26px, an even height, so the room either side is a whole 4px on every screen scale (27px would
       leave 3.5px, which a 100% screen paints lopsided the other way). */
    .tpl-case-strip > .tpl-case-search-wrap { margin-top:1px; }
    .tpl-case-search-wrap input { height:26px; }
    .tpl-search-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:14px; height:14px; pointer-events:none; color:var(--muted); transition:color 0.15s ease; }
    .tpl-case-search-wrap:focus-within .tpl-search-icon { color:var(--gold); }
    .tpl-case-search-wrap input:not(:placeholder-shown) ~ .tpl-search-icon { color:var(--gold); }
    .tpl-case-selected-tick { position:absolute; right:32px; top:50%; transform:translateY(-50%); color:var(--gold); font-size:0.9rem; line-height:1; display:none; pointer-events:none; font-weight:700; }
    .tpl-case-selected-tick.visible { display:inline-block; }
    .tpl-case-search-clear { position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--muted); cursor:pointer; font-size:0.85rem; display:none; background:none; border:none; padding:0; line-height:1; }
    .tpl-case-search-clear.visible { display:block; }
    .tpl-case-search-clear:hover { color:var(--text); }
    .tpl-case-dd { display:none; position:absolute; top:100%; left:0; right:0; background:var(--surface); border:1px solid var(--border); border-top:none; border-radius:0 0 6px 6px; max-height:240px; overflow-y:auto; z-index:20; box-shadow:0 4px 12px rgba(0,0,0,0.3); }
    .tpl-case-dd.open { display:block; }
    .tpl-case-dd-item { padding:6px 12px; font-size:0.82rem; cursor:pointer; border-bottom:1px solid var(--border); color:var(--text); }  /* edit 14: tighter rows */
    .tpl-case-dd-item:last-child { border-bottom:none; }
    .tpl-case-dd-item:hover { background:var(--surface-3); }   /* universal muted dropdown hover */
    [role="option"].combo-hl { background:var(--surface-3); }   /* push 15 MG-7 (D-115): the shared picker's arrow-key highlight, every variant's own muted hover look (wireLitCombo, 21-modals.js) */
    .tpl-case-dd-empty { padding:10px 12px; font-size:0.8rem; color:var(--muted); }

    /* Drift banner — three tones (dark base). */
    .tpl-drift-banner-wrap { padding:0 20px; background:var(--bg); }
    .tpl-drift-banner-wrap:empty { display:none; }
    .tpl-drift-banner { position:relative; margin:10px 0 0 0; padding:10px 36px 10px 14px; border-radius:6px; font-size:0.8rem; line-height:1.55; border-left:3px solid; }
    .tpl-drift-banner.danger { background:rgba(220,53,69,0.15); color:#f08a96; border-left-color:#dc3545; }
    .tpl-drift-banner.warning { background:rgba(201,168,76,0.15); color:var(--gold); border-left-color:var(--gold); }
    .tpl-drift-banner strong { font-weight:600; }
    .tpl-drift-dismiss { position:absolute; top:6px; right:8px; background:none; border:none; padding:4px 6px; font-size:0.85rem; line-height:1; cursor:pointer; color:inherit; opacity:0.55; border-radius:4px; }
    .tpl-drift-dismiss:hover { opacity:1; background:rgba(255,255,255,0.08); }

    /* Venue selector — inline with case search. */
    .tpl-venue-selector-wrap { flex:0 1 460px; min-width:0; }   /* PUSH 17 A-3 (venue mockup v07; D-146, Joshua 10-01): the venue side's standard width, 460px — the longest single-number venue label (40 characters) plus the longest status word. The 16 legacy rows holding two case numbers in one field are not sized for: their label ends in "…", the full text on hover (the box's title). On a narrow window it shrinks in proportion with the case box (A-1) */
    .tpl-venue-selector-wrap:empty { display:none; }
    .tpl-venue-select-row { display:flex; align-items:center; gap:8px; width:100%; }   /* fill the wrap so the SELECT box (not the label) takes the width → the full venue name renders without clipping */
    .tpl-venue-select-row .gs-wrap { flex:1 1 auto; min-width:0; }   /* the gold combobox (goldSelect) wraps the venue <select>; make its .gs-wrap grow to fill the fixed venue side (it sizes to content otherwise → clipped) */
    .tpl-venue-label { font-size:0.72rem; font-weight:600; color:var(--muted); letter-spacing:0.3px; text-transform:uppercase; flex-shrink:0; }
    .tpl-venue-select { flex:1 1 auto; width:100%; min-width:0; padding:7px 10px; font-size:0.82rem; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); cursor:pointer; }   /* width:100% → the box FILLS the venue side (a bare <select> renders at its static content width otherwise) */
    .tpl-venue-box { cursor:default; display:flex; align-items:center; justify-content:flex-start; gap:10px; white-space:nowrap; overflow:hidden; }   /* single-venue: a non-selectable box (no dropdown arrow); PUSH 17 A-3 (mockup v07): the status (if any) follows the name after a 10px gap, inside the box */
    .tpl-venue-box-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
    .tpl-venue-select:focus { outline:none; border-color:var(--gold); }
    /* PUSH 17 A-3 (venue mockup v07): a venue's status is shown after its name, never in the label. Active shows
       nothing; Dismissed and Withdrawn are the red outline stop sign; every other status is the yellow warning
       triangle. No shading, no border, no separator. Several venues: the selected one's status sits INSIDE the gold
       select box, after the name and clear of the chevron (tplPlaceVenueStatus sizes the box's right padding). The
       old "Inactive Venue" flag and the red label colour are gone; .is-inactive stays on the element as a hook only. */
    .tpl-venue-status { display:inline-flex; align-items:center; gap:4px; font-size:0.78rem; font-weight:600; white-space:nowrap; flex-shrink:0; background:none; border:none; padding:0; }
    .tpl-venue-status .lu { width:14px; height:14px; }
    .tpl-venue-status.is-red { color:#f08a96; }
    .tpl-venue-status.is-yellow { color:var(--gold); }
    .tpl-venue-select-row .gs-wrap > .tpl-venue-status { position:absolute; right:28px; top:50%; transform:translateY(-50%); pointer-events:none; }
    .tpl-venue-select-row .gs-input { text-overflow:ellipsis; }   /* a long venue name ends in "…" before the status (its right padding is set to clear it) */
    .tpl-venue-warning { padding:7px 10px; background:rgba(240,138,150,0.12); color:#f08a96; border:1px solid rgba(240,138,150,0.4); border-radius:6px; font-size:0.78rem; line-height:1.3; display:inline-flex; align-items:center; gap:7px; }  /* edit 14: shorter copy + wrap (no nowrap) so it can't clip. PUSH 17 A-3: the no-venue state is a RED hard stop (the octagon), mockup v07 row 2 */
    .tpl-venue-warning .lu { width:16px; height:16px; flex:none; }
    .tpl-nopleadings { margin:24px 20px; padding:14px 16px; background:rgba(201,168,76,0.12); color:var(--gold); border:1px solid rgba(201,168,76,0.4); border-radius:8px; font-size:0.85rem; line-height:1.5; text-align:center; }  /* caption gate: case has no pleadings parties */

    /* Category pills — edit 12: lead the band with the X-close merged in (topbar deleted) */
    .tpl-cats-band { display:flex; align-items:center; min-height:var(--bar-h); box-sizing:border-box; border-bottom:1px solid var(--border); background:var(--surface); }
    .tpl-cats-band .tpl-cats { flex:1; border-bottom:none; align-self:stretch; align-items:center; gap:var(--tabbar-gap);
      padding:0 20px 0 calc(var(--tabbar-inset) - var(--tabbar-tab-pad)); }   /* the tab bar standard (item 14); the band wraps taller if its tabs wrap */
    .tpl-cats { display:flex; gap:6px; padding:12px 20px; border-bottom:1px solid var(--border); background:var(--surface); flex-wrap:wrap; }
    /* edit 12: match the Reports/Sheets group buttons (.rpt-cat-pill / .grp-tab) — plain text, gold when active, NOT a filled pill */
    .tpl-cat { background:none; border:none; color:var(--muted); font-family:'DM Sans',sans-serif; font-size:0.78rem; font-weight:600; padding:4px var(--tabbar-tab-pad); border-radius:6px; cursor:pointer; white-space:nowrap; transition:all .15s; }
    .tpl-cat:hover { color:var(--text); background:var(--surface-2); }
    .tpl-cat.active { color:var(--gold); font-weight:700; background:none; }
    .tpl-cat.dev { color:#5fae6a; }                                  /* admin-only studio category (Complaints) = green, matching the dev/admin sheet tabs */
    .tpl-cat.dev:hover { color:#84d68f; background:var(--surface-2); }
    .tpl-cat.dev.active { color:#84d68f; font-weight:700; background:none; }

    /* Sub-tabs row (Depositions). */
    /* PUSH 13 F-15 (Joshua: "everytihing was same size font, title case, second row was centered"; the underline goes):
       ONE tab style. A sub-tab (.tpl-tab, .rpt-tab, the Sheets bottom .sheet-tab) wears the PARENT tab's font, weight and
       padding (.tpl-cat / .rpt-cat-pill / .grp-tab), its row is centered and --bar-h tall, and the selected tab is gold
       text with no underline. */
    .tpl-tabs { display:none; gap:var(--tabbar-gap); border-bottom:1px solid var(--border); background:var(--surface); padding:0 20px; height:var(--bar-h); box-sizing:border-box; align-items:center; }
    .tpl-tabs.visible { display:flex; justify-content:center; }   /* center the sub-tabs, matching Reports' centered .rpt-tabs (Joshua) */
    .tpl-tab { padding:4px var(--tabbar-tab-pad); font-size:0.78rem; font-weight:600; cursor:pointer; color:var(--muted); border:none; border-radius:6px; background:none; font-family:'DM Sans',sans-serif; transition:all 0.15s; white-space:nowrap; }
    .tpl-tab:hover { color:var(--text); background:var(--surface-2); }
    .tpl-tab.active { color:var(--gold); font-weight:700; background:none; }
    /* edit 6: parked Complaints sub-tabs (Amended Complaint / Doe Amendment) → coming-soon page */
    .tpl-coming-soon { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:340px; text-align:center; }
    .tpl-coming-soon-icon { font-size:2.4rem; opacity:0.65; }
    .tpl-coming-soon-title { font-size:1.15rem; font-weight:700; color:var(--text); }
    .tpl-coming-soon-sub { font-size:0.92rem; color:var(--muted); letter-spacing:0.04em; text-transform:uppercase; }

    /* Form body */
    .tpl-body { padding:20px; position:relative; }
    .tpl-form-loader { display:none; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.25); backdrop-filter:blur(1px); align-items:center; justify-content:center; z-index:5; border-radius:8px; }
    .tpl-form-loader.visible { display:flex; }
    .tpl-form-loader-inner { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:16px 22px; display:flex; align-items:center; gap:12px; box-shadow:0 4px 14px rgba(0,0,0,0.3); font-size:0.85rem; color:var(--text); }
    .tpl-spinner { width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--gold); border-radius:50%; animation:tpl-spin 0.7s linear infinite; flex-shrink:0; }
    @keyframes tpl-spin { to { transform:rotate(360deg); } }

    .tpl-field { margin-bottom:14px; }
    .tpl-field-label { display:flex; align-items:center; justify-content:space-between; font-size:0.72rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.3px; margin-bottom:6px; }
    .tpl-unselect-all-link { background:none; border:none; padding:0; margin-left:8px; font-family:inherit; font-size:0.65rem; font-weight:500; letter-spacing:0.2px; text-transform:none; color:var(--muted); opacity:0.7; cursor:pointer; }
    .tpl-unselect-all-link:hover { opacity:1; color:var(--text); text-decoration:underline; }
    .tpl-field input[type="text"], .tpl-field select, .tpl-field textarea { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:0.85rem; font-family:'DM Sans',sans-serif; background:var(--surface); color:var(--text); }
    /* Sheets themed date/time picker (makeFormDate) inside the Templates view — the .fd-wrap rules
       are otherwise scoped to #addmodal; mirror them here so wrapped inputs keep their layout + button. */
    #templates .fd-wrap { position:relative; width:100%; }
    #templates .fd-wrap .fd-input { width:100%; box-sizing:border-box; padding-right:36px; }
    /* bigger, unboxed pick icon — centered chip, no border-left divider, subtle hover */
    #templates .fd-wrap .fdbtn { position:absolute; right:3px; top:50%; transform:translateY(-50%); height:26px; width:30px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:var(--gold); cursor:pointer; border-radius:5px; }
    #templates .fd-wrap .fdbtn:hover { background:var(--surface-3); }
    #templates .fd-wrap .fdbtn svg { width:19px; height:19px; }
    #templates .fd-input.pi-formula { color:var(--gold); font-style:italic; }
    #templates .fd-input.pi-formula-set { color:var(--gold); font-weight:normal; font-style:normal; }   /* SE §3b: committed-from-formula denotation — gold, de-bolded (upright, normal weight) */
    /* deporow cells are short (28px) — compact but still clearly visible */
    #templates .tpl-deporow .fd-wrap .fd-input { padding-right:28px; }
    #templates .tpl-deporow .fd-wrap .fdbtn { width:24px; height:22px; right:2px; }
    #templates .tpl-deporow .fd-wrap .fdbtn svg { width:16px; height:16px; }
    .tpl-field input[type="text"]:focus, .tpl-field select:focus, .tpl-field textarea:focus { outline:none; border-color:var(--gold); }
    .tpl-field-help { font-size:0.7rem; color:var(--muted); margin-top:4px; }

    /* Custom Set Number dropdown */
    .tpl-setnum-wrap { position:relative; }
    .tpl-setnum-button { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:0.85rem; font-family:'DM Sans',sans-serif; background:var(--surface); color:var(--text); cursor:pointer; text-align:left; display:flex; justify-content:space-between; align-items:center; }
    .tpl-setnum-button:focus, .tpl-setnum-wrap.open .tpl-setnum-button { outline:none; border-color:var(--gold); }
    .tpl-setnum-chev { color:var(--muted); font-size:0.75rem; }
    .tpl-setnum-dd { display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:6px; max-height:280px; overflow-y:auto; z-index:50; box-shadow:0 4px 12px rgba(0,0,0,0.3); }
    .tpl-setnum-wrap.open .tpl-setnum-dd { display:block; }
    .tpl-setnum-opt { padding:6px 12px; cursor:pointer; font-size:0.85rem; font-family:'DM Sans',sans-serif; color:var(--text); }
    .tpl-setnum-opt:hover { background:var(--surface-3); }   /* universal muted dropdown hover */
    .tpl-setnum-opt.selected { background:var(--surface-3); color:var(--gold); }

    /* Percipient batch row stack (8-col grid). */
    .tpl-deporow-header { display:grid; grid-template-columns:28px 1.5fr 0.9fr 0.7fr 24px 110px 24px 110px; gap:8px; padding:0 10px 4px 10px; font-size:0.72rem; color:var(--muted); text-align:left; text-transform:uppercase; letter-spacing:0.04em; }
    .tpl-deporow-scroll { border:0.5px solid var(--border); border-radius:6px; padding:6px; max-height:380px; overflow-y:auto; background:var(--surface-2); }
    .tpl-deporow { background:var(--surface); border:0.5px solid var(--border); border-radius:6px; padding:6px 10px; margin-bottom:4px; display:grid; grid-template-columns:28px 1.5fr 0.9fr 0.7fr 24px 110px 24px 110px; gap:8px; align-items:center; }
    .tpl-deporow:last-of-type { margin-bottom:0; }
    .tpl-deporow-btn { height:28px; width:28px; padding:0; display:flex; align-items:center; justify-content:center; background:var(--surface); border:0.5px solid var(--border); border-radius:4px; color:var(--muted); cursor:pointer; font-size:0.95rem; line-height:1; }
    .tpl-deporow-btn:hover { background:var(--surface-2); color:var(--text); }
    .tpl-deporow-input { height:28px; width:100%; padding:4px 8px; border:1px solid var(--border); border-radius:6px; font-size:0.85rem; font-family:'DM Sans',sans-serif; background:var(--surface); color:var(--text); }
    .tpl-deporow-input:focus { outline:none; border-color:var(--gold); }
    .tpl-deporow-opts { display:flex; flex-direction:column; gap:2px; font-size:0.75rem; color:var(--text); }
    .tpl-deporow-opts label { display:flex; align-items:center; gap:5px; cursor:pointer; line-height:1; }
    .tpl-deporow-opts input[type="radio"], .tpl-deporow-opts input[type="checkbox"] { margin:0; accent-color:#1a73e8; }   /* edit 5 D2: In Person/Remote toggles blue to match the checkboxes */
    .tpl-deporow-docreq { font-size:0.75rem; color:var(--text); }
    .tpl-deporow-docreq label { display:flex; align-items:center; gap:5px; cursor:pointer; line-height:1; }
    .tpl-deporow-docreq input[type="checkbox"] { margin:0; accent-color:#1a73e8; }   /* boolean checkboxes = blue (legacy app-script native) */
    /* edit 5 D1: the + row mirrors a real row's geometry EXACTLY by nesting the same two insets — the wrap
       mimics .tpl-deporow-scroll's border(0.5)+padding(6); the add-row inside mimics a .tpl-deporow card's
       border(0.5)+padding(6px 10px). Same CSS values → same browser rounding → the + lands pixel-exactly under
       the × at any DPI (the prior fix matched only the inner card inset, leaving the scroll-box inset uncorrected). */
    .tpl-deporow-addwrap { border:0.5px solid transparent; padding:6px; margin-top:6px; }
    .tpl-deporow-add { display:grid; grid-template-columns:28px 1.5fr 0.9fr 0.7fr 24px 110px 24px 110px; gap:8px; align-items:center; padding:6px 10px; border:0.5px solid transparent; }
    .tpl-deporow-add-label { font-size:0.85rem; color:var(--muted); }
    .tpl-body--depo-percipient { display:flex; flex-direction:column; min-height:0; height:100%; }
    .tpl-body--depo-percipient > .tpl-footer { flex-shrink:0; margin-top:auto; }

    .tpl-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

    /* Two-column layout (Propound Discovery + PMK depo). */
    .tpl-twocol { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:16px; align-items:start; }
    .tpl-twocol--pmk { grid-template-columns:minmax(0,0.55fr) minmax(0,1.45fr); }
    .tpl-twocol--discovery { grid-template-columns:minmax(0,0.68fr) minmax(0,1.62fr); }   /* ~+5% to the left column (less cramped) */
    .tpl-twocol--complaints { grid-template-columns:minmax(0,0.5fr) minmax(0,0.5fr); }   /* 50/50 */
    @media (max-width:720px) { .tpl-twocol, .tpl-twocol--pmk, .tpl-twocol--discovery, .tpl-twocol--complaints { grid-template-columns:1fr; } }
    /* v0.5b Written Discovery — the 5-row Type|Set table + the §3 ETL slot. Sub-tabs reuse .tpl-tabs/.tpl-tab;
       the "Respond" placeholder reuses .tpl-coming-soon; the attach/trash/drag-drop reuse the complaint .tpl-cmpl-* pattern. */
    /* type rows — gold card style (matches .tpl-dtype-stack-btn: font-size 0.82rem, var(--text), regular weight);
       each row packs the label (fills the width), the compact Set combobox, then the checkbox right after it. */
    .tpl-wd-rows { display:flex; flex-direction:column; gap:6px; }
    .tpl-wd-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:6px; background:var(--surface); cursor:pointer; }
    .tpl-wd-row:hover { border-color:var(--gold); }   /* whole card toggles on click (like a category row) — hover signals it */
    /* Type / Set sub-headers, aligned to the card columns (label fills, Set over the 96px combobox, a checkbox spacer) */
    .tpl-wd-head { display:flex; align-items:center; gap:10px; padding:2px 10px 5px; border:1px solid transparent; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); font-weight:600; }   /* transparent 1px border matches the card border so the columns line up */
    .tpl-wd-head-type { flex:1 1 auto; }
    .tpl-wd-head-set { flex:0 0 96px; text-align:center; }
    .tpl-wd-head-cbx { flex:0 0 16px; }   /* exactly the checkbox width so the Set column can't drift */
    .tpl-wd-type { flex:1 1 auto; min-width:0; font-size:0.82rem; color:var(--text); }   /* title takes the remaining width */
    .tpl-wd-row .gs-wrap, .tpl-wd-setno { flex:0 0 auto; width:96px; }   /* the Set combobox: fixed, uniform size on the right */
    .tpl-wd-cbx { flex:0 0 16px; width:16px; height:16px; margin:0; accent-color:#1a73e8; cursor:pointer; }   /* fixed 16px so the Set header spacer matches exactly */
    .tpl-wd-etl-badge { font-size:0.64rem; color:var(--gold); background:rgba(201,168,76,0.15); padding:1px 7px; border-radius:9px; margin-left:8px; font-weight:600; }
    /* v0.5c Respond tab — the read-only Standard-Language reference (dispositions/objections) + dimmed non-active type rows */
    .rw-ref-scroll { max-height:520px; overflow-y:auto; padding:2px 0 6px; }
    .tpl-body--twocol .rw-ref-scroll { max-height:none; }
    .rw-ref-group-h { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--gold); font-weight:700; padding:12px 12px 5px; }
    .rw-ref-item { padding:6px 12px 9px; border-bottom:1px solid var(--border); }
    .rw-ref-item:last-child { border-bottom:none; }
    .rw-ref-tag { font-size:0.8rem; font-weight:700; color:var(--text); display:flex; align-items:center; gap:7px; }
    .rw-ref-text { font-size:0.76rem; color:var(--muted); margin-top:3px; line-height:1.45; }
    .rw-ref-empty { padding:16px; color:var(--muted); font-style:italic; font-size:0.82rem; }
    .rw-type-muted { font-size:0.66rem; color:var(--muted); margin-left:8px; font-style:italic; }
    .tpl-wd-row.rw-row-off { cursor:default; opacity:0.7; }
    .tpl-wd-row.rw-row-off:hover { border-color:var(--border); }
    /* Freeze the Standard-Language header + tabs; only the list scrolls (Joshua). Mirrors the complaints
       right-column pattern, scoped to the respond form so the propound categories panel is untouched. */
    .tpl-body--twocol .tpl-twocol--respond { grid-template-rows:1fr; }
    .tpl-body--twocol .tpl-twocol--respond .tpl-twocol-right { overflow:hidden; display:flex; flex-direction:column; align-self:stretch; }
    .tpl-twocol--respond .tpl-twocol-right #tplRwRef, .tpl-twocol--respond .tpl-twocol-right #tplRwRef > .tpl-field { display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
    .tpl-twocol--respond .tpl-twocol-right #tplRwRef > .tpl-field { margin-bottom:0; }
    .tpl-twocol--respond .tpl-twocol-right .tpl-field-label, .tpl-twocol--respond .tpl-twocol-right .tpl-cmpl-coatabs { flex:0 0 auto; }
    .tpl-twocol--respond .tpl-twocol-right .tpl-cats-box { display:flex; flex-direction:column; min-height:0; flex:1 1 auto; border-top-left-radius:0; border-top-right-radius:0; }   /* square top so the folder tabs form the panel edge (like the complaint studio) */
    .tpl-body--twocol .tpl-twocol--respond .rw-ref-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; max-height:none; }
    /* §3 load slot in the case strip (right of the venue) — mirrors the complaint header's loaded-banner + trash + attach */
    .tpl-wd-etl-slot { flex:0 0 auto; display:flex; align-items:center; gap:8px; }
    .tpl-wd-etl-slot:empty { display:none; }
    .tpl-wd-etl-slot:not(:empty) { border-left:1px solid #333; padding-left:10px; }   /* PUSH 17 A-3 (mockup v07 rows 9-14): a 1px rule between the venue and the loader */
    .tpl-wd-draftwarn { background:rgba(201,168,76,0.15); color:var(--gold); border:1px solid rgba(201,168,76,0.4); font-size:0.75rem; font-weight:600; white-space:nowrap; padding:5px 11px; border-radius:4px; display:inline-flex; align-items:center; gap:6px; }
    .tpl-wd-draftwarn .lu { width:15px; height:15px; }
    /* v0.5a Complaints studio — builder rows + drafts list (house-style: reuses deporow inputs, cat-group checklist, tpl-btn-*) */
    .tpl-cmpl-prow { display:flex; gap:8px; margin-bottom:7px; align-items:center; }
    .tpl-cmpl-prow .tpl-deporow-input { flex:1; min-width:0; }
    .tpl-cmpl-prow .tpl-cmpl-type { flex:1.3; }
    /* edit 5 C2: plaintiff helper text — indented + bulleted so it reads as helper, not noise */
    .tpl-cmpl-helplist { margin:11px 0 2px; padding-left:22px; list-style:disc; }   /* edit 5.1: sits below the plaintiff rows (gold box) */
    .tpl-cmpl-helplist li { color:var(--muted); font-size:0.78rem; line-height:1.45; margin:1px 0; }
    /* edit 5 C1: white, centered column header over the plaintiff rows (mirrors the wizard .lit-fhead) */
    .tpl-cmpl-phead { display:flex; gap:8px; margin:6px 0 8px; font-size:0.74rem; font-weight:700; color:var(--text); }
    .tpl-cmpl-phead > span { text-align:center; }
    .tpl-cmpl-ph-name { flex:1.4; } .tpl-cmpl-ph-aka { flex:1; } .tpl-cmpl-ph-act { flex:0 0 auto; min-width:56px; }
    .tpl-cmpl-sof { width:100%; box-sizing:border-box; background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text); padding:8px 10px; font-family:'DM Sans',sans-serif; font-size:0.85rem; resize:vertical; }
    .tpl-cmpl-drafts { display:flex; flex-direction:column; gap:5px; }
    .tpl-cmpl-draft { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--surface); border:1px solid var(--border); border-radius:6px; font-size:0.82rem; }
    .tpl-cmpl-draft.current { border-color:var(--gold); }
    .tpl-cmpl-draft-id { font-weight:600; color:var(--text); }
    .tpl-cmpl-draft-actions { margin-left:auto; display:flex; gap:5px; }
    .tpl-cmpl-mini { background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:4px 12px; font-size:0.78rem; font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; }   /* edit 5 C1: white Add/Edit (mirrors the wizard .btn) */
    .tpl-cmpl-mini:hover { border-color:var(--gold); }
    .tpl-cmpl-ddel { background:transparent; border:none; color:#b06b6b; font-size:0.95rem; line-height:1; cursor:pointer; padding:4px 6px; }   /* red ✕ remove — mirrors the cascade's .lit-drowrm */
    .tpl-cmpl-ddel:hover { color:#d08a8a; }
    .tpl-cmpl-tag { font-size:0.68rem; padding:1px 7px; border-radius:9px; border:1px solid var(--border); color:var(--muted); }
    .tpl-cmpl-tag.approved { border-color:#2da44e; color:#7ed399; }
    .tpl-cmpl-hdr { margin-right:auto; color:var(--muted); font-size:0.78rem; }
    .tpl-cmpl-coacount { font-size:0.66rem; color:var(--gold); background:rgba(201,168,76,0.15); padding:2px 8px; border-radius:4px; margin-left:8px; font-weight:500; text-transform:none; letter-spacing:0; }   /* "N Selected" pill — matches the sub-group "N checked" badge */
    /* roomier left column (don't smush the party fields together) */
    .tpl-twocol--complaints .tpl-twocol-left .tpl-field { margin-bottom:22px; }
    .tpl-twocol--complaints .tpl-twocol-left .tpl-field-label { font-size:0.78rem; margin-bottom:10px; }
    .tpl-twocol--complaints .tpl-cmpl-pllist { gap:10px; margin-top:10px; }
    .tpl-twocol--complaints .tpl-deporow-input, .tpl-twocol--complaints .tpl-cmpl-drow .comboinput { padding:8px 10px; }
    /* gold buttons throughout the complaint studio (match the house gold accent) */
    .tpl-twocol--complaints .tpl-deporow-btn { background:var(--surface-3); border:1px solid var(--gold); color:var(--gold); }
    .tpl-twocol--complaints .tpl-deporow-btn:hover { filter:brightness(1.25); }
    /* gui edits 2+3 — Venue rows, locked plaintiffs, wizard-style defendants, COA Select/Target tabs + matrix */
    /* edit 5.1: Venue = white centered column headers + two fields in line (mirrors the Plaintiff/Defendant headers) */
    .tpl-cmpl-vhead { display:flex; gap:8px; margin:6px 0 8px; font-size:0.72rem; font-weight:600; color:var(--muted); }  /* muted headers like every other form label */
    /* ARCH 0219 §4 — version-aware caption label at the top of the Complaints left column (COMPLAINT / FIRST AMENDED COMPLAINT / …) */
    .tpl-cmpl-verlabel { text-align:center; font-family:'DM Sans',sans-serif; font-weight:700; font-size:0.95rem; letter-spacing:0.04em; color:var(--muted); text-transform:uppercase; padding:2px 0 10px; margin-bottom:6px; border-bottom:1px solid var(--border); }
    .tpl-cmpl-vhead > span { flex:1; text-align:center; }
    .tpl-cmpl-vrow2 { display:flex; gap:8px; }
    .tpl-cmpl-vrow2 > .tpl-cmpl-vcell { flex:1; min-width:0; display:flex; flex-direction:column; }  /* A60.2 cure 01: each input over its own venue message */
    .tpl-cmpl-vcell > .tpl-deporow-input { min-width:0; background:var(--surface-2); }  /* --surface-2 so the venue fields pop on the studio's --surface background (match the gold-boxed sections) */
    .tpl-cmpl-pllist { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
    .tpl-cmpl-plrow { display:flex; gap:8px; align-items:center; position:relative; }
    .tpl-cmpl-plrow .cmpl-pname { flex:1.4; min-width:0; } .tpl-cmpl-plrow .cmpl-paka { flex:1; min-width:0; }
    .tpl-cmpl-plrow .cmpl-pname[readonly] { opacity:0.65; cursor:not-allowed; }
    /* the locked Venue fields carry the same padlock as a locked party row (Joshua) */
    .tpl-cmpl-plrow .pl-lockico { display:inline-flex; align-items:center; flex:none; color:var(--gold); opacity:.8; }
    .tpl-cmpl-plrow .pl-lockico .lu { width:14px; height:14px; }
    .tpl-help-roomy { margin-top:7px; line-height:1.5; }
    .tpl-cmpl-plrow.cmpl-locked { border:1.5px solid var(--gold); border-radius:8px; padding:4px 6px; box-shadow:0 0 0 1px rgba(201,168,76,0.25); }
    .tpl-cmpl-pact { flex:0 0 auto; display:flex; gap:5px; align-items:center; }
    /* two-row defendant card — row 1: Defendant Name + Type (+ Lock/Edit/✕); row 2: DBA + State. Each field self-labelled. */
    .tpl-cmpl-drow { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; position:relative; }
    .tpl-cmpl-drow-r1, .tpl-cmpl-drow-r2 { display:flex; gap:8px; align-items:flex-end; }   /* fields + buttons bottom-align → every control + Lock/Edit/✕ line up (no overlap) */
    .tpl-cmpl-drow-r2 { margin-top:8px; }
    .tpl-cmpl-dfield { min-width:0; display:flex; flex-direction:column; gap:5px; }
    .tpl-cmpl-dfield--name { flex:1; }                  /* row 1: shares with Type */
    .tpl-cmpl-dfield--type { flex:0 0 290px; min-width:0; }   /* fits "Business Organization (Form Unknown)" (~245px text) + padding + chevron, no clip */
    .tpl-cmpl-dfield--dba { flex:1; min-width:0; }      /* row 2: the wide field */
    .tpl-cmpl-dfield--state { flex:0 0 144px; }         /* just fits "New Hampshire"/"North Carolina" without hugging the chevron */
    .tpl-cmpl-dfield > span { font-size:0.74rem; color:var(--text); font-weight:700; text-align:center; line-height:1.2; }   /* matches the Plaintiff header (.tpl-cmpl-phead): same size/weight so the rows don't compact unevenly */
    .tpl-cmpl-dfield .combo, .tpl-cmpl-dfield .gs-wrap, .tpl-cmpl-dfield select, .tpl-cmpl-dfield input { width:100%; box-sizing:border-box; }
    /* standardize EVERY control to one height = the Court/Courthouse fields (28px) so the whole left side matches (Joshua) */
    .tpl-cmpl-drow .comboinput, .tpl-cmpl-drow .tpl-deporow-input, .tpl-cmpl-drow .gs-input { height:28px; box-sizing:border-box; padding:8px 10px; }
    .tpl-cmpl-drow .tpl-deporow-input:disabled, .tpl-cmpl-drow .comboinput[readonly] { opacity:0.6; cursor:not-allowed; }
    .tpl-cmpl-drow.cmpl-locked { border:1.5px solid var(--gold); border-radius:8px; padding:8px; box-shadow:0 0 0 1px rgba(201,168,76,0.25); }  /* gold box = locked/added */
    .tpl-cmpl-dact { flex:0 0 auto; display:flex; gap:5px; align-items:center; align-self:flex-start; }   /* Lock/Edit/✕ live in the FIRST subheader (label) row, not down in the field row */
    /* studio defendant adversary combo (studio-scoped — the #addmodal .combo* rules don't reach #templates) */
    .tpl-cmpl-drow .combo { position:relative; }
    .tpl-cmpl-drow .comboinput { width:100%; box-sizing:border-box; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:'DM Sans',sans-serif; font-size:0.82rem; padding:7px 10px; border-radius:6px; }
    .tpl-cmpl-drow .comboinput:focus { outline:none; border-color:var(--gold); }
    .tpl-cmpl-drow .combolist { max-height:210px; overflow:auto; background:var(--surface-2); border:1px solid var(--gold); border-radius:6px; box-shadow:0 6px 22px rgba(0,0,0,.55); }
    .tpl-cmpl-drow .comboopt { padding:5px 9px; font-size:0.8rem; cursor:pointer; }
    .tpl-cmpl-drow .comboopt:hover { background:var(--surface-3); }
    .tpl-cmpl-drow .comboempty { padding:6px 9px; font-size:0.78rem; color:var(--muted); }
    /* folder tabs (white): the tabs sit on the COA box's top edge; the active tab merges into the box */
    .tpl-cmpl-coatabs { display:flex; gap:4px; margin-bottom:0; }
    .tpl-cmpl-coatab { background:var(--bg); border:1px solid var(--border); border-bottom:none; color:var(--muted); border-radius:7px 7px 0 0; padding:7px 20px; font-size:0.82rem; cursor:pointer; font-family:'DM Sans',sans-serif; margin-bottom:-1px; }   /* UNSELECTED = darker than the panel (recessed) */
    .tpl-cmpl-coatab:hover { color:var(--text); }
    .tpl-cmpl-coatab.active { background:var(--surface); color:var(--text); font-weight:600; }   /* SELECTED = same bg as .tpl-cats-box → looks attached/open to the folder body */
    .tpl-twocol--complaints .tpl-cats-box { border-top-left-radius:0; border-top-right-radius:0; }   /* square top so the tabs form the folder edge */
    .tpl-twocol--complaints .tpl-cats-toolbar { background:var(--surface); }   /* unify the search strip with the box body so the selected tab reads as one cohesive panel (the input keeps its own border) */
    .tpl-mx-help, .tpl-mx-wrap { padding:0 2px; } .tpl-mx-help { color:var(--muted); font-size:0.78rem; margin:8px 2px 10px; }
    .tpl-mx-wrap { overflow:auto; max-height:100%; }
    /* complaints right column: keep the COA label + Select/Target tabs + the matrix HEADERS fixed; scroll only the inner matrix/list (Joshua) */
    .tpl-body--twocol .tpl-twocol--complaints { grid-template-rows:1fr; }   /* fill the studio height: the grid row stretches to the flex:1 container so the right column has room to grow (was an auto row → content-height → empty space below) */
    .tpl-body--twocol .tpl-twocol--complaints .tpl-twocol-right { overflow:hidden; display:flex; flex-direction:column; align-self:stretch; }   /* stretch into the full-height row (base .tpl-twocol is align-items:start) so the SOF textarea / cats panel fills the available space */
    .tpl-twocol--complaints .tpl-twocol-right > .tpl-field { display:flex; flex-direction:column; min-height:0; flex:1 1 auto; margin-bottom:0; }
    .tpl-twocol--complaints .tpl-twocol-right > .tpl-field > .tpl-field-label, .tpl-twocol--complaints .tpl-twocol-right .tpl-cmpl-coatabs { flex:0 0 auto; }
    .tpl-twocol--complaints .tpl-twocol-right .tpl-cats-box { display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
    .tpl-twocol--complaints .tpl-mx-help, .tpl-twocol--complaints .tpl-twocol-right .tpl-cats-toolbar { flex:0 0 auto; }
    .tpl-twocol--complaints .tpl-mx-wrap { flex:1 1 auto; min-height:0; max-height:none; }
    .tpl-body--twocol .tpl-twocol--complaints .tpl-cats-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; max-height:none; }
    .tpl-mx-grid thead { position:sticky; top:0; z-index:5; }   /* both header rows stick as a block while the body scrolls */
    table.tpl-mx-table { border-collapse:collapse; font-size:0.78rem; width:100%; font-family:'DM Sans',sans-serif; }   /* <table> doesn't inherit the body family → set it so the COA names match the Causes-of-Action tab (was falling back to UA serif) */
    .tpl-mx-table th, .tpl-mx-table td { border:1px solid var(--border); padding:5px 8px; text-align:center; }
    .tpl-mx-table th { color:var(--gold); font-weight:600; background:var(--surface-2); position:sticky; top:0; }
    .tpl-mx-table td.tpl-mx-name, .tpl-mx-table th.tpl-mx-name { text-align:left; color:var(--text); font-weight:400; white-space:nowrap; }   /* normal weight to match the Causes-of-Action list rows (.tpl-cat-row) — was 600 (read as bolder) */
    .tpl-mx-table input { width:13px; height:13px; accent-color:#1a73e8; cursor:pointer; }   /* edit 7: studio Target matrix = small + BLUE, matching the COA Select screen checkboxes */
    .tpl-mx-table input:disabled { opacity:0.65; cursor:default; }   /* 1 plaintiff × 1 defendant → locked ON */
    /* edit 5.1: the Target matrix mirrors the prelit->lit wizard's matrix (plaintiff super-header, white headers, gold separator + statute refs) */
    .tpl-mx-grid th { position:static; }   /* two header rows → don't stack-stick both at top:0 */
    .tpl-mx-grid .tpl-mx-corner { background:var(--surface); border:none; }   /* OPAQUE (was transparent) so scrolling COA names don't bleed through the sticky header */
    .tpl-mx-grid .tpl-mx-ptop { color:var(--text); font-weight:700; font-size:0.82rem; background:var(--surface-3); }
    .tpl-mx-grid .tpl-mx-dtop { color:var(--text); font-weight:600; font-size:0.72rem; background:var(--surface-2); }
    .tpl-mx-grid td.tpl-mx-sep, .tpl-mx-grid th.tpl-mx-sep { border-left:2px solid var(--gold) !important; }
    .tpl-mx-grid td:not(.tpl-mx-name), .tpl-mx-grid th:not(.tpl-mx-corner):not(.tpl-mx-name) { width:120px; min-width:120px; }   /* every party column the same width (headers wrap to fit) so the grid reads evenly */
    .tpl-mx-src { color:var(--muted); font-weight:400; font-size:0.92em; }
    .tpl-mx-grid .tpl-mx-name .tpl-mx-src { display:block; padding-left:14px; margin-top:1px; }   /* legal source on its own slightly-indented muted line → frees horizontal width for the name */
    /* freeze the COA-name column: horizontal scroll starts at the gold line, so the COA names stay locked while the party columns scroll */
    .tpl-mx-grid td.tpl-mx-name { position:sticky; left:0; z-index:3; background:var(--surface); box-shadow:2px 0 0 0 var(--gold); }
    .tpl-mx-grid th.tpl-mx-corner { position:sticky; left:0; z-index:6; box-shadow:2px 0 0 0 var(--gold); }   /* corner = top-sticky (thead) + left-sticky → above both header and body */
    /* ── Shared party-entry component (Complaint Studio + prelit→lit cascader) ── committed summary row + inline editor.
       Base structure is the .pl-* classes; each surface adds .pl-surf-studio / .pl-surf-lit for its own styling. */
    .pl-host { display:flex; flex-direction:column; gap:6px; }
    /* Lucide icon normalizer — every LU() icon carries .lu; size follows the text (1em), stroke baked 2px@24. More-specific
       classes (e.g. .pl-ico) or container svg rules override the size where a surface needs a fixed px. */
    .lu { width:1em; height:1em; display:inline-block; vertical-align:-0.15em; flex:none; }
    /* per-surface size: the icon-only shell/toolbar buttons render at 16px (their old px size), not 1em */
    .filtertgl .lu, .profile-btn .lu, .nav-burger .lu, .side-expand .lu, .side-collapse .lu { width:16px; height:16px; }
    .tpl-cmpl-upload .lu, .tpl-cmpl-deldraft .lu { width:17px; height:17px; }   /* studio header: attachment + trash */
    .tpl-cmpl-drop-inner .lu { width:52px; height:52px; }                       /* the big drop-overlay upload icon */
    .setflt-row .lu, .setflt-ico, .fltfloat .lu { width:13px; height:13px; vertical-align:-0.12em; }   /* boolean value glyphs (check/x/square) in the filter UI */
    .pl-ico { width:15px; height:15px; flex:0 0 auto; }
    .pl-row.pl-summary { display:flex; align-items:center; gap:8px; padding:6px 9px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); }
    .pl-summary .pl-lockico { color:var(--gold); display:flex; }
    .pl-summary .pl-facts { flex:1; min-width:0; font-size:0.82rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .pl-summary .pl-facts .pl-aka, .pl-summary .pl-facts .pl-meta, .pl-summary .pl-facts .pl-sep { color:var(--muted); }
    /* edit 7 follow-up: dropdown option text in WHITE across the party component (combo + goldSelect), studio + cascader */
    .pl-field .pl-combo .combolist .comboopt, .pl-field .pl-combo .combolist { color:var(--text); }
    .pl-rowact { flex:0 0 auto; display:flex; gap:2px; }
    .pl-rowact button { background:transparent; border:none; cursor:pointer; padding:4px; border-radius:6px; display:flex; color:var(--muted); }
    .pl-rowact .pl-edit:hover { color:var(--gold); background:var(--surface-3); }
    .pl-rowact .pl-del { color:#b06b6b; } .pl-rowact .pl-del:hover { color:#d08a8a; background:var(--surface-3); }
    /* a soft-removed party row: greyed + struck, with a Restore (circular arrow) button */
    .pl-row.pl-removed { background:var(--surface); border-style:dashed; }
    .pl-removed .pl-facts { text-decoration:line-through; color:var(--muted); }
    .pl-removed .pl-removed-tag { text-decoration:none; color:#b06b6b; font-style:italic; margin-left:6px; }
    .pl-rowact .pl-restore { color:#5aa2e6; } .pl-rowact .pl-restore:hover { color:#7fbaf0; background:var(--surface-3); }
    .pl-row.pl-editor { border:1.5px solid var(--gold); border-radius:8px; padding:10px; background:transparent; box-shadow:0 0 0 1px rgba(201,168,76,0.25); }  /* card TRANSPARENT: its non-field area inherits the container (modal --surface OR the studio's darker --bg) so it never reads lighter than the page; only the --surface-2 fields pop (Joshua) */
    .pl-fields { display:flex; flex-wrap:wrap; gap:8px 10px; }
    .pl-field { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
    .pl-field > span { font-size:0.72rem; font-weight:600; color:var(--muted); text-align:center; line-height:1.3; }   /* muted labels like every other form header; tight to their field */
    /* unify EVERY control (text input · combo · goldSelect) to one look so Type/State don't sit disjointed from Name/DBA */
    .pl-field .pl-f, .pl-field .combo, .pl-field .comboinput, .pl-field .gs-wrap { width:100%; box-sizing:border-box; }
    .pl-field .pl-f, .pl-field .comboinput, .pl-field .gs-input { height:28px; box-sizing:border-box; background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:6px; font-family:'DM Sans',sans-serif; font-size:0.82rem; }
    .pl-field .pl-f, .pl-field .comboinput { padding:6px 9px; }
    .pl-field .pl-f:focus, .pl-field .comboinput:focus, .pl-field .gs-input:focus { outline:none; border-color:var(--gold); }
    .pl-field .pl-f:disabled, .pl-field .comboinput[readonly], .pl-field .gs-input:disabled { opacity:0.55; cursor:not-allowed; }
    /* defendant editor = the old card layout, FORCED to 2 rows: row 1 Name + Type, row 2 DBA + State.
       calc bases make Name+Type and DBA+State each fill 100% so the third field always wraps (no 3-on-a-row). */
    .pl-field--name { flex:1 1 calc(100% - 300px); } .pl-field--type { flex:0 0 290px; }
    .pl-field--dba { flex:1 1 calc(100% - 300px); } .pl-field--state { flex:0 0 290px; }   /* row 2 matches row 1 distribution (DBA=Name, State=Type) */
    /* plaintiff editor: Name / "AKA" Alias at 55 / 45 — overrides the defendant --name calc width within plaintiff lists */
    .pl-studio-p .pl-field--name, .pl-lit-p .pl-field--name { flex:55 1 0; min-width:0; }
    .pl-studio-p .pl-field--aka, .pl-lit-p .pl-field--aka { flex:45 1 0; min-width:0; }
    /* recovery party-allocation editor: Plaintiff · Defendant · Amount on one row (Pre-Lit adds Type/State, which wrap) */
    /* recovery allocation editor (UNLOCKED): Plaintiff on its own row; the Defendant + its Type + State on ONE row;
       Amount on its own row. Labels left-aligned. The LOCKED row is the compact one-line summary. (Lit has no
       Type/State, so Defendant grows to fill its row → Plaintiff / Defendant / Amount each on their own row.) */
    .pl-surf-rec .pl-field--plaintiff, .pl-surf-rec .pl-field--amount { flex:1 1 100%; }
    .pl-surf-rec .pl-field--defendant { flex:2 1 40%; min-width:200px; }
    .pl-surf-rec .pl-field--type, .pl-surf-rec .pl-field--state { flex:1 1 22%; min-width:130px; }
    .pl-surf-rec .pl-field > span { text-align:left; }   /* ALL alloc headers left-aligned to the field's left edge (Joshua) — including Defendant/Type/State */
    /* settlement wizard: field CONTENTS stay white even when readonly/disabled (fixed-identity rows) — labels are the muted ones (Joshua) */
    .pl-surf-rec .pl-f:disabled, .pl-surf-rec .pl-f[readonly], .pl-surf-rec .comboinput[readonly] { opacity:1; color:var(--text); -webkit-text-fill-color:var(--text); }
    /* recovery Details: Date + Amount share a row (the widened wizard) */
    #addmodal .rec-detrow { display:flex; gap:12px; }
    #addmodal .rec-detrow .fld { flex:1; min-width:0; }
    /* the defendant-name combo dropdown: FLOAT it (absolute) + border it so it doesn't push the layout (the "broken" overflow) */
    .pl-field .pl-combo { position:relative; }
    .pl-field .pl-combo .combolist { position:absolute; left:0; right:0; top:100%; z-index:40; margin-top:2px; max-height:230px; overflow:auto; background:var(--surface-2); border:1px solid var(--gold); border-radius:6px; box-shadow:0 6px 22px rgba(0,0,0,.55); }
    .pl-field .pl-combo .comboopt { padding:6px 10px; font-size:0.82rem; cursor:pointer; }
    .pl-field .pl-combo .comboopt:hover { background:var(--surface-3); }
    .pl-field .pl-combo .comboempty { padding:6px 10px; font-size:0.8rem; color:var(--muted); }
    /* D-55 (push 6 item 4): the link status sits INSIDE the name field, offset right of the typed name — muted, a very
       thin rounded outline, absolutely placed so it adds no height or width to the field or its row. */
    .adv-namebox { position:relative; }
    .pl-combo .adv-linked, .adv-namebox .adv-linked { position:absolute; right:7px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; gap:4px; padding:1px 8px 1px 6px; border:1px solid var(--border); border-radius:999px; background:var(--surface-2); color:var(--muted); font-size:0.68rem; line-height:1.35; white-space:nowrap; pointer-events:none; }
    .pl-combo .adv-linked .lu, .adv-namebox .adv-linked .lu { width:11px; height:11px; }
    /* footer + add = ICON-ONLY (no text): delete (red) + lock (gold) in the editor; "+" to add */
    .pl-footer { display:flex; justify-content:flex-end; align-items:center; gap:6px; margin-top:10px; }
    .pl-footer button { background:transparent; border:1px solid transparent; border-radius:6px; padding:5px 11px; cursor:pointer; display:flex; align-items:center; }   /* border appears only on hover */
    .pl-footer .pl-ico { width:16px; height:16px; }
    .pl-footer .pl-remove { color:var(--muted); } .pl-footer .pl-remove:hover { color:var(--text); border-color:var(--border); background:var(--surface-3); }   /* muted grey like the pencil, not red */
    .pl-footer .pl-lock { color:var(--gold); } .pl-footer .pl-lock:hover { border-color:var(--gold); background:rgba(201,168,76,0.12); }
    .pl-add { align-self:flex-start; background:transparent; border:1px dashed var(--border); color:var(--gold); border-radius:7px; padding:5px 10px; cursor:pointer; display:flex; align-items:center; margin-top:2px; }
    .pl-add:hover { border-color:var(--gold); background:var(--surface-2); }
    .pl-add .pl-ico { width:16px; height:16px; }
    .pl-empty { color:var(--muted); font-size:0.8rem; padding:6px 2px; }
    .pl-help-ico { display:inline-flex; vertical-align:middle; color:var(--gold); } .pl-help-ico .pl-ico { width:14px; height:14px; }   /* inline lock glyph in helper text (replaces the word "Lock") */
    .tpl-cmpl-hdrrow { justify-content:flex-end; gap:12px; }   /* group the indicator next to the Upload button (right) */
    .tpl-cmpl-draftok { background:rgba(45,164,78,0.15); color:#7ed399; font-size:0.75rem; font-weight:600; white-space:nowrap; padding:6px 12px; border-radius:4px; letter-spacing:0.01em; }   /* edit 5 C4: match the green success banner (.tpl-prepop-banner.success) — leading ✓ */
    .tpl-cmpl-upload { background:none; border:none; color:var(--muted); cursor:pointer; padding:2px 4px; display:inline-flex; align-items:center; line-height:0; flex-shrink:0; }   /* muted attachment (Joshua) */
    .tpl-cmpl-upload:hover { color:var(--text); }
    /* PUSH 17 A-3 (mockup v07 row 8): with no draft saved, the whole tag is the load button — the paperclip and "Load Draft".
       Not .tpl-cmpl-upload: that class's line-height:0 collapses text. */
    .tpl-cmpl-loaddraft { display:inline-flex; align-items:center; gap:6px; background:none; color:var(--muted); border:1px dashed #3a3a3a; border-radius:4px; padding:5px 11px; font-size:0.75rem; font-weight:600; cursor:pointer; white-space:nowrap; }
    .tpl-cmpl-loaddraft:hover { color:var(--text); border-color:#555; }
    .tpl-cmpl-loaddraft .lu { width:15px; height:15px; }
    .tpl-cmpl-deldraft { background:none; border:none; color:var(--muted); cursor:pointer; padding:2px 4px; display:inline-flex; align-items:center; line-height:0; }   /* muted trash (Joshua) */
    .tpl-cmpl-deldraft:hover { color:#e06b6b; }   /* destructive (trash) on hover */
    /* v0.5a ETL — full-panel Slack-style drag-drop overlay over the studio; shown only on drag (tplCmplWireDnD). */
    .tpl-cmpl-drop { position:fixed; inset:0; z-index:1400; display:none; align-items:center; justify-content:center;
      background:rgba(0,0,0,0.55); backdrop-filter:blur(2px); pointer-events:none; padding:24px; }
    .tpl-cmpl-drop.show { display:flex; }
    .tpl-cmpl-drop-inner { display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--gold);   /* color = the gold cloud icon (currentColor) */
      border:2px dashed var(--gold); border-radius:14px; padding:48px 72px; background:var(--surface-3); text-align:center; }
    .tpl-cmpl-drop-h { font-size:1.35rem; font-weight:700; font-family:'DM Sans',sans-serif; color:var(--text); }   /* light heading (was undefined --text-1 → inherited gold) */
    .tpl-cmpl-drop-sub { font-size:0.9rem; color:var(--muted); }   /* muted subtext */
    .tpl-cmpl-drop-sub b { color:var(--gold); font-weight:600; }   /* the "click … to browse" call-to-action in gold */
    .tpl-twocol-left, .tpl-twocol-right { min-width:0; }
    .tpl-body--twocol { display:flex; flex-direction:column; height:100%; min-height:0; padding:0; }
    .tpl-body--twocol .tpl-twocol { flex:1; min-height:0; padding:14px 16px 0 16px; box-sizing:border-box; }
    @media (min-width:721px) {
      .tpl-body--twocol .tpl-twocol-left, .tpl-body--twocol .tpl-twocol-right { overflow-y:auto; max-height:100%; padding-right:4px; padding-bottom:6px; }
      .tpl-body--twocol .tpl-twocol-left::-webkit-scrollbar, .tpl-body--twocol .tpl-twocol-right::-webkit-scrollbar { width:6px; }
      .tpl-body--twocol .tpl-twocol-left::-webkit-scrollbar-thumb, .tpl-body--twocol .tpl-twocol-right::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
    }
    .tpl-body--twocol .tpl-footer { flex-shrink:0; margin:0; padding:6px 16px; background:var(--bg); }

    .tpl-dtype-stack { display:flex; flex-direction:column; gap:6px; }
    .tpl-dtype-stack-btn { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:6px; cursor:pointer; font-size:0.82rem; color:var(--text); background:var(--surface); }
    .tpl-dtype-stack-btn input { margin:0; accent-color:#1a73e8; }   /* boolean checkboxes = blue */
    .tpl-radio-row { display:flex; gap:8px; }
    .tpl-radio-btn { flex:1; padding:8px 10px; border:1px solid var(--border); border-radius:6px; cursor:pointer; font-size:0.82rem; color:var(--text); background:var(--surface); display:flex; align-items:center; gap:6px; }
    .tpl-radio-btn input { margin:0; accent-color:var(--gold); }

    .tpl-list { display:flex; flex-direction:column; gap:6px; }
    .tpl-empty-category { margin:10px 0; padding:12px 16px; background:rgba(220,53,69,0.15); color:#f08a96; border-left:3px solid #dc3545; border-radius:6px; font-size:0.85rem; line-height:1.55; }
    .tpl-list-row { display:flex; align-items:center; justify-content:space-between; width:100%; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:6px; font-size:0.86rem; color:var(--text); cursor:pointer; text-align:left; font-family:'DM Sans',sans-serif; }
    .tpl-list-row:hover { background:var(--surface-2); }
    .tpl-list-row.expanded { border-radius:6px 6px 0 0; background:var(--surface-2); }
    .tpl-list-row .chev { color:var(--muted); font-size:0.85rem; transition:transform 0.15s ease; display:inline-block; }
    .tpl-list-row.expanded .chev { transform:rotate(180deg); }
    .tpl-expand-panel { padding:14px 16px; background:var(--surface-2); border:1px solid var(--border); border-top:none; border-radius:0 0 6px 6px; }
    .tpl-expand-hint { padding:8px 12px; background:var(--surface); border-radius:4px; font-size:0.72rem; color:var(--muted); line-height:1.5; margin-top:4px; margin-bottom:12px; }

    .tpl-typeahead { position:relative; }
    .tpl-typeahead-dd { display:none; position:absolute; top:100%; left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:0 0 6px 6px; max-height:200px; overflow-y:auto; z-index:15; box-shadow:0 4px 12px rgba(0,0,0,0.3); }
    .tpl-typeahead-dd.open { display:block; }
    .tpl-typeahead-dd .src { padding:6px 12px; font-size:0.7rem; color:var(--muted); background:var(--surface-3); border-bottom:1px solid var(--border); }
    .tpl-typeahead-dd .item { padding:7px 12px; font-size:0.83rem; cursor:pointer; border-bottom:1px solid var(--border); color:var(--text); }
    .tpl-typeahead-dd .item:last-child { border-bottom:none; }
    .tpl-typeahead-dd .item:hover { background:var(--surface-3); }   /* universal muted dropdown hover */
    .tpl-typeahead-dd .empty { padding:10px 12px; font-size:0.75rem; color:var(--muted); }

    .tpl-cats-box { border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--surface); }
    .tpl-cats-toolbar { padding:8px 10px; background:var(--surface-3); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
    .tpl-cats-toolbar input { flex:1; height:28px; font-size:0.78rem; padding:0 8px; border:1px solid var(--border); border-radius:4px; background:var(--surface); color:var(--text); font-family:'DM Sans',sans-serif; }
    .tpl-cats-collapse-btn { font-size:0.7rem; padding:4px 10px; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:4px; cursor:pointer; font-family:'DM Sans',sans-serif; }
    .tpl-cats-collapse-btn:hover { background:var(--surface-2); }
    .tpl-cats-scroll { max-height:360px; overflow-y:auto; }
    .tpl-cats-scroll::-webkit-scrollbar { width:6px; }
    .tpl-cats-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
    .tpl-body--twocol .tpl-cats-scroll { max-height:none; overflow-y:visible; }
    .tpl-cats-scroll--multi { column-count:2; column-gap:14px; }
    .tpl-cats-scroll--multi > details { break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; margin-bottom:6px; }
    .tpl-cat-group { border-bottom:1px solid var(--border); }
    .tpl-cat-group:last-child { border-bottom:none; }
    .tpl-cat-group summary { list-style:none; padding:8px 10px; font-size:0.78rem; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; color:var(--text); background:var(--surface); }
    .tpl-cat-group summary::-webkit-details-marker { display:none; }
    .tpl-cat-group summary:hover { background:var(--surface-2); }
    .tpl-cat-group-checked-badge { font-size:0.65rem; color:var(--gold); background:rgba(201,168,76,0.15); padding:2px 6px; border-radius:4px; margin-left:6px; font-weight:500; }
    .tpl-cat-group-body { padding:4px 10px 10px 10px; }
    .tpl-cat-row { display:block; font-size:0.78rem; padding:3px 0; color:var(--text); }
    .tpl-cat-row.child { padding-left:20px; }
    .tpl-cat-row input { margin-right:6px; accent-color:#1a73e8; }   /* boolean checkboxes = blue */

    /* Prepop banner — three variants (dark base). */
    .tpl-prepop-banner { position:relative; margin-bottom:8px; padding:8px 90px 8px 12px; border-radius:4px; font-size:0.72rem; color:var(--text); line-height:1.5; }
    .tpl-prepop-banner.success { background:rgba(45,164,78,0.15); color:#7ed399; }
    .tpl-prepop-banner.warning { background:rgba(201,168,76,0.15); color:var(--gold); }
    .tpl-prepop-banner.muted { background:var(--surface-3); color:var(--muted); }
    .tpl-prepop-dismiss { position:absolute; top:4px; right:6px; background:none; border:none; padding:2px 5px; font-size:0.75rem; line-height:1; cursor:pointer; color:inherit; opacity:0.55; border-radius:4px; }
    .tpl-prepop-dismiss:hover { opacity:1; background:rgba(255,255,255,0.08); }
    .tpl-prepop-action { top:50%; transform:translateY(-50%); opacity:1; text-decoration:underline; font-size:0.72rem; color:inherit; }
    .tpl-prepop-action:hover { opacity:1; background:rgba(255,255,255,0.08); }

    /* Form-error banner. */
    .tpl-form-error-wrap { padding:0 20px; background:var(--bg); }
    .tpl-form-error-wrap:empty { display:none; }
    .tpl-form-error-banner { position:relative; margin:10px 0 0 0; padding:10px 36px 10px 14px; border-radius:6px; font-size:0.8rem; line-height:1.55; border-left:3px solid #dc3545; background:rgba(220,53,69,0.15); color:#f08a96; }
    .tpl-form-error-banner strong { font-weight:600; }
    .tpl-form-error-banner.warning { border-left-color:var(--gold); background:rgba(201,168,76,0.15); color:var(--gold); }   /* persistent ETL import notice — warning tone */
    .tpl-form-error-dismiss { position:absolute; top:6px; right:8px; background:none; border:none; padding:4px 6px; font-size:0.85rem; line-height:1; cursor:pointer; color:inherit; opacity:0.55; border-radius:4px; }
    .tpl-form-error-dismiss:hover { opacity:1; background:rgba(255,255,255,0.08); }

    /* Footer + buttons. */
    .tpl-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); align-items:center; }
    .tpl-btn-primary { background:var(--surface-3); color:var(--gold); border:1px solid var(--gold); padding:7px 18px; font-size:0.82rem; font-weight:600; border-radius:6px; cursor:pointer; font-family:'DM Sans',sans-serif; }
    .tpl-btn-primary:hover { filter:brightness(1.25); }
    .tpl-btn-primary:disabled { opacity:0.5; cursor:not-allowed; }
    .tpl-btn-success { background:rgba(45,164,78,0.20); color:#7ed399; border:1px solid #2da44e; padding:7px 18px; font-size:0.82rem; font-weight:600; border-radius:6px; cursor:pointer; font-family:'DM Sans',sans-serif; }
    .tpl-btn-success:hover { background:rgba(45,164,78,0.30); }
    .tpl-btn-error { background:rgba(220,53,69,0.20); color:#f08a96; border:1px solid #dc3545; padding:7px 18px; font-size:0.82rem; font-weight:600; border-radius:6px; cursor:pointer; font-family:'DM Sans',sans-serif; }
    .tpl-btn-error:hover { background:rgba(220,53,69,0.30); }
    .tpl-btn-spinner { display:inline-block; width:11px; height:11px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:tpl-spin 0.7s linear infinite; vertical-align:-2px; margin-right:6px; opacity:0.7; }
    .tpl-btn-secondary { background:var(--surface); color:var(--text); border:1px solid var(--border); padding:7px 14px; font-size:0.8rem; border-radius:6px; cursor:pointer; font-family:'DM Sans',sans-serif; }
    .tpl-btn-secondary:hover { background:var(--surface-2); }

    .tpl-loading { text-align:center; padding:40px 20px; color:var(--muted); font-size:0.85rem; }

    /* PMK topics box. */
    .tpl-pmk-box { border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--surface); }
    .tpl-pmk-help { font-size:0.7rem; color:var(--muted); margin:0 0 6px 0; }
    .tpl-pmk-cat { border-bottom:1px solid var(--border); }
    .tpl-pmk-cat:last-child { border-bottom:none; }
    .tpl-pmk-cat-summary { list-style:none; padding:9px 10px; font-size:0.82rem; cursor:pointer; display:flex; align-items:center; gap:8px; color:var(--text); background:var(--surface); }
    .tpl-pmk-cat-summary::-webkit-details-marker { display:none; }
    .tpl-pmk-cat-summary:hover { background:var(--surface-2); }
    .tpl-pmk-cat-check { display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; margin:-10px -6px -10px -8px; border-radius:4px; }
    .tpl-pmk-cat-check:hover { background:rgba(255,255,255,0.06); }
    .tpl-pmk-cat-check input { margin:0; cursor:pointer; transform:scale(1.2); transform-origin:center; accent-color:#1a73e8; }   /* boolean checkboxes = blue */
    .tpl-pmk-cat-name { flex:1; font-weight:500; }
    .tpl-pmk-cat-count { font-size:0.7rem; color:var(--muted); }
    .tpl-pmk-cat-chev { font-size:0.78rem; color:var(--muted); transition:transform 0.15s ease; }
    .tpl-pmk-cat[open] > .tpl-pmk-cat-summary .tpl-pmk-cat-chev { transform:rotate(180deg); }
    .tpl-pmk-preview { padding:6px 12px 10px 36px; background:var(--surface-3); border-top:1px solid var(--border); }
    .tpl-pmk-preview-row { font-size:0.72rem; color:var(--muted); padding:4px 0; line-height:1.5; }
    .tpl-pmk-preview-row strong { color:var(--text); font-weight:600; }
    #reports { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; background:var(--bg); }
    #rpt-topbar { display:flex; align-items:center; gap:var(--tabbar-gap); background:var(--surface); border-bottom:1px solid var(--border); padding:0 12px 0 calc(var(--tabbar-inset) - var(--tabbar-tab-pad)); height:var(--tabbar-h); flex:none; overflow-x:auto; }   /* the tab bar standard (item 14) */
    .reports-toolbar { background:var(--surface); border-bottom:1px solid var(--border); padding:4px 12px;
      display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0; }
    .rpt-cats { display:flex; gap:var(--tabbar-gap); align-items:center; }
    /* Report GROUPS match the Sheets top groups (.grp-tab): plain text that turns gold when
       active — NOT a filled pill (Joshua: unify groups across Sheets + Reports). */
    /* WO §C: in-surface tab controls converted from <button> to <a> render identically (inline-block, no underline) */
    a.grp-tab, a.sheet-tab, a.rpt-cat-pill, a.rpt-tab, a.tpl-tab, a.tpl-cat { display:inline-block; text-decoration:none; }
    a.tpl-list-row { text-decoration:none; } /* keeps the class's own display:flex; just strips the anchor underline */
    .rpt-cat-pill { background:none; border:none; color:var(--muted); font-family:'DM Sans',sans-serif; font-size:0.78rem;
      font-weight:600; padding:4px var(--tabbar-tab-pad); border-radius:6px; cursor:pointer; white-space:nowrap; transition:all .15s; }
    .rpt-cat-pill:hover { color:var(--text); background:var(--surface-2); }
    .rpt-cat-pill.active { color:var(--gold); font-weight:700; background:none; }
    .rpt-cat-pill.dev { color:#5fae6a; }                              /* admin-only reports (Diagnostic) = green to match the dev/admin sheets */
    .rpt-cat-pill.dev:hover { color:#84d68f; background:var(--surface-2); }
    .rpt-cat-pill.dev.active { color:#84d68f; font-weight:700; background:none; }
    /* Tabs row: report selectors CENTERED (offset from the pills above), Download Excel right (Joshua) */
    .rpt-tabsrow { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0; padding:0 12px; height:var(--bar-h); box-sizing:border-box; }   /* push 13 F-15 */
    .rpt-tabs { display:flex; gap:var(--tabbar-gap); flex-wrap:wrap; justify-content:center; }
    .rpt-tab { padding:4px var(--tabbar-tab-pad); font-size:.78rem; font-weight:600; cursor:pointer; color:var(--muted);
      border:none; border-radius:6px; background:none; font-family:'DM Sans',sans-serif; transition:all .15s; white-space:nowrap; }
    .rpt-tab:hover { color:var(--text); background:var(--surface-2); }
    .rpt-tab.active { color:var(--gold); font-weight:700; background:none; }
    .rpt-tab.dev { color:#5fae6a; }                                  /* admin-only reports (Diagnostic) = green to match the dev/admin sheets */
    .rpt-tab.dev:hover { color:#84d68f; }
    .rpt-tab.dev.active { color:#84d68f; }
    .reports-body { flex:1; overflow-y:auto; padding:0 12px 14px 12px; }
    .rpt-loading { text-align:center; padding:40px; color:var(--muted); }
    .rpt-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.83rem; background:var(--surface); border-radius:8px; border:1px solid var(--border); }
    .rpt-table thead { position:sticky; top:0; z-index:10; }
    .rpt-table thead tr { position:sticky; top:0; z-index:10; }
    .rpt-table th { background:var(--surface-3); color:var(--gold); padding:8px 14px; text-align:left; font-size:.72rem; font-weight:700;
      letter-spacing:.4px; text-transform:uppercase; white-space:nowrap; position:sticky; top:0; z-index:10; box-shadow:0 1px 0 var(--border); }
    .rpt-table td { padding:7px 14px; border-bottom:1px solid var(--border); color:var(--text); font-size:.83rem; line-height:1.4; position:relative; z-index:0; background:var(--surface); }
    .rpt-table tr:last-child td { border-bottom:none; }
    .rpt-table tr:hover td { background:var(--surface-2); }
    /* Date-band rows in WHITE (Joshua: matches the app-script calendar) */
    .rpt-date-group { background:var(--surface-2) !important; padding:8px 14px; font-size:.82rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text) !important; border-bottom:1px solid var(--border); }
    .rpt-section-header { font-size:.88rem; font-weight:600; color:var(--gold); margin:20px 0 8px; padding-bottom:6px; border-bottom:2px solid var(--gold); }
    .rpt-window-btn { padding:1px 10px; height:22px; border-radius:20px; font-size:.74rem; cursor:pointer; border:1px solid var(--border);
      background:var(--surface-2); color:var(--muted); font-family:'DM Sans',sans-serif; transition:all .15s; }
    .rpt-window-btn.active { background:var(--gold); color:var(--bg); border-color:var(--gold); }
    .rpt-export-btn { margin-left:auto; padding:2px 12px; height:24px; background:var(--gold); color:var(--bg); border:none; border-radius:6px;
      font-size:.74rem; font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .2s; }
    .rpt-export-btn:hover { background:#b8942a; }
    .rpt-export-btn:disabled { opacity:.5; cursor:not-allowed; }
    /* Reports Download-Excel = icon-only, INVERTED (gold sheet on dark, gold border); bigger glyph (Joshua) */
    #rpt-export { height:24px; padding:0 7px; display:inline-flex; align-items:center; justify-content:center; background:#161616; color:var(--gold); border:1px solid var(--gold); }   /* same size as the Sheets grid export (.filtertgl) */
    #rpt-export .lu { width:16px; height:16px; }
    #rpt-export:hover { background:#242424; border-color:var(--gold); }
    .rpt-filter-sel { padding:3px 9px; border:1px solid var(--border); border-radius:6px; font-size:.78rem; font-family:'DM Sans',sans-serif; background:var(--surface-2); color:var(--text); }
    .rpt-action-subheader { padding:6px 12px; font-size:.8rem; font-weight:700; letter-spacing:.4px; border-radius:6px;
      margin:12px 0 6px 0; border:1px solid var(--border); background:var(--surface-2); color:var(--gold); }
    .rpt-status-pill { display:inline-block; padding:2px 10px; border-radius:4px; font-size:.72rem; font-weight:600; white-space:nowrap; border:1px solid rgba(0,0,0,0.06); }
    .rpt-status-subheader { padding:6px 12px; font-size:.8rem; font-weight:700; letter-spacing:.4px; border-radius:6px; margin:12px 0 6px 0; border:1px solid rgba(0,0,0,0.08); }
    .rpt-tier-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.72rem; font-weight:700; white-space:nowrap; letter-spacing:.3px; }
    .rpt-tier-1 { background:rgba(231,76,60,0.18); color:#f08080; }
    .rpt-tier-2 { background:rgba(230,148,40,0.18); color:#e8b070; }
    .rpt-tier-3 { background:var(--surface-2); color:var(--muted); }
    .rpt-forthcoming-banner { background:var(--surface-2); color:var(--gold); padding:10px 14px; font-size:.82rem; font-weight:700;
      letter-spacing:.4px; text-transform:uppercase; border-radius:8px 8px 0 0; border:1px solid var(--border); border-bottom:none; }
    .rpt-overdue-cell { background:rgba(231,76,60,0.18) !important; color:#f08080 !important; font-weight:700 !important; }
    /* Pre-Lit report band system + overdue/upcoming section rows — legacy Index.txt
       band CSS, dark-mode values ported verbatim (the app theme IS legacy dark). */
    tr.rpt-band-section-row td { padding:12px 14px; font-size:.82rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
    tr.rpt-band-section-hivalue td  { background:rgba(76,175,80,0.18) !important;  color:#a5d6a7; border-top:1px solid rgba(76,175,80,0.45);  border-bottom:1px solid rgba(76,175,80,0.45); }
    tr.rpt-band-section-midvalue td { background:rgba(251,192,45,0.18) !important; color:#ffe082; border-top:1px solid rgba(251,192,45,0.45); border-bottom:1px solid rgba(251,192,45,0.45); }
    tr.rpt-band-section-lovalue td  { background:rgba(245,158,66,0.18) !important; color:#ffcc80; border-top:1px solid rgba(245,158,66,0.45); border-bottom:1px solid rgba(245,158,66,0.45); }
    tr.rpt-band-section-problem td  { background:rgba(231,76,60,0.18) !important;  color:#f08080; border-top:1px solid rgba(231,76,60,0.45);  border-bottom:1px solid rgba(231,76,60,0.45); }
    tr.rpt-band-section-unrated td  { background:rgba(180,180,180,0.14) !important; color:#cfcfcf; border-top:1px solid rgba(180,180,180,0.35); border-bottom:1px solid rgba(180,180,180,0.35); }
    tr.rpt-band-row-hivalue td  { background:rgba(46,125,50,0.10) !important; }
    tr.rpt-band-row-midvalue td { background:rgba(251,192,45,0.09) !important; }
    tr.rpt-band-row-lovalue td  { background:rgba(245,158,66,0.08) !important; }
    tr.rpt-band-row-problem td  { background:rgba(231,76,60,0.08) !important; }
    tr.rpt-band-row-unrated td  { background:rgba(180,180,180,0.06) !important; }
    tr.rpt-overdue-section-row td { background:rgba(231,76,60,0.18) !important; color:#f08080; padding:10px 14px; font-size:.82rem;
      font-weight:700; letter-spacing:.4px; text-transform:uppercase; border-top:1px solid rgba(231,76,60,0.45); border-bottom:1px solid rgba(231,76,60,0.45); }
    tr.rpt-upcoming-section-row td { background:var(--surface-2) !important; color:var(--gold); padding:10px 14px; font-size:.82rem;
      font-weight:700; letter-spacing:.4px; text-transform:uppercase; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
    tr.rpt-overdue-row td { background:rgba(231,76,60,0.07) !important; }
    .rpt-assigned { color:var(--muted); white-space:nowrap; font-size:.8rem; }
    /* Caseload person chip — a FIXED footprint, because a column of chips should read as a column. Sized to the
       widest two-letter pair rather than to its own text: glyph widths differ (MM is nearly twice II), so a
       text-sized pill leaves a tidy column looking ragged. The UNCOLOURED chip — an inactive employee — keeps
       the identical box with a transparent border, so someone who has left holds her place in the line instead
       of collapsing it; losing the fill is the whole signal, and losing the alignment as well is just noise.
       A modifier, not a change to `.rpt-assigned`: that class is shared with the other reports' assignee cells,
       which are free text of any length and must not be boxed. */
    .rpt-chip { display:inline-block; box-sizing:border-box; width:38px; padding:0 4px; text-align:center;
                border:1px solid transparent; border-radius:4px; }
    /* Firm Caseload panel — legacy renderCaseload layout: centered title bar over an even
       3-column grid (label above, big number below), generously spaced (Joshua). */
    .rpt-firm-panel { border:1px solid var(--border); border-radius:10px; overflow:hidden; margin:10px 0 18px; background:var(--surface); }
    .rpt-firm-title { text-align:center; padding:13px 20px 9px; border-bottom:1px solid var(--border); color:var(--gold); font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
    .rpt-firm-line { display:grid; grid-template-columns:1fr 1fr 1fr; padding:18px 20px; text-align:center; }
    .rpt-firm-line .k { color:var(--muted); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:7px; }
    .rpt-firm-line .v { color:var(--gold); font-size:1.8rem; font-weight:700; line-height:1; }
    #app { display:flex; flex-direction:column; flex:1; min-height:0; }

    /* top: logo + top-level group tabs (the "workbooks"), horizontal */
    #topbar { display:flex; align-items:center; gap:var(--tabbar-gap); background:var(--surface); border-bottom:1px solid var(--border);
              padding:0 12px 0 calc(var(--tabbar-inset) - var(--tabbar-tab-pad)); height:var(--tabbar-h); flex:none; overflow-x:auto; }   /* the tab bar standard (item 14) */
    .logo { font-family:'Playfair Display',serif; font-weight:600; font-size:1.2rem; margin-right:18px; white-space:nowrap; }
    .logo span { color:var(--gold); }
    .grp-tab { background:none; border:none; color:var(--muted); font-family:'DM Sans',sans-serif; font-size:0.78rem;
               font-weight:600; padding:4px var(--tabbar-tab-pad); border-radius:6px; cursor:pointer; white-space:nowrap; }
    .grp-tab:hover { color:var(--text); background:var(--surface-2); }
    .grp-tab.active { color:var(--gold); font-weight:700; }
    .grp-tab.dev { color:#5fae6a; }                                  /* dev tables (Pleadings/Templates) */
    .grp-tab.dev:hover { color:#84d68f; background:var(--surface-2); }
    .grp-tab.dev.active { color:#84d68f; font-weight:700; }

    /* breadcrumb / count */
    #crumb { display:flex; align-items:center; gap:12px; padding:4px 12px; flex:none; border-bottom:1px solid var(--border); background:var(--surface); }
    #crumb #title { font-family:'DM Sans',sans-serif; font-weight:700; font-size:1rem; }
    #crumb #count { color:var(--gold); font-weight:700; font-size:0.78rem; }
    .note { color:var(--muted); font-size:0.78rem; }

    #master { flex:1 1 60%; min-height:120px; transition:opacity .16s ease; }
    #master.swapping { opacity:.25; }
    /* (Joshua D-32 item 12) a sheet that failed to load: its message takes the grid's place; the previous sheet's grid,
       splitter and child panels leave the screen until a load succeeds */
    #sheeterr { flex:1 1 60%; min-height:120px; display:flex; align-items:center; justify-content:center; }
    #sheeterr[hidden] { display:none; }
    #app.sheet-failed #master, #app.sheet-failed #splitter, #app.sheet-failed #panels { display:none; }
    #splitter { flex:none; height:6px; background:var(--border); cursor:ns-resize; }
    #splitter:hover, #splitter.dragging { background:var(--gold); }
    #splitter.hidden, #panels.hidden { display:none; }
    #panels { flex:none; display:flex; flex-direction:column; height:240px; overflow:hidden; background:var(--surface); position:relative; }
    details { border-top:1px solid var(--border); }
    summary { cursor:pointer; padding:6px 14px; font-weight:600; font-size:0.8rem; user-select:none;
              background:var(--surface-2); color:var(--text); list-style:none; }
    summary::-webkit-details-marker { display:none; }
    summary .badge { color:var(--gold); font-weight:700; margin-left:6px; }
    summary .hint { color:var(--muted); font-weight:400; margin-left:10px; font-size:0.72rem; }
    .panelgrid { flex:1; min-height:0; } /* fills #panels; height set by the splitter bar above */
    /* one child area + a single line of toggle buttons (Communications / Venues / Tasks) */
    .panelbar { display:flex; align-items:center; gap:3px; background:var(--surface-2); border-top:2px solid var(--gold); padding:0 8px 4px; }
    .panelchev { background:none; border:none; color:var(--gold); font-size:.9rem; cursor:pointer; padding:0 6px; line-height:1; }
    .panelchev:hover { color:var(--text); }
    .paneltab { background:none; border:1px solid var(--gold); border-top:none; border-radius:0 0 6px 6px; color:var(--gold); font-family:'DM Sans',sans-serif; font-size:.78rem; font-weight:600; padding:5px 13px; cursor:pointer; }
    .paneltab:hover { background:var(--surface-3); color:var(--text); }
    .paneltab.active { color:#1a1400; font-weight:700; background:var(--gold); border-color:var(--gold); } /* SE22: selected child label = solid gold pill, dark text (option 3a) */
    /* SE23: until a parent row is selected the child grids show nothing → grey the labels out (incl. the active
       one — no gold pill); the normal gold scheme returns the moment a row is clicked. */
    .paneltab.nosel, .paneltab.nosel.active { background:none; border-color:var(--border); color:var(--muted); font-weight:600; }
    .paneltab.nosel .bchev { color:var(--muted); }
    .paneltab.active .bchev { color:#1a1400; } /* chevron reads on the gold fill (badge already inherits the dark text) */
    .paneltab .badge { color:inherit; font-weight:700; margin-left:5px; }   /* count follows the label color (gold) */
    .paneltab .bchev { color:var(--gold); font-weight:700; } /* chevron inside the active label */
    /* Archive style — the Completed task tabs (Completed | In / Out): KEEP the gold border (like the Active tabs); just
       muted + italic text marks them as done/parked. When selected they still get the normal gold pill (italic carries). */
    /* employees task bar: white NON-bold section labels (Tasks / Active / Inactive) + a gold vertical line between sections.
       Big space around the separators, small space within a group (label ↔ its In/Out tabs). */
    .paneltab-sep { width:1px; height:19px; background:var(--gold); align-self:center; margin:0 16px; flex:none; }
    .panelbar .hint { color:var(--muted); font-size:.72rem; margin-left:8px; }
    /* slimmer child bar when collapsed (it's just a strip then) */
    #panels.collapsed .panelbar { padding:0 8px; }
    #panels.collapsed .paneltab { padding:2px 13px; }
    .paneltabs { margin-left:auto; display:flex; align-items:center; gap:3px; } /* toggle buttons pushed right */
    /* employees Tasks bar — Active⇄Completed toggle: a Lucide circle/circle-check icon + the state word; click flips it */
    /* ARCH 0859: Tasks Active⇄Completed sliding switch — dark track, gold knob (holds the state icon) slides; one label shown */
    .taskswitch { position:relative; display:inline-flex; align-items:center; flex:none; margin-left:12px; width:120px; height:26px; padding:0; background:var(--surface-3); border:1px solid var(--border); border-radius:999px; cursor:pointer; overflow:hidden; transition:border-color .15s; font-family:'DM Sans',sans-serif; }
    .taskswitch:hover { border-color:var(--gold); }
    /* OVAL knob (was a 21px circle) — a horizontal lozenge reads more obviously as a slider handle you push L↔R */
    .taskswitch-knob { position:absolute; top:50%; left:2px; transform:translateY(-50%); width:34px; height:20px; border-radius:999px; background:var(--gold); color:#1a1400; display:inline-flex; align-items:center; justify-content:center; transition:left .18s cubic-bezier(.4,0,.2,1); z-index:1; box-shadow:0 1px 3px rgba(0,0,0,.4); }
    .taskswitch.completed .taskswitch-knob { left:calc(100% - 36px); }   /* slides right for Completed (34px knob + 2px inset) */
    .taskswitch-knob .lu { width:13px; height:13px; }
    .taskswitch-label { position:absolute; font-size:.7rem; font-weight:700; letter-spacing:.03em; color:var(--gold); white-space:nowrap; text-align:center; transition:left .18s, right .18s; }
    .taskswitch:not(.completed) .taskswitch-label { left:40px; right:6px; }   /* knob left → label centered in the right of the track */
    .taskswitch.completed .taskswitch-label { left:6px; right:40px; }         /* knob right → label centered in the left of the track */
    /* sort preset bar (in the crumb row) */
    /* SE24c: toolbar indicator — Custom view only (Sorted-by + Filtered-by deleted: the green header tint,
       the gold floating summaries, and the sort dialog carry that state), anchored right */
    #cviewbar { display:inline-flex; align-items:center; margin-left:auto; }
    /* SE24c follow-up: the toolbar's control set is now fixed → standardized rhythm. Functional groups
       (grid toggles: sort/wrap/filter · utilities: calc/export) sit TIGHT at 6px inside; the crumb's
       12px flex gap separates groups (View ▾ — toggles — Assigned — utilities). No ad-hoc margins. */
    .tgroup { display:inline-flex; align-items:center; gap:6px; }
    .sortlbl { color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; }
    .sortcur { color:var(--gold); font-weight:700; font-size:.78rem; margin-left:7px; cursor:pointer; }
    .sortcur:hover { text-decoration:underline; }
    .sortcur-static { cursor:default; }   /* WO 20260720-1654 (Joshua): Tasks "Assigned: All" — the View reads "All" but isn't a dropdown until a person is picked */
    .sortcur-static:hover { text-decoration:none; }
    /* SE24c: clickable floating-filter summary for the enum/boolean checkbox filters */
    .fltfloat { width:100%; height:24px; background:var(--surface-2); border:1px solid var(--border); border-radius:5px;
      color:var(--muted); font-size:.72rem; padding:0 6px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
    .fltfloat:hover { color:var(--text); border-color:var(--gold); }
    .fltfloat.on { color:var(--gold); border-color:var(--gold); background:var(--gold-soft); font-weight:600; }
    /* edit 18 item 3 (rev): per-column clear-filter ✕ injected into EVERY floating-filter cell, just left of
       the funnel button; shown only when that column is actually filtered (works for text/date AND set/enum/bool). */
    .ag-theme-quartz .ag-floating-filter .fltclrx { display:none; flex:none; align-self:center; align-items:center; justify-content:center;
      width:18px; height:18px; margin:0 0 0 12px; padding:0; background:none; border:none; color:var(--muted); cursor:pointer; border-radius:4px; line-height:0; }
      /* margin-left 12px mirrors AG's funnel-button margin-left (12px) on the X's right → glyph sits centered in the control zone, not jammed left against the input */
    .ag-theme-quartz .ag-floating-filter.has-fltclr .fltclrx { display:inline-flex; }
    .ag-theme-quartz .ag-floating-filter .fltclrx svg { width:13px; height:13px; display:block; }
    .ag-theme-quartz .ag-floating-filter .fltclrx:hover { color:var(--gold); background:var(--surface-3); }
    #assignsel { background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.78rem; padding:3px 9px; border-radius:6px; min-width:200px; cursor:pointer; }
    #assignsel:focus { outline:none; border-color:var(--gold); }
    #assignsel.on { border-color:var(--gold); color:var(--gold); }
    /* master-grid quick-filter search box (ARCH 0816): magnifier + "Search" inside; goes gold while typing, like the Templates search */
    .gridsearch { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; transition:border-color .15s; }
    .gridsearch .lu { width:14px; height:14px; color:var(--gold); flex:none; transition:color .15s; }   /* gold by default */
    .gridsearch input { border:none; background:none; outline:none; color:var(--text); font-family:'DM Sans',sans-serif; font-size:.78rem; width:236px; padding:0; }
    .gridsearch input::placeholder { color:var(--muted); }
    .gridsearch.active { border-color:var(--gold); }
    .gridsearch.active .lu { color:var(--gold); }
    .gridsearch-x { display:none; background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.05rem; line-height:1; padding:0 1px; }
    .gridsearch.active .gridsearch-x { display:inline; }
    .gridsearch-x:hover { color:var(--gold); }
    .filtertgl { display:inline-flex; align-items:center; justify-content:center; background:var(--surface-2); border:1px solid var(--border); color:var(--muted); height:24px; padding:0 7px; border-radius:6px; cursor:pointer; }
    .filtertgl svg { display:block; }
    .filtertgl:hover { color:var(--text); }
    .filtertgl.on { border-color:var(--gold); color:var(--gold); background:var(--gold-soft); }
    .filtertgl:disabled { opacity:.4; cursor:default; }
    .filtertgl:disabled:hover { color:var(--muted); }
    /* Court Date Calculator — NON-MODAL floating panel (Sheet Edit 8): no backdrop, so the dashboard stays
       interactive and you can go back and forth (enter a date, recalc) without closing it. Draggable + resizable. */
    #calcpanel { display:none; position:fixed; right:24px; bottom:24px; width:min(1000px,92vw); height:min(760px,82vh);
      z-index:1160; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--gold);
      border-radius:10px; box-shadow:0 14px 48px rgba(0,0,0,.6); overflow:hidden; resize:both; min-width:420px; min-height:300px; }
    #calcpanel.open { display:flex; }
    #calcpanel .calchead { cursor:move; user-select:none; font-family:'DM Sans',sans-serif; font-weight:700; font-size:.85rem;
      padding:8px 12px; border-bottom:1px solid var(--border); color:var(--text); background:var(--surface-2); display:flex; justify-content:space-between; align-items:center; }
    #calcpanel .calchead .hint { font-weight:400; color:var(--muted); font-size:.68rem; }
    #calcpanel #calcclose { background:none; border:none; color:var(--muted); font-size:1.05rem; cursor:pointer; line-height:1; }
    #calcpanel #calcclose:hover { color:var(--text); }
    #calcpanel iframe { flex:1; border:0; width:100%; background:#fff; }
    /* SE20: loading overlay over the calculator iframe (the LA Court page loads slowly — show a spinner, not a blank page) */
    #calcpanel #calcloading { position:absolute; left:0; right:0; top:39px; bottom:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:var(--surface); color:var(--muted); font-family:'DM Sans',sans-serif; font-size:.82rem; z-index:2; }
    #calcpanel.loading #calcloading { display:flex; }
    #calcpanel #calcloading .spin { width:34px; height:34px; border:3px solid var(--surface-3); border-top-color:var(--gold); border-radius:50%; animation:calcspin .8s linear infinite; }
    @keyframes calcspin { to { transform:rotate(360deg); } }
    #sortmodal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1150; align-items:flex-start; justify-content:center; }
    #sortmodal .box { background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:10px; margin-top:8vh; width:min(520px,93vw); box-shadow:0 12px 40px rgba(0,0,0,.55); }
    #sortmodal h3 { font-family:'DM Sans',sans-serif; font-weight:700; font-size:.95rem; margin:0; padding:14px 18px; border-bottom:1px solid var(--border); color:var(--text); }
    #sortmodal .body { padding:14px 18px; display:flex; flex-direction:column; gap:9px; max-height:54vh; overflow:auto; }
    #sortmodal .slevel { display:flex; align-items:center; gap:8px; }
    #sortmodal .slevel .lbl { color:var(--muted); font-size:.72rem; width:48px; flex:none; }
    #sortmodal select { flex:1; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.8rem; padding:5px 8px; border-radius:6px; }
    #sortmodal select:focus { outline:none; border-color:var(--gold); }
    #sortmodal select.dir { flex:none; width:96px; }
    #sortmodal .srm { background:none; border:none; color:#b06b6b; cursor:pointer; font-size:.85rem; padding:2px 4px; }
    #sortmodal .srm:hover { color:#e06b6b; }
    #sortmodal .addlvl { align-self:flex-start; background:none; border:1px dashed var(--border); color:var(--gold); font-family:'DM Sans',sans-serif; font-size:.75rem; font-weight:600; padding:4px 11px; border-radius:6px; cursor:pointer; margin-top:2px; }
    #sortmodal .foot { display:flex; justify-content:space-between; align-items:center; padding:12px 18px; border-top:1px solid var(--border); background:var(--surface-2); }
    #sortmodal .foot .right { display:flex; gap:10px; }
    #sortmodal .btn { font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:700; padding:6px 16px; border-radius:6px; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text); }
    #sortmodal .btn:hover { background:var(--surface-3); }
    #sortmodal .btn.primary { background:var(--gold); color:#1a1a1a; border-color:var(--gold); }
    #sortmodal .squick { display:flex; flex-wrap:wrap; gap:7px; }
    #sortmodal .qbtn { background:var(--surface-3); border:1px solid var(--border); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.78rem; font-weight:600; padding:4px 12px; border-radius:6px; cursor:pointer; }
    #sortmodal .qbtn:hover { border-color:var(--gold); }
    #sortmodal .qbtn.on { background:var(--gold-soft); border-color:var(--gold); color:var(--gold); }
    #sortmodal .qnote { color:var(--muted); font-size:.72rem; font-style:italic; }
    #sortmodal .sdiv { color:var(--text); font-size:.82rem; font-weight:700; border-top:1px solid var(--border); padding-top:16px; margin-top:14px; margin-bottom:4px; }
    .addbtn { background:var(--gold); color:#1a1a1a; border:none; font-weight:800; font-size:.9rem; line-height:1; height:24px; min-width:24px; padding:0 6px; border-radius:6px; cursor:pointer; white-space:nowrap; }
    .addbtn:hover { filter:brightness(1.08); }
    .addbtn.bar { font-size:.78rem; height:22px; padding:0 9px; }
    .addbtn.childfab { position:absolute; right:16px; bottom:14px; z-index:6; width:30px; height:30px; min-width:30px; padding:0; border-radius:50%; align-items:center; justify-content:center; font-size:1.1rem; box-shadow:0 2px 8px rgba(0,0,0,.45); }
    #addmodal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1100; align-items:center; justify-content:center; }
    #addmodal.attop { align-items:flex-start; }            /* SE22: top-anchored; the box's exact top is computed in JS = where the expanded (global-unchecked) box sits when centered, so every global state shares it */
    #addmodal .box { background:var(--surface); border:1px solid var(--border); border-radius:10px; width:min(580px,93vw); max-height:90vh; overflow:auto; box-shadow:0 12px 40px rgba(0,0,0,.5); }
    #addmodal h3 { font-family:'DM Sans',sans-serif; font-weight:700; font-size:.95rem; margin:0; padding:16px 22px; border-bottom:1px solid var(--border); color:var(--text); }
    #addmodal h3 span { color:var(--gold); text-transform:capitalize; }
    #addmodal .wizcalc-btn { float:right; margin-top:-3px; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; background:var(--surface-2); border:1px solid var(--border); color:var(--gold); border-radius:6px; cursor:pointer; } /* SE19: clock icon (matches the toolbar) to pop out the court date calculator */
    #addmodal .wizcalc-btn:hover { border-color:var(--gold); background:var(--surface-3); }
    #addmodal .wizcalc-btn .lu { width:18px; height:18px; }   /* Lucide clock at the old hand-drawn icon's size */
    #addmodal .body { padding:18px 22px; display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
    #addmodal .body.grouped { display:block; }                                      /* SE19: explicit per-row grouping (cfg.order arrays) */
    #addmodal .body.grouped .add-row { display:flex; gap:16px; margin-bottom:14px; align-items:flex-start; }
    #addmodal .body.grouped .add-row .fld { flex:1 1 0; min-width:0; }
    #addmodal .fld { display:flex; flex-direction:column; gap:4px; }
    #addmodal .fld.full { grid-column:1 / -1; }
    #addmodal label { font-size:.72rem; color:var(--muted); }
    #addmodal label .req { color:var(--gold); }
    #addmodal input, #addmodal select, #addmodal textarea { background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.82rem; padding:7px 10px; border-radius:6px; width:100%; box-sizing:border-box; }
    #addmodal input::placeholder, #addmodal textarea::placeholder { color:var(--muted); opacity:.85; }   /* SE17: muted reminder text in fields ($0.00 etc.) */
    #addmodal input:focus, #addmodal select:focus, #addmodal textarea:focus { outline:none; border-color:var(--gold); }
    /* ARCH 1813 Item 1 — task notes thread: the grid cell icon+badge + the modal rows (reuses the #addmodal chrome) */
    /* FALLBACK (bulletproof): absolutely pin the icon to the cell's bottom-left, ignoring AG's wrapper/flex/padding
       entirely. The wrapper is made the positioning context (relative + fills the cell) and the cell's ~17px padding
       is killed, so left/bottom are measured from the cell's corner. Rows are ~25px, so the badge (on the button's
       top-right) still lands inside the cell. */
    .ag-cell[col-id="notes_count"] { padding:0 !important; }
    .ag-cell[col-id="notes_count"] .ag-cell-wrapper { position:relative !important; width:100% !important; height:100% !important; }
    .notesbtn { position:absolute; left:50%; transform:translateX(-50%); bottom:2px; display:inline-flex; align-items:center; justify-content:center; padding:1px; border-radius:6px; background:none; border:none; cursor:pointer; color:var(--text); line-height:0; }   /* horizontally centered on the column, bottom-anchored; standard white */
    .notesbtn:hover { color:var(--gold); background:var(--surface-3); }
    .notesbtn .lu { width:16px; height:16px; }
    .notesbadge { position:absolute; top:-4px; right:-6px; min-width:13px; height:13px; padding:0 3px; border-radius:7px; background:var(--gold); color:#1a1a1a; font-size:.56rem; font-weight:700; line-height:1; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; }
    /* communications notes = a single message-icon popout, centered BOTH ways in the column (no badge) */
    .ag-cell[col-id="comm_notes"] { padding:0 !important; }
    .ag-cell[col-id="comm_notes"] .ag-cell-wrapper { position:relative !important; width:100% !important; height:100% !important; }
    .commnotesbtn { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; justify-content:center; padding:1px; border-radius:6px; background:none; border:none; cursor:pointer; color:var(--text); line-height:0; }   /* standard white */
    .commnotesbtn:hover { color:var(--gold); background:var(--surface-3); }
    .commnotesbtn .lu { width:16px; height:16px; }
    #addbox .notesthread { display:flex; flex-direction:column; gap:10px; max-height:46vh; overflow-y:auto; margin-bottom:14px; }
    #addbox .noterow { border:1px solid var(--border); border-radius:8px; background:var(--surface-2); padding:9px 11px; }
    #addbox .notemeta { display:flex; align-items:center; gap:8px; font-size:.7rem; color:var(--muted); margin-bottom:4px; }
    #addbox .noteauthor { font-weight:600; color:var(--muted); }   /* Misc-edit 7: author muted like the timestamp (was var(--text)) so the note body is the only bright text */
    /* (Joshua 20260722) the per-note actions cluster right: pencil (author only) then trash (author or admin) */
    #addbox .noteacts { margin-left:auto; display:inline-flex; align-items:center; gap:2px; }
    #addbox .notedel, #addbox .noteedit, #addbox .notecancel { background:none; border:none; color:var(--muted); cursor:pointer; display:inline-flex; padding:2px; border-radius:4px; line-height:0; }
    #addbox .notedel .lu, #addbox .noteedit .lu, #addbox .notecancel .lu { width:15px; height:15px; }
    #addbox .notedel:hover { color:#f08a96; background:var(--surface-3); }
    #addbox .noteedit:hover, #addbox .notecancel:hover { color:var(--gold); background:var(--surface-3); }
    #addbox .noterow.editing { border-color:var(--gold); }
    /* (Joshua 20260722) NO interior box: the field carries the row's own surface — the gold outline on the row
       already says "editing", so a second bordered rectangle inside it is noise. */
    #addbox .notebody-edit textarea { width:100%; box-sizing:border-box; min-height:88px; resize:vertical; background:transparent; color:var(--text);
      border:none; border-radius:0; padding:0; font-family:'DM Sans',sans-serif; font-size:.84rem; line-height:1.45; }
    #addbox .notebody-edit textarea:focus { outline:none; }
    #addbox .notebody { font-size:.84rem; color:var(--text); white-space:pre-wrap; line-height:1.45; }
    #addbox .noteempty { color:var(--muted); font-style:italic; font-size:.82rem; padding:8px 2px; }
    #addbox .noteadd textarea { min-height:64px; resize:vertical; }
    #addbox .bigedit-ta { width:100%; min-height:52vh; resize:vertical; box-sizing:border-box; font-family:'DM Sans',sans-serif; }   /* taller — accommodate very large notes */
    #addmodal .box.bigedit { width:min(880px,95vw); }   /* wider box for the Edit Notes popout */
    #addbox .notebtn-primary { background:var(--gold); color:#1a1a1a; border:none; border-radius:6px; padding:7px 14px; font-weight:700; font-size:.8rem; cursor:pointer; font-family:'DM Sans',sans-serif; }
    #addbox .notebtn-ghost { background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:7px 14px; font-size:.8rem; cursor:pointer; font-family:'DM Sans',sans-serif; }
    #addmodal .addchk { flex-direction:row; align-items:center; min-height:30px; }
    #addmodal .addchk input[type=checkbox] { width:16px; height:16px; accent-color:var(--gold); padding:0; margin:0; cursor:pointer; flex:0 0 auto; }
    /* Deposition RFP field: two columns — label + helper on the left, checkbox on the right (centered) */
    #addmodal .add-row.depo-docreq { align-items:center; }
    #addmodal .depo-docreq-text { flex:1 1 0; min-width:0; }
    #addmodal .depo-docreq-chk { flex:0 0 auto; margin-right:4px; }   /* nudge the box a smidge in so it visually lines up with the field borders above */
    #addmodal .depo-docreq-help { margin:0; padding-left:14px; font-style:italic; }   /* indented italic subpart of the label */
    /* Batch deposition add — wizard-styled column grid (LAYOUT ported from the Templates percipient batch; STYLE is the wizard's own). */
    #addmodal .box.depo-wide { width:min(920px,96vw); }   /* wide enough that the 5 inline columns never cramp */
    #addmodal .depo-btable { border:1px solid var(--border); border-radius:8px; background:var(--surface-2); padding:0 12px; }
    #addmodal #depoRowsHost { max-height:48vh; overflow-y:auto; }   /* only the ROWS scroll when there are many — title/footer/headers/add stay put */
    #addmodal .depo-bhdr, #addmodal .depo-bgrid { display:grid; grid-template-columns:minmax(0,2fr) 1.2fr 1fr 96px 1.2fr 30px; gap:10px; align-items:center; }
    #addmodal .depo-bhdr { padding:9px 2px 7px; font-size:.7rem; color:var(--muted); border-bottom:1px solid var(--border); text-align:center; }   /* Title Case (not uppercase) + centered headers, like the other wizards */
    #addmodal .depo-brow { padding:9px 0; border-bottom:1px solid var(--border); }
    #addmodal .depo-brow:last-child { border-bottom:none; }
    #addmodal .depo-brow.bad { background:rgba(220,53,69,0.06); border-radius:6px; }
    #addmodal .depo-bgrid input.depo-bad { border-color:#dc3545; box-shadow:0 0 0 1px #dc3545; }
    #addmodal .combo.depo-bad .comboinput { border-color:#dc3545; }
    #addmodal .depo-bchk { display:flex; align-items:center; justify-content:center; }
    #addmodal .depo-bchk input[type=checkbox] { width:16px; height:16px; accent-color:var(--gold); margin:0; cursor:pointer; }   /* boolean = GOLD (matches the single-row wizard) */
    #addmodal .depo-brm { background:none; border:none; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:4px; border-radius:4px; line-height:0; }
    #addmodal .depo-brm:hover { color:#f08a96; background:var(--surface-3); }
    #addmodal .depo-bmore-toggle { display:inline-flex; align-items:center; gap:5px; margin-top:8px; padding:0; background:none; border:none; color:var(--gold); font-size:.7rem; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; }
    #addmodal .depo-bmore { margin-top:8px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    #addmodal .depo-bmore .depo-bnotes { grid-column:1 / -1; }
    #addmodal .depo-bmore label { display:block; font-size:.7rem; color:var(--muted); margin-bottom:3px; }
    #addmodal .depo-badd { display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:8px 14px; background:var(--surface-2); border:1px dashed #3a3a3a; border-radius:6px; color:var(--gold); font-size:.78rem; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; line-height:1; }
    #addmodal .depo-badd:hover { border-color:var(--gold); background:var(--surface-3); }
    #addmodal .depo-badd svg, #addmodal .depo-brm svg { flex:0 0 auto; }
    #addmodal .depo-bhelp { margin:14px 0 0; font-size:.72rem; font-style:italic; color:var(--muted); line-height:1.5; }
    #addmodal #depoBatchErr:empty { display:none; }
    #addmodal #depoBatchErr .tpl-form-error-banner { margin:0 0 12px; }
    #addmodal textarea.addnotes { resize:none; overflow:hidden; min-height:84px; }   /* taller notes box in the add wizard (Joshua); still auto-grows past this */
    #addmodal #rec_notes { min-height:0; resize:none; overflow-y:auto; }   /* recovery Notes = one field-height (no 84px, no auto-grow) → the reclaimed space goes to the Party Allocation area (Joshua) */
    /* Service "Serve On" — case-scoped defendant checklist (one service row per checked defendant) */
    #addmodal .serveon { display:flex; flex-direction:column; gap:6px; width:100%; max-height:180px; overflow-y:auto; overflow-x:hidden; padding:2px 0; box-sizing:border-box; }
    #addmodal .serveon-opt { display:flex; flex-direction:row; align-items:flex-start; gap:8px; width:100%; min-height:24px; cursor:pointer; }
    #addmodal .serveon-opt input { width:auto; margin:3px 0 0; flex:0 0 auto; }
    #addmodal .serveon-opt span { flex:1 1 auto; min-width:0; word-break:break-word; line-height:1.35; }
    #addmodal .serveon-hint { opacity:.6; font-size:.9em; padding:2px 0; }
    /* Sheet Edit 10: themed date/time field in the wizards (input + inline calendar/clock button) */
    #addmodal .fd-wrap { position:relative; width:100%; }
    #addmodal .fd-wrap .fd-input { width:100%; box-sizing:border-box; padding-right:30px; }
    #addmodal .fd-wrap .fdbtn { position:absolute; right:1px; top:1px; bottom:1px; width:28px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; border-left:1px solid var(--border); color:var(--gold); cursor:pointer; border-radius:0 6px 6px 0; }
    #addmodal .fd-wrap .fdbtn:hover { background:var(--surface-3); }
    #addmodal .fd-input.pi-formula { color:var(--gold); font-style:italic; }
    #addmodal .fd-input.pi-formula-set { color:var(--gold); font-weight:normal; font-style:normal; }   /* SE §3b: committed-from-formula denotation — gold, de-bolded (upright, normal weight) */
    /* Retained wizard (reuses the #addmodal shell) */
    #addmodal .rt-sec { padding:16px 22px; border-bottom:1px solid var(--border); }
    #addmodal .rt-sec:last-of-type { border-bottom:none; }
    #addmodal .rt-h { font-size:.74rem; font-weight:700; color:var(--gold); letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px; }
    #addmodal .rt-h .req { color:var(--gold); }
    #addmodal .rt-radio { display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--text); margin:4px 0; cursor:pointer; }
    #addmodal .rt-radio input { width:15px; height:15px; accent-color:var(--gold); }
    #addmodal .rt-clientrow { display:flex; gap:8px; align-items:center; margin-bottom:7px; }
    #addmodal .rt-clientrow .combo { flex:1; }
    #addmodal .rt-clientrow .rt-clientname { flex:1; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.82rem; padding:7px 10px; border-radius:6px; box-sizing:border-box; }  /* Dash Edit 3 tweak: match .comboinput padding (7px 10px) so toggling Existing Client doesn't resize the wizard (mirrors the case side) */
    #addmodal .rt-clientrow .rt-clientname:focus { outline:none; border-color:var(--gold); }
    #addmodal .rt-rmclient { background:none; border:none; color:#b06b6b; font-size:.95rem; cursor:pointer; padding:0 4px; }
    #addmodal #rt_clienthead, #addmodal #rt_clientlabel { white-space:nowrap; }  /* Dash Edit 3 tweak: longer "Link Existing Client" / "Existing Client Name *" stay one line so toggling Existing Client never reflows/resizes the wizard */
    #addmodal #rt_clients .rt-clientrow:first-child .rt-rmclient { display:none; }   /* the first client row can't be removed — no ✕; additional rows keep it */
    #addmodal .rt-chk { display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color:var(--text); margin-right:18px; margin-top:6px; cursor:pointer; }
    #addmodal .rt-chk input { width:16px; height:16px; accent-color:var(--gold); }
    /* Dash Edit 2: intake→prelit retain wizard — two-column layout. LEFT = the toggle questions, RIGHT = the
       switchable Create/Link controls; one grid row per question so each control aligns with its question. */
    #addmodal .box.rt-wide { width:min(720px,95vw); }
    #addmodal .rt-grid { display:grid; grid-template-columns:minmax(190px,250px) 1fr; gap:18px 26px; padding:16px 22px; border-bottom:1px solid var(--border); align-items:start; }
    #addmodal .rt-grid .rt-q .rt-chk { margin:0 0 6px 0; font-weight:600; }
    #addmodal .rt-grid .rt-help { font-size:.74rem; color:var(--muted); font-style:italic; line-height:1.35; }   /* helper text in muted italics */
    #addmodal .rt-grid .rt-ctrl { min-width:0; }
    #addmodal .rt-grid .rt-ctrl .fld:first-of-type { margin-top:0; }
    #addmodal .rt-derived { margin-top:10px; font-size:.78rem; color:var(--muted); }
    #addmodal .rt-derived b { color:var(--text); font-weight:600; }
    #addmodal .rt-note { font-size:.76rem; color:var(--muted); margin:0 0 8px; }
    #addmodal .rt-altlink { display:flex; align-items:center; gap:7px; font-size:.74rem; color:var(--muted); margin:9px 0 4px; cursor:pointer; }
    #addmodal .rt-altlink input { width:14px; height:14px; accent-color:var(--gold); flex:0 0 auto; }
    #addmodal .rt-tied { font-size:.82rem; color:var(--text); background:rgba(201,168,76,0.12); border:1px solid rgba(201,168,76,0.4); border-radius:6px; padding:8px 11px; }
    /* SE22: header + rows share ONE grid template → columns align perfectly regardless of the <select>'s long-option width (flexbox couldn't shrink the select in Chrome). */
    #addmodal .rec-allocrow, #addmodal .rec-allochead { display:grid; grid-template-columns:minmax(0,1fr) 18px minmax(0,1.3fr) 96px 18px; gap:8px; align-items:center; }
    #addmodal .rec-allocrow { margin-bottom:9px; }
    #addmodal .rec-allocrow > * { min-width:0; }
    #addmodal .rec-allochead { margin-bottom:6px; }
    #addmodal .rec-allochead .rh { font-size:.72rem; font-weight:600; color:var(--text); }
    #addmodal .rec-allochead .rh-a { text-align:left; }   /* Amount header left-aligned to match Plaintiff/Defendant */
    #addmodal .rec-vs { color:var(--muted); font-size:.78rem; text-align:center; }
    #addmodal .rec-allocrow .rec-allocamt { text-align:left; }
    #addmodal .rec-allocrow .rec-rmalloc { padding:0; text-align:center; }
    #addmodal .rec-allocrow.lit-locked { position:relative; }   /* anchor the gold "locked/added" overlay (.lit-locked::after) */
    #addmodal .rec-allocrow.lit-locked input { opacity:.7; background:var(--surface-3); cursor:default; }
    /* Pre-Lit settle: single-row party line with Type/State columns; wider modal (.recwide) to fit them */
    #addmodal .box.recwide { width:min(880px,96vw); }
    /* recovery wizards: cap the box to the viewport and let ONLY the Party Allocation/Specification list scroll —
       the title, Global toggle, Details, Notes, and buttons stay fixed so nothing clips (any zoom). */
    #addmodal .box.recwide { display:flex; flex-direction:column; overflow:hidden; }
    #addmodal .box.recwide > * { flex:0 0 auto; }
    #addmodal .box.recwide #rec_allocsec { flex:0 1 auto; min-height:0; display:flex; flex-direction:column; }
    #addmodal .box.recwide #rec_allocsec > .rt-h, #addmodal .box.recwide #rec_allocsec > .rt-note { flex:0 0 auto; }
    #addmodal .box.recwide #rec_allocs { flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:2px; }
    #addmodal .rec-allocrow.rec-prelit, #addmodal .rec-allochead.rec-prelithead { grid-template-columns:minmax(0,1.1fr) 16px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 92px 16px; }
    #addmodal .rec-allocrow.rec-prelit select:disabled { opacity:.55; cursor:not-allowed; }
    /* SE17: add-allocation is a compact + aligned under the ✕ column */
    #addmodal .rec-addrow { display:flex; justify-content:flex-end; margin-top:2px; }
    #addmodal .rec-addplus { background:none; border:none; color:var(--gold); font-size:1.15rem; font-weight:800; line-height:1; cursor:pointer; padding:0 4px; width:18px; text-align:center; }
    #addmodal .lit-prowaddfloat, #addmodal .lit-drowaddfloat { width:26px; padding:0; } /* SE21 C3: match the ✕ box (26px) so the + lines up perfectly under it */
    #addmodal .rec-addplus:hover { filter:brightness(1.15); }
    #addmodal .rec-globalrow { display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--text); margin:0 0 4px; cursor:pointer; }
    #addmodal .rec-globalrow input { width:15px; height:15px; accent-color:var(--gold); flex:0 0 auto; }
    #addmodal .rec-globalnote { margin:0; }   /* SE17: global note on its own line below the label */
    #addmodal .rt-note2 { font-size:.72rem; color:var(--muted); font-weight:400; }
    #addmodal .rec-money.readonly { opacity:.7; background:rgba(255,255,255,0.04); cursor:not-allowed; }
    #addmodal .rt-caprow2 { display:flex; gap:10px; margin-top:9px; }
    #addmodal .rt-caprow2 .fld { flex:1; }
    #addmodal #rt_addclient { font-size:.76rem; padding:3px 10px; margin-top:2px; }
    /* Litigation pleadings stepper (reuses the #addmodal shell; wider box) */
    #addmodal .box.lit { width:min(1120px,96vw); }
    #addmodal .lit-body { min-height:340px; }
    /* edit 6: header row + green "Loaded from draft" pill (across from the Transition Into Litigation header) */
    #addmodal .lit-headrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-right:22px; }   /* inset the pill from the right edge to match the h3's 22px left padding */
    #addmodal .lit-draftloaded { background:rgba(45,164,78,0.15); color:#7ed399; font-size:0.74rem; font-weight:600; white-space:nowrap; padding:6px 14px; border-radius:6px; flex:0 0 auto; }
    #addmodal .lit-step { cursor:pointer; }
    #addmodal .lit-step:hover { color:var(--text); }
    #addmodal .lit-step.active:hover { color:#1a1a1a; }
    #addmodal .lit-drow { display:flex; gap:8px; align-items:center; margin-bottom:7px; }
    #addmodal .lit-drow .lit-pname { flex:2; } #addmodal .lit-drow .lit-paka { flex:1.4; }
    #addmodal .lit-drow input[type=text] { background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.82rem; padding:5px 8px; border-radius:6px; }
    #addmodal .lit-drow .btn { padding:5px 14px; }
    #addmodal .lit-rmrow { background:none; border:none; color:#b06b6b; font-size:.95rem; cursor:pointer; padding:0 2px; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
    #addmodal .lit-plus { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--gold); background:transparent; color:var(--gold); font-size:1.1rem; cursor:pointer; margin-top:2px; }
    #addmodal .lit-plus:hover { background:var(--gold); color:#1a1a1a; }
    #addmodal .lit-coasrc { color:var(--muted); font-size:.74rem; }
    #addmodal .lit-row .lit-rowsub { font-style:italic; }
    #addmodal .lit-rail { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px; padding:10px 18px; border-bottom:1px solid var(--border); font-size:.72rem; } /* SE15: centered */
    #addmodal .lit-step { color:var(--muted); padding:2px 7px; border-radius:4px; cursor:pointer; }
    #addmodal .lit-step.active { color:#1a1a1a; background:var(--gold); font-weight:700; }
    #addmodal .lit-step.done { color:var(--gold); }
    #addmodal .lit-step.locked { color:var(--border); cursor:not-allowed; } /* SE15: gated, not yet reachable */
    #addmodal .lit-arrow { color:var(--gold); opacity:.65; font-size:.9rem; display:inline-flex; align-items:center; justify-content:center; line-height:1; } /* SE15: stylish arrow between steps — centered both axes */
    #addmodal .lit-sep { color:var(--border); }
    #addmodal .lit-body { padding:14px 18px; max-height:60vh; overflow:auto; }
    #addmodal .lit-help { font-size:.82rem; color:var(--muted); margin:0 0 18px; } /* SE15: more padding after reminder text */
    /* SE15: Case Info label-left / field-right rows */
    #addmodal .lit-frows { display:flex; flex-direction:column; gap:13px; }
    #addmodal .lit-frow { display:flex; align-items:center; gap:14px; }
    #addmodal .lit-frow > label { flex:0 0 185px; font-size:.8rem; color:var(--muted); text-align:left; white-space:nowrap; } /* SE22: fixed width = the longest label ("Complaint Filing Date") so every field starts at the same x */
    #addmodal .lit-frow > input, #addmodal .lit-frow .fd-wrap { flex:1; }
    /* Field-level guidance is the PLACEHOLDER (`.lit-ph`, italic+muted, styled just below) — it sits in the
       field it describes and costs no vertical rhythm. A `.lit-fhint` line under the row was tried and
       dropped (Joshua): it read as a caption for the NEXT field as much as its own. `.lit-help` remains the
       step-level note. */
    /* SE15: per-field centered white Title-Case headers (Plaintiffs/Defendants) */
    #addmodal .lit-fhead { display:flex; gap:8px; margin:14px 0 11px; font-size:.74rem; font-weight:700; color:var(--text); } /* SE21 C3: more padding between the header and the rows */
    #addmodal .lit-fhead > span { text-align:center; }
    #addmodal .lit-fh-name { flex:2; } #addmodal .lit-fh-aka { flex:1.4; } #addmodal .lit-fh-act { flex:0 0 96px; }
    #addmodal .lit-fh-adv { flex:2; } #addmodal .lit-fh-ty { flex:1.2; } #addmodal .lit-fh-st { flex:1.2; } #addmodal .lit-fh-dba { flex:1.2; }
    #addmodal .lit-ddrow { display:flex; gap:8px; align-items:center; }
    #addmodal .lit-ddrow > select, #addmodal .lit-ddrow > input { background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.8rem; padding:5px 8px; border-radius:6px; box-sizing:border-box; }
    #addmodal .lit-ddrow .lit-addd { flex:0 0 96px; }
    #addmodal .lit-locked { border-color:var(--gold) !important; } /* SE15: thin gold box = locked/added */
    #addmodal .lit-locked::after { content:''; position:absolute; inset:-3px; border:1.5px solid var(--gold); border-radius:8px; pointer-events:none; box-shadow:0 0 0 1px rgba(201,168,76,0.25); } /* SE19: gold box is an OVERLAY on top of the fields, not behind */
    /* SE19: confirm split — already-on-the-case (blue) vs being-added (green) */
    #addmodal .lit-confhead { font-weight:700; font-size:.76rem; letter-spacing:.03em; text-transform:uppercase; margin:12px 0 4px; }
    #addmodal .lit-confhead.lit-exists { color:#5b9bd5; }
    #addmodal .lit-confhead.lit-adding { color:#56b877; }
    #addmodal .lit-gate .lit-muted { color:var(--muted); font-style:italic; }
    /* SE15: COA group headers */
    #addmodal .lit-coagrp { margin-bottom:6px; }
    #addmodal .lit-coaghead { font-size:.78rem; font-weight:700; color:var(--text); margin:8px 0 3px; padding-bottom:2px; border-bottom:1px solid var(--border); }
    /* SE16: italic-muted in-field hints */
    #addmodal .lit-ph::placeholder, #addmodal .lit-ph .fd-input::placeholder { font-style:italic; color:var(--muted); opacity:.85; }
    /* SE16: one editable row per plaintiff/defendant; Add locks it (yellow box), ＋ adds a row where ✕ would be */
    #addmodal .lit-erow { display:flex; gap:8px; align-items:center; margin-bottom:12px; position:relative; } /* position:relative anchors the SE19 locked overlay; SE22: more gap so locked gold borders (inset -3px overlay) don't touch — same for plaintiffs + defendants (shared class) */
    #addmodal .lit-erow > input, #addmodal .lit-erow > select { background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.8rem; padding:5px 8px; border-radius:6px; box-sizing:border-box; }
    #addmodal .lit-erow > input[readonly], #addmodal .lit-erow select:disabled, #addmodal .lit-erow input:disabled { opacity:.65; cursor:not-allowed; }
    #addmodal .lit-pact { flex:0 0 104px; display:flex; gap:6px; justify-content:flex-end; align-items:center; }
    #addmodal .lit-pact .btn { padding:5px 12px; }
    #addmodal .lit-mini { width:26px; height:26px; border-radius:6px; border:1px solid var(--border); background:var(--surface-2); color:var(--gold); font-size:1rem; line-height:1; cursor:pointer; flex:0 0 auto; }
    #addmodal .lit-mini:hover { border-color:var(--gold); }
    #addmodal .lit-prowrm, #addmodal .lit-drowrm { color:#b06b6b; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
    /* SE16: matrix — padding/separator before the first plaintiff and between plaintiff groups */
    #addmodal .lit-mxgrid .lit-pgsep { border-left:2px solid var(--gold) !important; }
    #addmodal .lit-mxgrid td.lit-pgsep, #addmodal .lit-mxgrid th.lit-pgsep { padding-left:16px; padding-right:10px; }
    /* SE13 #6: three-tier hierarchy — main h3 (.95) > step title (gold, prominent) > body (.78 muted) */
    #addmodal .lit-steptitle { padding:8px 18px 2px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:.9rem; color:var(--gold); letter-spacing:.005em; }
    /* 🔴 BAG BATCH 4 · G2b — the Add-New-Defendant duplicate note shares this declaration rather than copying it.
       The two live on different overlays (`#addmodal` for the stepper, `.mp-ov` for the Modify-Parties modal), so
       the selector is a list; the LOOK is one, which is the point (DEV-3: a new surface reads as native, and two
       near-identical amber notes drifting apart is exactly how it stops doing so). */
    .venue-note-warn, .venue-note-error, #addmodal .lit-pending, .mp-ov .mp-dupwarn, #addmodal .mp-dupwarn { color:#dcae5e; font-size:.76rem; margin-top:9px; padding:6px 10px; background:rgba(201,168,76,0.10); border:1px solid rgba(201,168,76,0.38); border-radius:6px; }
    /* A60.2 cure 01 (P-69) — the venue messages' ONE style home, used by both screens (the litigation stepper and the
       complaint template screen), so it is not scoped to an overlay: `.venue-note-warn` is the yellow flag (the look
       above, made screen-independent), `.venue-note-error` the red error — the same size and spacing, in the red the
       templates screen's error banner already uses. */
    .venue-note-error { color:#f08a96; background:rgba(220,53,69,0.10); border-color:rgba(220,53,69,0.45); }
    /* 🔴 BAG BATCH 4b (6dB 11 rider) — RESOLVE-FIRST. The box itself is untouched: same declaration, same amber,
       both surfaces. What is added is the two answers INSIDE it and the quiet variant a resolution leaves behind.
       No colour is invented for either — the buttons are the modal's own `.btn` / `.btn.primary` (blue here via
       the `.mp-modal` --gold rescope, which is what makes Link read as the default action). (The quiet `.mp-tied`
       variant is gone: a resolution is now the inline `.adv-linked` status, D-55.) Size is the only override: footer
       buttons at .82rem/6px×16px would tower over a .76rem note.
       B9.i: each selector is widened to `#addmodal .mp-dupwarn` — the litigation stepper's and the recovery wizard's
       rows carry the SAME strip, so they read the SAME declarations (no second copy of the look). */
    .mp-ov .mp-dupwarn .mp-dupacts, #addmodal .mp-dupwarn .mp-dupacts { display:flex; flex-wrap:wrap; gap:7px; margin-top:7px; }
    .mp-ov .mp-dupwarn .btn, #addmodal .mp-dupwarn .btn { font-size:.74rem; padding:4px 10px; }
    #addmodal .lit-mxblock { margin-bottom:16px; }
    #addmodal .lit-mxsub { font-size:.86rem; font-weight:700; color:var(--text); margin:2px 0 7px; padding-bottom:4px; border-bottom:1px solid var(--border); }
    #addmodal .lit-caprow select { background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.8rem; padding:5px 8px; border-radius:6px; flex:1; }
    #addmodal .lit-rows { display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
    #addmodal .lit-row { display:flex; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:6px 10px; }
    #addmodal .lit-rowname { font-size:.84rem; color:var(--text); font-weight:600; }
    #addmodal .lit-rowsub { font-size:.74rem; color:var(--muted); }
    #addmodal .lit-row .lit-rm { margin-left:auto; }
    #addmodal .lit-empty { font-size:.8rem; color:var(--muted); font-style:italic; padding:8px 0; }
    #addmodal .lit-add, #addmodal .lit-dadd { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    #addmodal .lit-dadd { flex-direction:column; align-items:stretch; }
    #addmodal .lit-dadd .combo { width:100%; }
    #addmodal .lit-caprow { display:flex; gap:8px; }
    #addmodal .lit-caprow input { background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.8rem; padding:5px 8px; border-radius:6px; flex:1; }
    #addmodal .lit-coasearch { width:100%; box-sizing:border-box; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-size:.82rem; padding:6px 9px; border-radius:6px; margin-bottom:9px; }
    #addmodal .lit-coalist { display:flex; flex-direction:column; gap:2px; max-height:42vh; overflow:auto; }   /* edit 5.1: reverted C7 — single column (the two-column variant wrapped long COA names + statute refs badly) */
    #addmodal .lit-coa { display:flex; align-items:flex-start; gap:8px; font-size:.82rem; color:var(--text); padding:3px 4px; border-radius:4px; cursor:pointer; }   /* edit 6: flex-start so the box sits with the first line */
    #addmodal .lit-coa:hover { background:var(--surface-2); }
    #addmodal .lit-coa input { width:15px; height:15px; accent-color:var(--gold); flex:0 0 auto; margin-top:2px; }   /* edit 6: checkbox is its own item, top-aligned */
    #addmodal .lit-coatext { flex:1; min-width:0; line-height:1.35; }   /* edit 6: name + statute wrap together as ONE unit (was 3 separate flex items → statute floated/broke) */
    #addmodal .lit-coafam { color:var(--muted); font-size:.72rem; margin-left:auto; }
    #addmodal .lit-coaadd { display:flex; gap:8px; margin-top:10px; }
    #addmodal .lit-coaadd input { flex:1; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.82rem; padding:6px 9px; border-radius:6px; }
    #addmodal .lit-coaadd input:focus { outline:none; border-color:var(--gold); }
    #addmodal table.lit-matrix { border-collapse:collapse; font-size:.78rem; font-family:'DM Sans',sans-serif; }   /* match the studio Target matrix / COA tab — <table> doesn't inherit the body family (was UA serif) */
    #addmodal .lit-matrix th, #addmodal .lit-matrix td { border:1px solid var(--border); padding:5px 8px; text-align:center; }
    #addmodal .lit-matrix th { color:var(--gold); font-weight:600; background:var(--surface-2); }
    #addmodal .lit-matrix .lit-mxname { text-align:left; color:var(--text); font-weight:400; white-space:nowrap; }   /* normal weight to match the Causes-of-Action list (.lit-coa) — was 600 (read as bolder) */
    #addmodal .lit-matrix input { width:14px; height:14px; accent-color:var(--gold); }   /* edit 7: smaller (to match the Causes of Action screen) but stay GOLD (unlike the studio's blue) */
    /* SE15: pivot matrix — plaintiff header row (white, larger) over defendant header row (white, smaller) */
    #addmodal .lit-mxwrap { overflow:auto; max-height:48vh; }
    #addmodal .lit-mxgrid .lit-mxptop { color:var(--text); font-weight:700; font-size:.82rem; background:var(--surface-3); white-space:nowrap; }   /* nowrap: party names only wrap when horizontal space is truly gone (Joshua) */
    #addmodal .lit-mxgrid .lit-mxdtop { color:var(--text); font-weight:600; font-size:.72rem; white-space:nowrap; }
    #addmodal .lit-mxgrid .lit-mxcorner { background:transparent; border:none; }
    #addmodal .lit-mxgrid .lit-mxname { white-space:nowrap; max-width:none; padding-right:16px; } /* SE21 C3: give the COA column room so names don't wrap */
    #addmodal .lit-mxgrid td:not(.lit-mxname), #addmodal .lit-mxgrid th:not(.lit-mxcorner):not(.lit-mxname) { min-width:64px; } /* checkbox columns size to content; the nowrap party headers drive width (was a forced 120px → names cramped/wrapped) */
    #addmodal .lit-matrix input:disabled { accent-color:var(--gold); opacity:.85; } /* read-only 1×1 confirm */
    #addmodal ul.lit-gate { list-style:none; padding:0; margin:0; font-size:.84rem; }
    #addmodal ul.lit-gate li { padding:4px 0; color:var(--muted); }
    #addmodal ul.lit-gate li.ok { color:#56b877; }
    #addmodal ul.lit-gate li.ok::before { content:''; display:inline-block; width:1em; height:1em; margin-right:5px; vertical-align:-0.15em; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2356b877" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') no-repeat center/contain; }
    #addmodal ul.lit-gate li.bad { color:#b06b6b; }
    #addmodal ul.lit-gate li.bad::before { content:''; display:inline-block; width:1em; height:1em; margin-right:5px; vertical-align:-0.15em; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23b06b6b" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>') no-repeat center/contain; }
    #addmodal .lit-rail + .lit-body + .foot, #addmodal .foot { align-items:center; }
    #addmodal .foot { padding:12px 18px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; position:sticky; bottom:0; background:var(--surface); }
    #addmodal .btn { font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:700; padding:6px 16px; border-radius:6px; cursor:pointer; border:1px solid var(--border); background:var(--surface-2); color:var(--text); }
    #addmodal .btn.primary { background:var(--gold); color:#1a1a1a; border-color:var(--gold); }
    #addmodal .combo { position:relative; }
    #addmodal .comboinput { width:100%; box-sizing:border-box; background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.82rem; padding:7px 10px; border-radius:6px; } /* SE20: match the standard input/select padding so the Case Name text lines up with the Venue dropdown */
    #addmodal .comboinput:focus { outline:none; border-color:var(--gold); }
    #addmodal .combolist { position:absolute; left:0; right:0; top:100%; z-index:6; margin-top:2px; max-height:210px; overflow:auto; background:var(--surface-2); border:1px solid var(--gold); border-radius:6px; box-shadow:0 6px 22px rgba(0,0,0,.55); }
    #addmodal .box.bigpicker { overflow:visible; }                 /* SE20: Related Case wizard — normal size, but overflow visible so the case dropdown isn't clipped by the modal */
    #addmodal .comboopt { padding:5px 9px; font-size:.8rem; cursor:pointer; }
    #addmodal .comboopt:hover { background:var(--surface-3); }
    #addmodal .comboempty { padding:6px 9px; font-size:.78rem; color:var(--muted); }
    #confirmmodal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:6300; align-items:center; justify-content:center; } /* top-most: a blocking confirm must sit above EVERY other modal incl. the Modify-Parties overlay (mp-ov 6100 / mp-sel-list 6200) — was 2200, which rendered the warning hidden behind the dismiss modal */
    #confirmmodal .cbox { background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:10px; width:min(420px,92vw); box-shadow:0 12px 40px rgba(0,0,0,.55); overflow:hidden; }
    #confirmmodal .ctitle { font-family:'DM Sans',sans-serif; font-weight:700; font-size:.95rem; color:var(--text); padding:16px 20px 4px; }
    #confirmmodal .cmsg { color:var(--muted); font-size:.84rem; line-height:1.45; padding:4px 20px 18px; }
    #confirmmodal .clist { margin:8px 0 0; padding-left:18px; color:var(--text); }   /* push 15 ruling 4: the confirm's list (the Run Order steps a Cancel Run also cancels) */
    #confirmmodal .cfoot { display:flex; justify-content:flex-end; gap:10px; padding:12px 20px; border-top:1px solid var(--border); background:var(--surface-2); }
    #confirmmodal .btn { font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:700; padding:6px 16px; border-radius:6px; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text); }
    #confirmmodal .btn:hover { background:var(--surface-3); }
    #confirmmodal .btn.danger { background:#9b2c2c; border-color:#9b2c2c; color:#fff; }
    #confirmmodal .btn.danger:hover { background:#b23434; }
    #confirmmodal .cbox.blue { border-top-color:#4a90d9; }   /* blue-styled warning (Modify-Parties family) */
    #confirmmodal .btn.primary { background:#4a90d9; border-color:#4a90d9; color:#fff; }
    #confirmmodal .btn.primary:hover { filter:brightness(1.08); }
    /* Phase 2: the litigation-confirm quadrant (🟦 keep / 🟩 add · 🟨 change / 🟥 delete) — rendered inline as the
       stepper's final Complete page (NOT a modal). Empty sections are hidden by JS, so only what applies shows. */
    .rcgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; margin-top:4px; }
    .rcsec { border:1px solid var(--border); border-radius:8px; overflow:hidden; align-self:start; }
    .rchd { font-family:'DM Sans',sans-serif; font-weight:700; font-size:.78rem; padding:7px 12px; color:var(--text); background:var(--surface-2); border-bottom:1px solid var(--border); } /* quadrant headers: white */
    .rclist { font-size:.8rem; padding:7px 12px; display:flex; flex-direction:column; gap:4px; max-height:240px; overflow:auto; } /* compact rows */
    .rcitem { line-height:1.3; color:var(--text); }
    .rc-keep .rcitem { color:#5b9bd5; } .rc-add .rcitem { color:#5db87a; } .rc-change .rcitem { color:var(--gold); } .rc-del .rcitem { color:#d9776b; } /* color lives in the rows (incl. the bold count) */
    .rcitem .od { color:var(--muted); text-decoration:line-through; } .rcitem .nw { color:var(--gold); }
    .rcempty { color:var(--muted); font-style:italic; }
    /* the Modify-Parties confirm-diff reuses the quadrant, stacked single-column in the narrower modal (Joshua: model on the stepper confirm) */
    .rcgrid.mp-quad { grid-template-columns:1fr; gap:9px; margin-top:2px; }
    /* edit 18 item 2: cell right-click menu (extensible — one item for now) + Prior Revisions modal */
    .cellmenu { position:fixed; z-index:1300; min-width:150px; background:var(--surface); border:1px solid var(--border); border-radius:7px; box-shadow:0 8px 26px rgba(0,0,0,.5); padding:4px; }
    .cellmenu-item { display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:none; color:var(--text); font-family:'DM Sans',sans-serif; font-size:.8rem; padding:7px 12px; border-radius:5px; cursor:pointer; }
    .cellmenu-item .lu { width:15px; height:15px; flex:none; }   /* (Edits 9) icon before the label; follows the item colour (→ gold on hover) */
    .cellmenu-item:hover { background:var(--surface-3); color:var(--gold); }
    #revmodal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1250; align-items:center; justify-content:center; }
    #revmodal .rbox { background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:10px; width:fit-content; min-width:480px; max-width:94vw; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,.55); overflow:hidden; }
    #revmodal .rhead { display:flex; align-items:center; justify-content:space-between; padding:14px 18px 10px; border-bottom:1px solid var(--border); }
    #revmodal .rev-title { font-family:'DM Sans',sans-serif; font-weight:700; font-size:.9rem; color:var(--gold); max-width:52ch; } /* cap so a long case name wraps instead of forcing the fit-content box super-wide */
    #revmodal .rev-x { background:none; border:none; color:var(--muted); font-size:1.1rem; line-height:1; cursor:pointer; padding:0 4px; }
    #revmodal .rev-x:hover { color:var(--gold); }
    #revmodal .rev-body { flex:1; min-height:0; overflow:auto; padding:6px 0; } /* flex:1 + min-height:0 → the list scrolls inside the 80vh box once it gets tall */
    #revmodal .rev-row { padding:9px 18px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; gap:18px; }
    #revmodal .rev-row:last-child { border-bottom:none; }
    #revmodal .rev-main { min-width:0; }
    /* Restore button and the CURRENT label share one right-hand column (same width + centering) so they line up.
       CURRENT keeps a transparent border to match the button's footprint but stays plain text — not a button. */
    #revmodal .rev-restore, #revmodal .rev-current { flex:none; box-sizing:border-box; min-width:78px; text-align:center; padding:4px 12px; border:1px solid transparent; font-family:'DM Sans',sans-serif; font-weight:600; }
    #revmodal .rev-restore { font-size:.72rem; border-color:var(--border); border-radius:5px; color:var(--muted); background:none; cursor:pointer; transition:color .12s,border-color .12s; }
    #revmodal .rev-restore:hover { color:var(--gold); border-color:var(--gold); }
    #revmodal .rev-restore:disabled { opacity:.5; cursor:default; }
    #revmodal .rev-current { font-size:.64rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
    #revmodal .rev-when { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:3px; }
    /* old value → new value, both LEFT-adjusted, arrow between; nowrap so the row never wraps — the box widens to fit instead */
    #revmodal .rev-change { font-size:.84rem; color:var(--text); display:flex; align-items:baseline; gap:10px; white-space:nowrap; }
    #revmodal .rev-from { color:var(--muted); text-decoration:line-through; }
    #revmodal .rev-arrow { color:var(--gold); flex:none; }
    #revmodal .rev-to { color:var(--text); font-weight:600; }
    #revmodal .rev-empty, #revmodal .rev-loading { padding:22px 18px; color:var(--muted); font-size:.84rem; text-align:center; }
    /* ---- Tag Color: the cell control + the Option-B picker (Joshua-ruled from the mockup) ---- */
    /* The CELL swatch is INERT — a div, never an input. It is the picker's launcher and nothing else, so there is
       no second write path and no OS dialog anywhere in the app. */
    .tagcell { display:flex; align-items:center; gap:9px; height:100%; padding:0 4px; }
    .tag-sw { width:22px; height:22px; flex:none; border-radius:5px; border:1px solid rgba(255,255,255,0.16); cursor:pointer; }
    .tag-sw:hover { border-color:var(--gold); }
    .tag-sw.none { border-style:dashed; border-color:rgba(255,255,255,0.22); }
    .tag-hex { color:var(--muted); font-size:.74rem; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
    .tag-hex.faint { opacity:.45; font-style:italic; }   /* inactive: colour kept on file, not rendered */
    #tagpicker { display:none; position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:1300; align-items:center; justify-content:center; }
    #tagpicker .tp-box { background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:10px; padding:18px; width:530px; max-width:94vw; box-shadow:0 18px 48px rgba(0,0,0,.6); }
    #tagpicker .tp-head { display:flex; align-items:baseline; margin-bottom:14px; }
    #tagpicker .tp-title { font-family:'DM Sans',sans-serif; font-weight:700; font-size:.9rem; color:var(--gold); }
    #tagpicker .tp-for { font-size:.72rem; color:var(--muted); margin-left:auto; }
    #tagpicker .tp-main { display:flex; gap:12px; }
    /* touch-action:none so a pen/touch drag paints the spectrum instead of scrolling the page away under it */
    #tagpicker .tp-sv { position:relative; width:206px; height:180px; flex:0 0 auto; border:1px solid var(--border); border-radius:4px; cursor:crosshair; touch-action:none; }
    #tagpicker .tp-sv:focus-visible, #tagpicker .tp-hue:focus-visible { outline:1px solid var(--gold); outline-offset:2px; }
    #tagpicker .tp-sv-cursor { position:absolute; width:12px; height:12px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.6); transform:translate(-50%,-50%); pointer-events:none; }
    #tagpicker .tp-preview { width:36px; height:180px; flex:0 0 auto; border:1px solid var(--border); border-radius:4px; }
    #tagpicker .tp-hue { position:relative; width:14px; height:180px; flex:0 0 auto; cursor:ns-resize; touch-action:none; border:1px solid var(--border); border-radius:4px;
      background:linear-gradient(to bottom,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%); }
    #tagpicker .tp-hue-thumb { position:absolute; left:-3px; right:-3px; height:6px; border-radius:3px; background:var(--text); border:1px solid #000; transform:translateY(-50%); pointer-events:none; }
    #tagpicker .tp-val { position:relative; width:14px; height:180px; flex:0 0 auto; cursor:ns-resize; touch-action:none; border:1px solid var(--border); border-radius:4px;
      background:linear-gradient(to bottom, #fff, #000); }
    #tagpicker .tp-val:focus-visible { outline:1px solid var(--gold); outline-offset:2px; }
    #tagpicker .tp-val-thumb { position:absolute; left:-3px; right:-3px; height:6px; border-radius:3px; background:var(--text); border:1px solid #000; transform:translateY(-50%); pointer-events:none; }
    /* The saturation bar — the square's X axis, exactly as .tp-val is its Y axis. Same 14x180 geometry, same
       thumb, same cursor: the two read as a pair because they are one. Its gradient is painted in tpRender()
       (it depends on the live hue and brightness), so no static background is declared here. */
    #tagpicker .tp-sat { position:relative; width:14px; height:180px; flex:0 0 auto; cursor:ns-resize; touch-action:none; border:1px solid var(--border); border-radius:4px; }
    #tagpicker .tp-sat:focus-visible { outline:1px solid var(--gold); outline-offset:2px; }
    #tagpicker .tp-sat-thumb { position:absolute; left:-3px; right:-3px; height:6px; border-radius:3px; background:var(--text); border:1px solid #000; transform:translateY(-50%); pointer-events:none; }
    #tagpicker .tp-fields { flex:1 1 auto; display:flex; flex-direction:column; gap:8px; min-width:0; }
    #tagpicker .tp-fld { display:flex; align-items:center; gap:8px; }
    #tagpicker .tp-fld label { font-size:.68rem; color:var(--muted); width:26px; flex:0 0 auto; }
    #tagpicker input { background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:4px; padding:4px 7px; font-family:'DM Sans',sans-serif; font-size:.75rem; width:100%; min-width:0; font-variant-numeric:tabular-nums; }
    #tagpicker input:focus { outline:none; border-color:var(--gold); }
    #tagpicker input[type=number]::-webkit-inner-spin-button, #tagpicker input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
    #tagpicker input[type=number] { -moz-appearance:textfield; }
    #tagpicker .tp-group { margin-top:15px; }
    #tagpicker .tp-glabel { font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
    #tagpicker .tp-swatches { display:grid; grid-template-columns:repeat(12,20px); gap:8px; }
    #tagpicker .tp-custom { display:flex; gap:8px; align-items:center; }
    #tagpicker .sw { width:20px; height:20px; padding:0; border-radius:50%; cursor:pointer; border:1px solid rgba(255,255,255,.14); background:transparent; transition:border-color .09s ease; }
    #tagpicker .sw:hover:not(:disabled) { border-color:var(--gold); }
    #tagpicker .sw.empty { border:1px dashed rgba(255,255,255,.22); cursor:default; }
    #tagpicker .sw-add { width:20px; height:20px; padding:0; border-radius:50%; cursor:pointer; margin-left:4px; background:transparent; border:1px solid rgba(201,168,76,.45); color:var(--gold); font-family:'DM Sans',sans-serif; font-size:.8rem; font-weight:600; line-height:1; }
    #tagpicker .sw-add:hover { background:var(--gold-soft); border-color:var(--gold); }
    #tagpicker .tp-strip { display:flex; align-items:center; gap:12px; margin-top:16px; }
    /* 84px, not the mockup's 120: the preview must be the width the chip ACTUALLY renders at on the sheet the
       picker lives on (the `empIni` Initials column), or it is previewing a chip that does not exist. */
    #tagpicker .tp-cell { width:84px; height:34px; flex:0 0 auto; display:flex; align-items:center; background:var(--surface-2); border:1px solid var(--border); border-radius:3px; }
    #tagpicker .tp-hint { font-size:.66rem; color:var(--muted); opacity:.65; }
    #tagpicker .tp-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
    #tagpicker .btn { font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:700; padding:6px 16px; border-radius:6px; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text); }
    #tagpicker .btn:hover { background:var(--surface-3); }
    .sortbtn { background:var(--surface-3); border:1px solid var(--border); color:var(--muted); font-family:'DM Sans',sans-serif; font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:5px; cursor:pointer; }
    .sortbtn:hover { color:var(--text); border-color:var(--gold); }
    .sortbtn.active { background:var(--gold-soft); color:var(--gold); border-color:var(--gold); }
    .sortnote { color:var(--muted); font-size:.68rem; margin-left:4px; font-style:italic; }
    /* write-back: row action + toast */
    .rowact { background:none; border:none; color:var(--muted); font-weight:700; cursor:pointer; font-size:1rem; line-height:1; }
    .rowact:hover { color:var(--gold); }
    .movebtn { background:none; border:none; color:var(--gold); font-size:1.05rem; font-weight:800; line-height:1; cursor:pointer; transition:transform .1s,color .12s; display:inline-flex; align-items:center; justify-content:center; }
    .movebtn:hover { color:#e8c66a; transform:scale(1.18); }
    .delbtn { background:none; border:none; color:#b06b6b; font-size:.82rem; font-weight:700; line-height:1; cursor:pointer; opacity:.7; transition:color .12s,opacity .12s; display:inline-flex; align-items:center; justify-content:center; }
    .delbtn:hover { color:#e06b6b; opacity:1; }
    .pinbtn { background:none; border:none; color:#56b877; cursor:pointer; opacity:.9; padding:0; display:inline-flex; align-items:center; transition:transform .1s,color .12s; }
    .pinbtn:hover { color:#74d694; transform:scale(1.18); }
    .pinbtn svg { display:block; }
    .ag-theme-quartz .actcell { display:flex !important; align-items:center; justify-content:center; padding-left:6px !important; padding-right:6px !important; overflow:visible; } /* center the row-action icons (→ / ✕) vertically + horizontally; keep them from clipping */
    /* edit: assignment-initial cells — the colour chip spans the FULL column width but is only one row tall, pinned to the top (so it never stretches a wrapped/tall row) */
    .ag-theme-quartz .ag-cell.initcell { display:flex !important; align-items:flex-start !important; padding:0 !important; }
    .ag-theme-quartz .ag-cell.initcell .ag-cell-wrapper, .ag-theme-quartz .ag-cell.initcell .ag-cell-value { width:100%; }
    .init-chip { display:flex; align-items:center; justify-content:center; height:26px; width:100%; font-weight:600; box-sizing:border-box; }
    #actmenu, #sortmenu { position:fixed; display:none; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 28px rgba(0,0,0,.6); min-width:170px; padding:5px; z-index:2000; font-size:.82rem; }
    .actmenu-h { color:var(--gold); font-weight:700; padding:6px 10px; font-size:.82rem; text-transform:uppercase; letter-spacing:.4px; }   /* v0.5a: bumped from .72 + kept centered (below) across all 3 menus */
    .actmenu-i { padding:7px 12px; border-radius:5px; cursor:pointer; color:var(--text); white-space:nowrap; }
    .actmenu-i:hover { background:var(--gold-soft); color:var(--gold); }
    .actmenu-i.on { color:var(--gold); font-weight:700; }   /* current sort in the quick-sort dropdown */
    .actmenu-i.cur { color:#fff; font-style:italic; }   /* current status in the → menu — inline indicator (white italic), no separate line */
    #actmenu .actmenu-h, #actmenu .actmenu-i { text-align:center; }   /* status-changer window: centered header + options */
    /* Order 19 task 1: an oversized menu can never render options below the fold — cap the height and scroll.
       The clamp in openActionMenu measures offsetHeight, which the cap bounds, so the menu also stays on screen. */
    #actmenu { max-height:70vh; overflow-y:auto; }
    #actmenu .actmenu-load { padding:8px 12px; color:var(--muted); text-align:center; }   /* in-flight placeholder — the #navmenu "Loading…" pattern (Joshua, behavior 2) */
    /* ── v0.5a "Modify Parties" — the BLUE ellipsis menu + its self-contained modals (post-filing party/claim edits) ── */
    .mpbtn { background:transparent; border:none; cursor:pointer; color:#4a90d9; display:inline-flex; align-items:center; justify-content:center; padding:2px; border-radius:5px; }
    .mpbtn:hover { background:rgba(74,144,217,.16); }
    .mpbtn .lu { width:16px; height:16px; }
    #mpmenu { position:fixed; z-index:6000; background:var(--surface,#1b2330); border:1px solid #2f4d6e; border-radius:9px; box-shadow:0 10px 34px rgba(0,0,0,.5); padding:5px; min-width:184px; display:none; }
    #mpmenu .mp-menu-h { color:#5aa2e6; font-weight:700; padding:6px 10px; font-size:.82rem; text-transform:uppercase; letter-spacing:.4px; text-align:center; }
    #mpmenu .mp-menu-i { padding:7px 12px; border-radius:6px; cursor:pointer; color:var(--text,#e8eef6); white-space:nowrap; display:flex; align-items:center; gap:9px; font-size:.82rem; }  /* match the yellow-arrow menu item size */
    #mpmenu .mp-menu-i:hover { background:rgba(74,144,217,.16); color:#7fbaf0; }
    #mpmenu .mp-menu-i .lu { width:15px; height:15px; color:#5aa2e6; flex:none; }
    #mpmenu .mp-menu-i-danger .lu { color:#d9645a; }                                   /* WO 20260716-0929: Undo = the reverse/destructive item → red accent */
    #mpmenu .mp-menu-i-danger:hover { background:rgba(217,100,90,.16); color:#e88b83; }
    .undo-list { display:flex; flex-direction:column; gap:6px; max-height:52vh; overflow-y:auto; }
    .undo-op { display:flex; align-items:flex-start; gap:9px; padding:9px 11px; border:1px solid var(--border); border-radius:8px; cursor:pointer; background:var(--surface-2); }
    .undo-op.disabled { opacity:.5; cursor:default; }
    .undo-op input { margin-top:2px; flex:none; }
    .undo-op-body { display:flex; flex-direction:column; gap:2px; }
    .undo-op-main { font-weight:600; font-size:.86rem; color:var(--text); }
    .undo-op-sub { font-size:.8rem; color:var(--text); }
    .undo-op-meta { font-size:.75rem; color:var(--muted); }
    .undo-op-hint { font-size:.72rem; color:var(--muted); font-style:italic; }
    .undo-sum { margin:4px 0 8px; padding-left:18px; font-size:.84rem; color:var(--text); }
    .undo-sum li { margin:2px 0; }
    .undo-warn { color:#e0a24a; }
    /* right-click quick-jump menu on the Sheets / Reports / Templates nav buttons — admin/dev entries green, rest white */
    #navmenu { position:fixed; z-index:6000; display:none; }   /* bare container; the two columns are fixed-positioned children so col-2 can flip past the viewport edge */
    #navmenu .nav-col { position:fixed; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 28px rgba(0,0,0,.6); min-width:186px; max-width:300px; padding:5px; font-size:.82rem; max-height:82vh; overflow:auto; }
    #navmenu .nav-menu-h { color:var(--gold); font-weight:700; padding:6px 10px; font-size:.82rem; text-transform:uppercase; letter-spacing:.4px; text-align:center; }
    #navmenu .nav-menu-i { padding:7px 12px; border-radius:6px; cursor:pointer; color:var(--text); white-space:nowrap; display:flex; align-items:center; justify-content:space-between; gap:12px; }
    #navmenu .nav-menu-i.has-sub { padding-right:8px; }
    #navmenu .nav-menu-i:hover, #navmenu .nav-menu-i.hot { background:var(--surface-3); }
    #navmenu .nav-menu-i.dev { color:#5fae6a; }                       /* admin/dev headers = green (matches the dev sheets + Diagnostic reports) */
    #navmenu .nav-menu-i.dev:hover, #navmenu .nav-menu-i.dev.hot { color:#84d68f; background:var(--surface-3); }
    #navmenu .nav-caret { color:var(--muted); font-size:.95em; flex:none; }
    #navmenu .nav-sub-sec { color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.4px; padding:7px 10px 3px; }
    #navmenu .nav-menu-load { padding:8px 12px; color:var(--muted); }
    /* v0.5a: the status/stage (yellow-arrow) menu items mirror the blue …-menu items EXACTLY (flex + 9px icon↔label gap,
       6px radius, left-aligned) — only the color differs; the colored HEADER stays centered (1338) across all 3 menus */
    #actmenu.actmenu--left .actmenu-i { text-align:left; display:flex; align-items:center; gap:9px; border-radius:6px; }
    #actmenu .actmenu-emoji { display:inline-flex; align-items:center; flex:none; }
    #actmenu .actmenu-emoji .lu { width:15px; height:15px; color:var(--gold); flex:none; }   /* v0.5a: Lucide status glyphs, gold-tinted to match the yellow menu */
    /* v0.5a: the AMEND stepper wears the blue accent (everything gold → blue) so it reads as an amend window */
    #addbox.lit-amend { --gold:#4a90d9; }
    #addbox.lit-amend .lit-step.active { color:#fff; }
    #addbox.lit-amend .btn.primary { color:#fff; }
    .mp-ov { position:fixed; inset:0; z-index:6100; background:rgba(6,10,16,.6); display:flex; align-items:center; justify-content:center; }
    /* v0.5a: --gold is re-scoped BLUE inside the Modify-Parties modals (same trick as #addbox.lit-amend) so the shared
       .btn.primary / accent chrome reads blue here without a parallel ruleset; checkboxes accent blue to match. */
    /* The Modify-Parties modals are styled to be BYTE-FOR-BYTE the #addmodal + lit-stepper wizard chrome, with --gold
       re-scoped BLUE (same trick as #addbox.lit-amend) so every gold accent reads blue. No bespoke "similar" styling. */
    .mp-modal { --gold:#4a90d9; accent-color:var(--gold); width:min(580px,93vw); max-height:90vh; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.5); }
    h3.mp-h { font-family:'DM Sans',sans-serif; font-weight:700; font-size:.95rem; margin:0; padding:16px 22px; border-bottom:1px solid var(--border); color:var(--text); }   /* == #addmodal h3 */
    h3.mp-h span { color:var(--gold); text-transform:capitalize; }   /* == #addmodal h3 span / lit-headrow: the case name in blue */
    /* two-column body (fields left · target matrix right) for the Doe Amendment (Joshua) */
    .mp-modal:has(.mp-cols) { width:min(760px,94vw); }
    .mp-cols { display:flex; gap:26px; align-items:flex-start; }
    .mp-cols .mp-col-l { flex:0 0 300px; min-width:0; }
    .mp-cols .mp-col-r { flex:1 1 auto; min-width:0; }
    .mp-cols .mp-col-r > label { display:block; font-size:.72rem; color:var(--muted); margin-bottom:4px; }   /* right-column heading == #addmodal label */
    .mp-body { padding:18px 22px; }                                                                                           /* == #addmodal .body */
    /* mpStepperModal chrome — modeled on the litigation stepper's rail/title (blue via the mp-modal --gold override) */
    .mp-rail { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1px; padding:12px 18px 0; font-family:'DM Sans',sans-serif; font-size:.8rem; }
    .mp-step { color:var(--muted); padding:2px 9px; border-radius:4px; }
    .mp-step.active { color:#fff; background:var(--gold); font-weight:700; }
    .mp-step.done { color:var(--gold); }
    .mp-arrow { color:var(--border); margin:0 3px; }
    .mp-steptitle { padding:8px 22px 0; font-family:'DM Sans',sans-serif; font-weight:700; font-size:.9rem; color:var(--gold); }
    .mp-modal .btn { font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:700; padding:6px 16px; border-radius:6px; cursor:pointer; border:1px solid var(--border); background:var(--surface-2); color:var(--text); }  /* == #addmodal .btn */
    .mp-modal .btn:hover { background:var(--surface-3); }
    .mp-modal .btn.primary { background:var(--gold); color:#fff; border-color:var(--gold); }                                  /* == #addbox.lit-amend .btn.primary (blue, white text) */
    .mp-modal .btn.primary:hover { filter:brightness(1.08); }
    .mp-modal .btn:disabled { opacity:.6; cursor:default; }
    .mp-note { font-size:.82rem; color:var(--muted); margin:0 0 18px; line-height:1.5; }                                       /* == .lit-help */
    .mp-fld { margin-bottom:14px; display:flex; flex-direction:column; gap:4px; }                                             /* == #addmodal .fld (+ row gap) */
    .mp-fld > label { font-size:.72rem; color:var(--muted); }                                                                 /* == #addmodal label */
    .mp-fld input[type=text], .mp-fld select { background:var(--surface-2); border:1px solid var(--border); border-radius:6px; color:var(--text); font-family:'DM Sans',sans-serif; padding:7px 10px; font-size:.82rem; width:100%; box-sizing:border-box; }  /* == #addmodal input */
    .mp-fld input[type=text]:focus, .mp-fld select:focus { outline:none; border-color:var(--gold); }
    .mp-fld input[type=text]::placeholder { color:var(--muted); opacity:.85; }
    /* Doe-combo autocomplete dropdown (wireLitCombo sets position:fixed + left/top/width/z-index:3000 inline; only the
       look is styled here) — matches the litigate/complaint combos. z-index 3000 sits above the modal's form fields
       within the .mp-ov stacking context (6100); the mp-sel selects (6200) still win when open. */
    .mp-fld .combolist { max-height:210px; overflow:auto; background:var(--surface-2); border:1px solid var(--gold); border-radius:6px; box-shadow:0 6px 22px rgba(0,0,0,.55); }
    .mp-fld .comboopt { padding:6px 10px; font-size:.82rem; cursor:pointer; color:var(--text); }
    .mp-fld .comboopt:hover { background:var(--surface-3); }
    .mp-fld .comboempty { padding:6px 10px; font-size:.8rem; color:var(--muted); }
    .mp-chks { display:flex; flex-direction:column; gap:2px; max-height:42vh; overflow:auto; padding:2px; }                    /* == .lit-coalist */
    .mp-chk, .mp-mx { display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--text); padding:3px 4px; border-radius:4px; cursor:pointer; }   /* == .lit-coa */
    .mp-chk:hover, .mp-mx:hover { background:var(--surface-2); }
    .mp-chk input, .mp-mx input { width:15px; height:15px; accent-color:var(--gold); flex:0 0 auto; }                          /* == .lit-coa input (blue via scoped --gold) */
    .mp-mx em { color:var(--muted,#93a2b5); font-style:italic; }
    .mp-mxgrid { display:flex; flex-direction:column; gap:2px; max-height:340px; overflow:auto; border:1px solid var(--border,#26303f); border-radius:9px; padding:8px; }
    /* v0.5a: the Dismiss matrix — mirrors the litigation stepper's targeted matrix (.lit-matrix), scoped to .mp-modal + blue.
       Everything starts UNCHECKED (check = dismiss); a defendant's column-header check dismisses the whole column; a cell with
       no claim alleged is greyed + not selectable. */
    .mp-modal:has(.mp-matrix) { width:min(1120px,96vw); }                                                                     /* the Dismiss matrix window matches the litigation/amend stepper (#addmodal .box.lit) so they read as one system (Joshua) */
    .mp-modal .mp-mxwrap { overflow:auto; max-height:60vh; }                                                                  /* matches the litigation stepper's .lit-body max-height; horizontal scroll is the only-when-forced fallback (names don't wrap) */
    .mp-modal table.mp-matrix { border-collapse:collapse; font-size:.78rem; font-family:'DM Sans',sans-serif; width:100%; }   /* == .lit-matrix */
    .mp-modal .mp-matrix th, .mp-modal .mp-matrix td { border:1px solid var(--border); padding:5px 8px; text-align:center; }
    .mp-modal .mp-matrix th { color:var(--gold); font-weight:600; background:var(--surface-2); white-space:nowrap; }         /* == .lit-matrix th (blue via scoped --gold) */
    .mp-modal .mp-matrix .mp-mxname { text-align:left; color:var(--text); font-weight:400; white-space:nowrap; padding-right:16px; }   /* == .lit-mxname */
    .mp-modal .mp-matrix .mp-mxptop { color:var(--text); font-weight:700; font-size:.82rem; background:var(--surface-3); white-space:nowrap; }   /* == .lit-mxptop; nowrap so party names don't cramp */
    .mp-modal .mp-matrix .mp-mxdtop { color:var(--text); font-weight:600; font-size:.72rem; white-space:nowrap; }             /* == .lit-mxdtop */
    .mp-modal .mp-matrix .mp-mxcorner { background:transparent; border:none; }
    .mp-modal .mp-matrix td:not(.mp-mxname), .mp-modal .mp-matrix th:not(.mp-mxcorner):not(.mp-mxname) { min-width:64px; }    /* checkbox columns size to content (was a forced 110px → cramped wraps) */
    /* both party headers: name then checkbox to the RIGHT (Joshua) */
    .mp-modal .mp-mxdhead, .mp-modal .mp-mxphead { display:flex; align-items:center; justify-content:center; gap:8px; }
    .mp-modal .mp-mxrhead { display:flex; align-items:center; gap:9px; }   /* COA row header: left-side dismiss-whole-COA checkbox + the claim name */
    .mp-modal .mp-matrix input { width:14px; height:14px; accent-color:var(--gold); cursor:pointer; }
    .mp-modal .mp-matrix td.mp-mxna { background:rgba(255,255,255,.02); }
    .mp-modal .mp-matrix td.mp-mxna input, .mp-modal .mp-matrix input:disabled { accent-color:#3a4757; opacity:.35; cursor:not-allowed; }
    .mp-modal .mp-matrix .mp-pgsep { border-left:2px solid var(--gold) !important; }
    /* Freeze the claim-name column + BOTH header rows so you never lose your bearings scrolling a wide/tall matrix (Joshua). Mirrors the .d-tbl sticky pattern; --mp-mxh1 (the plaintiff row's measured height) docks the defendant row flush beneath it. */
    .mp-modal .mp-matrix thead th { position:sticky; top:0; z-index:2; }
    .mp-modal .mp-matrix thead tr:nth-child(2) th { top:var(--mp-mxh1,29px); }
    .mp-modal .mp-matrix td.mp-mxname { position:sticky; left:0; z-index:1; background:var(--surface); border-right:1px solid var(--border); }
    .mp-modal .mp-matrix th.mp-mxcorner { position:sticky; left:0; z-index:3; background:var(--surface-2); border-right:1px solid var(--border); }
    .mp-foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 22px; border-top:1px solid var(--border,#26303f); }
    /* PARITY Part B: `.mp-sel` is now a real <select> that goldSelect converts, so the div-dropdown chrome
       (mp-sel-btn / -lbl / -arrow / -list / -opt) is RETIRED. B-4: the field must size the incoming .gs-wrap —
       same fix class as the other converted homes — and a disabled select dims via the property, not a class. */
    .mp-sel { width:100%; }
    .mp-fld .gs-wrap { width:100%; }
    .mp-fld .gs-input { width:100%; box-sizing:border-box; }
    .mp-sel:disabled + .gs-input, .gs-input:disabled { opacity:.4; cursor:not-allowed; }   /* not applicable for the selected type — visible but blanked + dimmed (the adversaries-grid convention, not hidden) */
    /* (Joshua 20260722) a surface whose boot request failed — a real, actionable state instead of a silent void */
    .bootfail { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:48px 24px; text-align:center; }
    .bootfail-t { color:var(--text); font-size:.95rem; font-weight:700; }
    .bootfail-m { color:var(--muted); font-size:.82rem; max-width:440px; line-height:1.5; }
    .bootfail-btn { margin-top:4px; background:var(--gold); color:#1a1a1a; border:none; border-radius:6px; padding:8px 20px; font-family:'DM Sans',sans-serif; font-weight:700; font-size:.82rem; cursor:pointer; }
    .bootfail-btn:hover { filter:brightness(1.08); }
    /* Order 32 (shape D) — the SAME bootfail chrome, sized for an in-surface host (a panel, a list, a wizard
       body) rather than a whole surface. A modifier on the family, not a second look: a load failure has to read
       as the same kind of thing wherever it lands. Themed through the CSS vars like everything else. */
    .bootfail.bootfail-in { padding:22px 16px; gap:8px; }
    .bootfail-in .bootfail-t { font-size:.86rem; }
    .bootfail-in .bootfail-m { font-size:.78rem; max-width:360px; }
    .bootfail-in .bootfail-btn { padding:6px 16px; font-size:.78rem; }
    #toast { position:fixed; bottom:54px; left:50%; transform:translateX(-50%); color:#fff; font-weight:600; padding:8px 18px; border-radius:8px; font-size:.85rem; opacity:0; transition:opacity .25s; z-index:2100; pointer-events:none; }
    #toast .toast-undo { pointer-events:auto; margin-left:14px; background:none; border:1px solid rgba(255,255,255,.65); color:#fff; font-family:'DM Sans',sans-serif; font-weight:700; font-size:.74rem; padding:2px 10px; border-radius:5px; cursor:pointer; }
    #toast .toast-undo:hover { background:rgba(255,255,255,.2); }
    .ag-theme-quartz .ag-cell-inline-editing { background:var(--surface-3); }
    /* account / sign-out (Clerk) */
    #account { margin-left:8px; display:none; align-items:center; gap:8px; }
    .acct-email { color:var(--muted); font-size:.78rem; }
    .signout { background:var(--surface-3); border:1px solid var(--border); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.78rem; font-weight:600; padding:3px 10px; border-radius:5px; cursor:pointer; }
    .signout:hover { border-color:var(--gold); color:var(--gold); }
    /* profile menu button (next to the account email) */
    .profile-btn { margin-left:8px; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0;
      background:var(--surface-3); border:1px solid var(--border); border-radius:50%; color:var(--muted); cursor:pointer; transition:color .12s,border-color .12s; }
    .profile-btn:hover { color:var(--gold); border-color:var(--gold); }
    .profile-btn svg { display:block; }
    /* v0.6b profile button. (Joshua 2026-07-20) the red unread badge (.notif-badge) was REMOVED — the count moved to
       the feed header as the "N Cards" counter (.nf-count). The icon keeps its 1px downward nudge. */
    .profile-btn { position:relative; transform:translateY(1px); }
    /* PUSH 17 A-10 (Joshua 10-02: "its the padding between the two icons and flip the home to the right of the person"):
       Home is the row's last child, right of the account button, 6px apart: .shell-right's gap:10px plus -4px here (in
       place of .profile-btn's 8px). Scoped to this pair, so every other item in the row keeps its spacing. */
    #profile-btn + #home-btn { margin-left:-4px; }
    /* v0.6b profile SURFACE — the two-column skeleton kept (nav left, content right), scaled FULL-SCREEN
       under the persistent 34px header (the way Sheets/Reports occupy the frame; the pm-box modal is retired) */
    /* Edits-1: the Account Settings surface uses BLUE (the "…" menu blue), scoped via a subtree --gold override
       so NOTHING outside #profilemodal changes — every descendant's var(--gold)/var(--gold-soft) resolves blue here.
       Exception (Joshua): the top accent line is house gold, hardcoded so the blue --gold remap doesn't reach it — keep it #c9a84c. */
    #profilemodal { --gold:#4a90d9; --gold-soft:rgba(74,144,217,.18); }
    /* (Joshua 2026-07-22) the LEFT NAV and the ✕ hover are HOUSE GOLD. Scoped re-declaration rather than a third
       hardcoded #c9a84c: the existing rules keep reading var(--gold)/var(--gold-soft), and the blue remap above
       still governs everything in the content pane. Nothing else inside .pm-nav reads either token. */
    #profilemodal .pm-nav, #profilemodal .pm-x { --gold:var(--gold-root); --gold-soft:rgba(201,168,76,0.15); }
    #profilemodal { display:none; position:fixed; top:var(--shell-top);   /* PUSH 18 Cure 1: below the whole header, the TEST SITE banner included */
                     left:0; right:0; bottom:0; background:var(--bg); z-index:1260; }
    #profilemodal .pm-box { background:var(--bg); border:none; border-top:3px solid #c9a84c; border-radius:0;
      width:100%; height:100%; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; }
    #profilemodal .pm-head { display:flex; align-items:center; justify-content:space-between; padding:13px 22px; border-bottom:1px solid var(--border); flex:none; background:var(--surface); }
    #profilemodal .pm-title { font-family:'DM Sans',sans-serif; font-weight:700; font-size:.92rem; color:#fff; letter-spacing:.03em; } /* the top "Account Settings" label stays WHITE (Joshua), not the accent */
    #profilemodal .pm-x { background:none; border:none; color:var(--muted); font-size:1.25rem; line-height:1; cursor:pointer; padding:0 4px; }
    #profilemodal .pm-x:hover { color:var(--gold); }
    #profilemodal .pm-body { flex:1; display:flex; min-height:0; }
    #profilemodal .pm-nav { flex:none; width:248px; border-right:1px solid var(--border); padding:16px 12px 14px; display:flex; flex-direction:column; gap:3px; background:var(--surface-2); overflow-y:auto; }
    /* the signed-in-as block sits at the NAV BOTTOM, just above Sign Out, in a rounded 1px semi-muted box (Joshua) */
    #profilemodal .pm-acct { margin-top:auto; margin-bottom:8px; padding:9px 12px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.02); }
    #profilemodal .pm-acct-center { text-align:center; }
    #profilemodal .pm-acct-label { color:var(--muted); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; }
    #profilemodal .pm-acct-name { color:var(--text); font-size:.86rem; font-weight:600; word-break:break-word; margin-top:2px; }
    #profilemodal .pm-acct-email { color:var(--muted); font-size:.72rem; word-break:break-all; margin-top:2px; }
    #profilemodal .pm-navitem { display:flex; align-items:center; gap:9px; text-align:left; background:none; border:none; color:var(--text); font-family:'DM Sans',sans-serif; font-size:.84rem; font-weight:600;
      padding:10px 12px; border-radius:6px; cursor:pointer; transition:background .12s,color .12s; }
    #profilemodal .pm-navitem:hover { background:var(--surface-3); color:var(--gold); }
    #profilemodal .pm-navitem.active { background:var(--gold-soft); color:var(--gold); }
    #profilemodal .pm-navico { display:inline-flex; flex:none; }
    #profilemodal .pm-navico .lu { width:19px; height:19px; }   /* (Joshua) 15px rendered these poorly */
    #profilemodal .pm-navbadge { display:none; margin-left:auto; min-width:16px; padding:1px 5px; box-sizing:border-box; background:#c0392b; color:#fff;
      border-radius:999px; font-size:.62rem; font-weight:800; line-height:1.5; text-align:center; }
    #profilemodal .pm-navbadge.on { display:inline-block; }
    #profilemodal .pm-signout { align-self:stretch; display:flex; align-items:center; justify-content:center; gap:8px; text-align:center; background:none; border:1px solid var(--border); color:var(--muted);
      font-family:'DM Sans',sans-serif; font-size:.8rem; font-weight:600; padding:9px 26px; border-radius:6px; cursor:pointer; transition:color .12s,border-color .12s; }
    #profilemodal .pm-signout:hover { color:#fff; border-color:#fff; }
    #profilemodal .pm-signout .lu { width:14px; height:14px; }
    #profilemodal .pm-content { flex:1; padding:26px 34px; overflow-y:auto; min-width:0; }
    #profilemodal .pm-sec { max-width:1040px; }
    /* (Joshua, Edits 3) THE SECTION TITLE PINS ON EVERY TAB — the default, not a per-section opt-in.
       Live Stream Settings already kept its title fixed, but by a different mechanism (.pm-sec-fill hands the
       height down the flex chain so only .np-scroll moves). That mechanism only suits a section whose body is
       one scrollable box; the rest scroll .pm-content itself, so their titles scrolled away. Rather than
       convert every section to the fill pattern, the title sticks inside the existing scroller.
       The offsets are doing real work: top:-26px and the negative margins cancel .pm-content's own padding, so
       the title spans the full pane and content slides UNDER it instead of appearing in the 26px gap above.
       :not(.pm-sec-fill) leaves Live Stream's arrangement exactly as it was — it does not need this and
       stacking two mechanisms would fight over the same edge.
       The sticky unit is the .pm-sec-head BLOCK — title AND helper line together, which is what Live Stream
       does and what Joshua asked for. A wrapper rather than two sticky siblings: siblings each pin to their
       own offset, so the helper would need a magic number equal to the title's rendered height and would
       drift the moment a title wrapped to two lines. */
    #profilemodal .pm-content > .pm-sec:not(.pm-sec-fill) > .pm-sec-head {
      position:sticky; top:-26px; z-index:4; background:var(--bg);
      margin:-26px -34px 4px; padding:26px 34px 10px;
    }
    #profilemodal .pm-sec-head > .pm-sec-sub { margin-bottom:0; }   /* the block owns the gap below it now */
    /* (Joshua) Live Stream Settings: the toggle list scrolls in its own INVISIBLE box (.np-scroll) while the
       section title / sub-line / Restore Defaults stay fixed — scrolling moves the list, never the screen.
       When that section is mounted, .pm-content stops scrolling and hands its height down the flex chain;
       every other section keeps the plain scrolling .pm-content. The column headers pin sticky inside the box
       (solid --bg so rows slide UNDER them, and the th border survives as the pinned edge). */
    #profilemodal .pm-content:has(.pm-sec-fill) { display:flex; flex-direction:column; overflow:hidden; }
    /* (Joshua) the settings section uses the WHOLE pane — the 1040px cap made a dead zone right of the
       description column. Columns distribute proportionally below. */
    #profilemodal .pm-sec-fill { flex:1; display:flex; flex-direction:column; min-height:0; max-width:none; }
    #profilemodal .np-scroll { flex:1; min-height:0; overflow-y:auto; overflow-x:auto; }
    #profilemodal .np-scroll .np-tbl thead th { position:sticky; top:0; background:var(--bg); z-index:2; }
    /* ── the Notifications tab (unread = bold + gold left bar, the .dv.pop family) ── */
    /* Live Stream v0 — the notifications feed on the HOME surface (dash-main); centered, scrolls, reflows as the case sidebar collapses */
    /* (Joshua, Edits-8 follow-up) the feed column is CAPPED and centered — with the meta stacked on the card's
       right edge, a monitor-wide card was a hollow middle; slimmer cards read as one column. */
    /* (Joshua) the toolbar is LOCKED and ONLY the card list scrolls: .ls-feed is a flex column that does NOT
       scroll (overflow:hidden); the toolbar + read-only banner are the fixed region at the top; #nf-list is the
       sole scroll container. The horizontal gutter moves onto #nf-list (negative margin cancels .ls-feed's side
       pad, its own padding re-insets the cards) so the pinned band's -11px outdent still sits inside padding and
       nothing scrolls under the toolbar. */
    .ls-feed { max-width:none; margin:0 -22px 0 0; padding:14px 21px 0 12px; height:100%; overflow:hidden; box-sizing:border-box; display:flex; flex-direction:column; }
    #dash-main:has(.ls-feed) { padding-top:0; }   /* (Joshua) equalize the toolbar's top gap to its bottom: drop dash-main's top pad on the LS feed surface so the top gap = .ls-feed's 14px pad = .nf-head's 14px margin-bottom. :has scopes it to the feed only — Sheets/Reports/Case keep the standard top pad. */
    .ls-feed > .pm-sec { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
    .ls-feed .nf-list { flex:1 1 auto; min-height:0; overflow-y:auto; margin:0 -21px 0 -12px; padding:0 21px 48px 12px; }
    /* §7: the home surface does not announce itself — the page title + broadcast glyph were REMOVED
       (the glyph stays on the "Live Stream Settings" account-menu entry, which is unchanged). */
    /* (Joshua) the Inbox/Archive switch sits left; Filter/Group/Sort + the "..." batch menu are icon-only and
       cluster together on the right. */
    .nf-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:0 0 14px; flex:none; }   /* (Joshua) fixed at the top of the .ls-feed flex column — #nf-list scrolls beneath it, so nothing passes behind the toolbar */
    /* (Joshua 2026-09-25) ONE bar, three zones, on the feed's own black (the tabs' shaded strip is gone): toggles LEFT,
       tabs on the bar's TRUE centre, controls RIGHT. Both side zones are held to the wider side's content width
       (--nf-side, set by nfSyncBar), so the centre zone is centred on the bar; below 2 sides + the tabs the right
       zone wraps to its own line (and, narrower still, the tabs too) — nothing overlaps. */
    .nf-zone { flex:1 1 0; min-width:var(--nf-side, max-content); display:flex; align-items:center; }
    .nf-zone-r { justify-content:flex-end; }
    .nf-tabs { flex:1 1 auto; display:flex; justify-content:center; gap:2px; }
    /* The Live Stream's two tabs keep their own look (Joshua, on push 13's Live Stream reach: "nothing else in push 13 may
       change Live Stream's look or content"): F-15's one tab style does not reach them, so their pre-F-15 .tpl-tab
       values are stated here — muted, gold underline when active — trimmed to the 30px height of the switches beside them. */
    .nf-tabs .tpl-tab { padding:6px 14px; font-size:0.8rem; font-weight:500; border-radius:0; border-bottom:2px solid transparent; }
    .nf-tabs .tpl-tab:hover { color:var(--gold); background:none; }
    .nf-tabs .tpl-tab.active { color:var(--gold); border-bottom-color:var(--gold); font-weight:600; }
    .nf-head.nf-on-notifications .nf-activity-only { display:none; }   /* (Joshua) View and Filter serve Case Activity only; Expand and "…" stay (D-32 item 1, amending D-28) */
    .nf-head-l { display:flex; flex:none; align-items:center; gap:8px; }   /* (Edits 9) Inbox/Archive switch + the unread-only toggle cluster on the LEFT */
    .nf-count { color:var(--gold); font-weight:700; font-size:0.78rem; white-space:nowrap; margin-left:2px; }   /* (Joshua 2026-07-20) "N Cards" — the current view's card count, at the END of the Inbox/All switch trio; models the grid's gold "N rows" (#crumb #count) */
    .nf-controls { display:flex; flex:none; align-items:center; gap:8px; }
    /* (View as, ARCH WO 20260719-2008) the manager stream selector — modeled on the Reports/Sheets people <select> (gold accent), sits at the LEFT of the icon cluster; .on = viewing someone else */
    .nf-viewas { background:var(--surface-2); border:1px solid var(--border); color:var(--text); font-family:'DM Sans',sans-serif; font-size:.76rem; padding:5px 9px; border-radius:6px; max-width:190px; cursor:pointer; accent-color:var(--gold); }
    .nf-viewas:focus { outline:none; border-color:var(--gold); }
    .nf-viewas.on { border-color:var(--gold); color:var(--gold); font-weight:700; }
    /* (Joshua) the manager stream selector is goldSelect-converted; mute its visible control (transparent + muted text) so it blends with the adjacent icon buttons instead of standing out. Hover/focus still goes gold like the icons. */
    .gs-wrap:has(> .nf-viewas) .gs-input { background:transparent; color:var(--muted); }
    .nf-viewas-banner { display:flex; align-items:center; gap:8px; margin:0 -11px 12px; padding:8px 12px; border:1px solid var(--gold); border-radius:12px; background:none; color:var(--gold); font-size:.82rem; }   /* (Joshua) no shading — keep the gold box only; margin/-11px + radius match the pinned .nf-band so the two boxes line up */
    .nf-viewas-banner svg { width:16px; height:16px; flex:none; }
    .nf-viewas-banner strong { font-weight:700; }
    .nf-viewas-banner button { margin-left:auto; background:none; border:1px solid var(--gold); color:var(--gold); font-family:'DM Sans',sans-serif; font-size:.74rem; padding:3px 10px; border-radius:6px; cursor:pointer; }
    .nf-viewas-banner button:hover { background:var(--gold); color:#1a1400; }
    .nf-sort { display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; background:var(--surface-3); }
    .nf-sort button { background:none; border:none; color:var(--muted); font-family:'DM Sans',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.03em; padding:8px 14px; cursor:pointer; transition:all .15s; }
    .nf-sort button.active { background:var(--gold); color:#1a1400; }
    /* Inbox⇄Archive view switch — a DIRECT copy of the Tasks Active⇄Completed sliding switch (.taskswitch),
       with new labels (Joshua, Edits 7): a dark track, a gold knob that holds the state icon and slides
       left(Inbox)⇄right(Archive), one label shown at a time. justify-self:start keeps the ABSOLUTE-centre grid
       from stretching it across the left 1fr column. */
    .nf-viewswitch { position:relative; display:inline-flex; align-items:center; justify-self:start; flex:none; width:120px; height:30px; padding:0; background:var(--surface-3); border:1px solid var(--border); border-radius:999px; cursor:pointer; overflow:hidden; transition:border-color .15s; font-family:'DM Sans',sans-serif; }
    .nf-viewswitch:hover { border-color:var(--gold); }
    .nf-viewswitch-knob { position:absolute; top:50%; left:2px; transform:translateY(-50%); width:34px; height:24px; border-radius:999px; background:var(--gold); color:#1a1400; display:inline-flex; align-items:center; justify-content:center; transition:left .18s cubic-bezier(.4,0,.2,1); z-index:1; box-shadow:0 1px 3px rgba(0,0,0,.4); }
    .nf-viewswitch.archive .nf-viewswitch-knob { left:calc(100% - 36px); }   /* slides right for Archive (34px knob + 2px inset) */
    .nf-viewswitch-knob .lu { width:13px; height:13px; }
    .nf-viewswitch-label { position:absolute; font-size:.7rem; font-weight:700; letter-spacing:.03em; color:var(--gold); white-space:nowrap; text-align:center; transition:left .18s, right .18s; }
    .nf-viewswitch:not(.archive) .nf-viewswitch-label { left:40px; right:6px; }   /* knob left → label centered in the right of the track */
    .nf-viewswitch.archive .nf-viewswitch-label { left:6px; right:40px; }         /* knob right → label centered in the left of the track */
    /* (Edits 9, Joshua) the All/Unread slider — a SECOND sliding switch beside Inbox/Archive; `.on` = Unread (knob slides right, label to the left). Default (no .on) = All, via the shared :not(.archive) label rule above. */
    .nf-readswitch.on .nf-viewswitch-knob { left:calc(100% - 36px); }
    .nf-readswitch.on .nf-viewswitch-label { left:6px; right:40px; }
    .nf-head.archive .nf-more { display:none; }   /* the "..." batch menu is inbox-only; hidden in archive without rebuilding the head (keeps the switch persistent so it slides). Expand All is a view control, not a mutation, so it sits OUTSIDE this span and survives in archive alongside View/Filter */
    .nf-bulk { display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--border); color:var(--muted); font-family:'DM Sans',sans-serif;
      font-size:.72rem; font-weight:600; padding:8px 12px; border-radius:6px; cursor:pointer; transition:color .12s,border-color .12s; }   /* (Joshua) vertical padding 5->8 — the pills stop reading squished */
    .nf-bulk:hover { color:var(--gold); border-color:var(--gold); }
    .nf-bulk.on { color:var(--gold); border-color:var(--gold); }   /* (Joshua) active = gold text + gold border only; no fill shading */
    .nf-bulk .lu { width:13px; height:13px; }
    .nf-bulk.nf-icon { padding:8px; }   /* (Joshua) icon-only Filter/Group/Sort/... — square buttons, no text/chevron */
    .nf-bulk:disabled { opacity:.38; cursor:not-allowed; }   /* (Joshua 20260721) greyed + unclickable — the categories button in a View that has none (Recency) */
    .nf-bulk:disabled:hover { color:var(--muted); border-color:var(--border); }
    /* type-filter dropdown: a bulk-style button + a checkbox popover */
    .nf-filter { position:relative; display:inline-flex; }
    .nf-filter-menu { position:absolute; top:calc(100% + 5px); right:0; z-index:20; min-width:210px; width:max-content; max-width:min(92vw,420px); background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.5); padding:8px; }   /* (Joshua) right-anchored — the Filter/Group/Sort buttons now sit on the right */
    .nf-filter-menu[hidden] { display:none; }
    /* (Joshua 20260721) the batch actions live behind the "..." again — parked LAST, far right of the toolbar */
    .nf-more { position:relative; display:inline-flex; }
    .nf-more-menu { position:absolute; top:calc(100% + 5px); right:0; z-index:20; min-width:180px; background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.5); padding:6px; }
    .nf-more-menu[hidden] { display:none; }
    .nf-moreopt { display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:none; color:var(--text); font-family:'DM Sans',sans-serif; font-size:.78rem; font-weight:400; padding:7px 9px; border-radius:5px; cursor:pointer; }   /* (Joshua, Edits 7) unbold the batch-menu labels */
    .nf-moreopt:hover { background:var(--surface-3); color:var(--gold); }
    .nf-moreopt .lu { width:13px; height:13px; }
    .nf-filter-actions { display:flex; gap:8px; padding:2px 4px 8px; border-bottom:1px solid var(--border); margin-bottom:6px; }
    .nf-filter-actions button { flex:1; background:none; border:1px solid var(--border); color:var(--muted); font-family:'DM Sans',sans-serif; font-size:.68rem; font-weight:700; padding:4px 6px; border-radius:5px; cursor:pointer; transition:color .12s,border-color .12s; }
    .nf-filter-actions button:hover { color:var(--gold); border-color:var(--gold); }
    .nf-filter-list { display:flex; flex-direction:column; gap:2px; }
    .nf-filter-list label { display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:5px; color:var(--text); font-size:.78rem; cursor:pointer; white-space:nowrap; }
    .nf-filter-list label:hover { background:var(--surface-3); }
    .nf-filter-list input[type="checkbox"] { accent-color:#0f0f0f; width:14px; height:14px; margin:0; cursor:pointer; flex:none; }   /* (Joshua) material black — every category row carries its own hue, so the control itself stays colourless (white tick on near-black) */
    #nf-group-menu { min-width:150px; }
    .nf-groupopt { display:block; width:100%; text-align:left; background:none; border:none; color:var(--text); font-family:'DM Sans',sans-serif; font-size:.78rem; padding:6px 9px; border-radius:5px; cursor:pointer; }
    .nf-groupopt:hover { background:var(--surface-3); }
    .nf-groupopt.sel { background:var(--gold-soft, rgba(201,168,76,.18)); color:var(--gold); font-weight:700; }
    .nf-group-h.nf-case-h { color:var(--text); text-transform:none; letter-spacing:0; font-size:.82rem; font-weight:700; }
    .nf-list { display:flex; flex-direction:column; gap:8px; }
    /* read vs unread is deliberately STRONG (Edits-1): a READ row is flat + dimmed; an UNREAD row gets a thick
       accent left bar, an accent-tinted background, a bold brighter title, and an unread dot. */
    /* §E.A — the 4px left spine is now the CATEGORY signature (--ls-spine), set per card; it replaces the old gold
       unread bar. Read/unread is carried by the row background + the chip/label brightness below, so the two
       systems compose (grey-dimming preserved). The card body stays dark — no full-card tint. */
    .nf-row { position:relative; display:block; padding:11px 14px 11px 15px; border:1px solid var(--border);
      border-left:4px solid var(--ls-spine, transparent); border-radius:8px; background:var(--surface); transition:border-color .12s,background .12s; }   /* opened/read = darker grey (page --bg #121212 stays the darkest) */
    .nf-row:hover { border-color:var(--ls-spine, var(--gold)); }   /* (Joshua) hover outlines in the card's FAMILY colour, not gold — gold is chrome, the category identity belongs to the card; gold only as fallback for a row with no category */
    .nf-row.unread { background:#262626; }   /* unread = a lighter grey (was the gold tint) */
    /* Archive / restore — the card slides OUT in the direction it's travelling (archive → right, out of the inbox;
       restore → left, back into it), then collapses so the rows beneath rise instead of snapping up. The height is
       pinned in px by nfLeave() before the class lands, so the implicit from-keyframe has a real value to collapse
       FROM; margin-bottom eats the .nf-list 8px gap, which flex gap won't animate on its own. */
    /* The leaving card travels past the edge, so the list has to clip it — but ONLY while one is in flight, or an
       expanded .nf-detail wider than the panel would silently lose its right-hand side for good. `clip` not
       `hidden`: hidden would turn these into scroll containers. (`:has()` is already load-bearing here — .mp-modal.) */
    .nf-list:has(.nf-leaving), .nf-band:has(.nf-leaving) { overflow-x:clip; }
    .nf-row.nf-leaving { overflow:hidden; pointer-events:none; animation:nf-leave .52s forwards; }
    .nf-row.nf-leaving.nf-back { animation-name:nf-leave-back; }
    /* THE SLIDE IS THE FEEDBACK (Joshua, third ask — get it right): press archive and you WATCH the card travel
       off the panel, visible the whole way, then the rows below glide up to close the gap. Two phases:
       0–65% = the travel (~340ms) on a gentle accelerate that is ALREADY MOVING in the first frames — the old
       hard ease-in parked the card for a third of its flight, which read as a flicker, not a slide;
       65–100% = the gap-close (~180ms, ease-out) once the card is past the clip edge.
       NO reduced-motion carve-out here, deliberately: an OS accessibility flag was silently disabling the whole
       animation, which is how "it just disappears" survived the race fix — the owner asked for this motion
       explicitly, three times; a guard I invented doesn't get to veto him.
       Box metrics are restated at 0% AND 65% so they stay PINNED through the travel (height:0 only at 100%
       would interpolate from the first frame and shrink the card mid-slide). --nf-h is the measured height,
       set inline by nfLeave(); the padding/border literals mirror .nf-row's own (11px / 1px). */
    @keyframes nf-leave {
      0%   { transform:translateX(0);    opacity:1; height:var(--nf-h); margin-bottom:0; padding-top:11px; padding-bottom:11px; border-top-width:1px; border-bottom-width:1px; animation-timing-function:cubic-bezier(.42,0,1,1); }
      65%  { transform:translateX(115%); opacity:1; height:var(--nf-h); margin-bottom:0; padding-top:11px; padding-bottom:11px; border-top-width:1px; border-bottom-width:1px; animation-timing-function:cubic-bezier(.25,.8,.25,1); }
      100% { transform:translateX(115%); opacity:0; height:0;           margin-bottom:-8px; padding-top:0; padding-bottom:0; border-top-width:0; border-bottom-width:0; }
    }
    @keyframes nf-leave-back {
      0%   { transform:translateX(0);     opacity:1; height:var(--nf-h); margin-bottom:0; padding-top:11px; padding-bottom:11px; border-top-width:1px; border-bottom-width:1px; animation-timing-function:cubic-bezier(.42,0,1,1); }
      65%  { transform:translateX(-115%); opacity:1; height:var(--nf-h); margin-bottom:0; padding-top:11px; padding-bottom:11px; border-top-width:1px; border-bottom-width:1px; animation-timing-function:cubic-bezier(.25,.8,.25,1); }
      100% { transform:translateX(-115%); opacity:0; height:0;           margin-bottom:-8px; padding-top:0; padding-bottom:0; border-top-width:0; border-bottom-width:0; }
    }
    .nf-main { min-width:0; cursor:pointer; text-decoration:none; color:inherit; display:flex; align-items:flex-start; gap:12px; }
    .nf-col { min-width:0; flex:1; }
    /* (Joshua) the category icon sits in its own left gutter, bigger and vertically centred on the card */
    .nf-gutter { flex:none; display:flex; align-items:center; align-self:stretch; }
    .nf-gutter .nf-cat-chip { width:30px; height:30px; border-radius:8px; }   /* (Edits 9) icon slimmed 38->30 to keep its relative size on the shrunk card */
    .nf-gutter .nf-cat-chip .lu { width:16px; height:16px; }
    /* the category kicker — colored icon chip + Title-Case category label above the title */
    .nf-cat-chip { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:5px; flex:none; background:var(--ls-chip); color:var(--ls-text); }
    .nf-cat-chip .lu { width:12px; height:12px; }
    .nf-row:not(.unread) .nf-cat-chip { background:var(--surface-3); color:var(--muted); }   /* read → the signature dims; the spine keeps the category identity */
    .nf-title { color:var(--muted); font-size:.86rem; font-weight:400; line-height:1.35; padding-right:106px; }   /* reserve space for the absolute action icons (expander · pin · read · archive) */
    /* §7 ONE HUE PER CARD + (Joshua, Edits 3): the small category caption is gone — the TITLE PREFIX itself
       carries the category colour ("Incoming Task Deadline:" in green). Still one hue per card: spine, chip,
       and this label. Dims once read. */
    .nf-title .nf-lbl { color:var(--ls-text,var(--text)); font-weight:700; }
    .nf-row:not(.unread) .nf-title .nf-lbl { color:var(--muted); }
    .nf-row.unread .nf-title { color:var(--text); font-weight:700; }
    /* the unread dot (accent) sits before the title */
    /* unread bullet dot removed — Joshua */
    .nf-body { color:var(--muted); font-size:.8rem; margin:4px 0 0; line-height:1.45; }   /* (Edits 9) tighter top gap on the shrunk card */
    .nf-dot { display:inline-block; margin:0 12px; color:var(--muted); }   /* (Joshua hotfix 2026-07-21) roomy middle-dot separator between the description and the byline */
    /* (Order 1d → Edits 9) the assigned-team line — the case's initials (A1/A2 · P1/S1) — rides the meta line
       INLINE with the by/when stamp on the right, so the card loses the hollow row the two-line right stack cut
       into it. Every card incl. hideCase. */
    .nf-team { color:var(--muted); font-size:.7rem; letter-spacing:.03em; font-weight:600; }
    /* v0.6a §8c — the pending folder-move line on a Live Stream card (F2-3). Modelled on .nf-body: same muted
       colour and left edge, a notch smaller, so it reads as a subordinate status note rather than a second body.
       A `parked` op renders in the warning colour — it is not in-flight work, it is stalled work. */
    .nf-folder { color:var(--muted); font-size:.72rem; margin:3px 0 0; line-height:1.4; display:flex; align-items:center; gap:5px; }
    .nf-folder svg { width:12px; height:12px; opacity:.75; flex:0 0 auto; }
    .nf-folder.parked { color:var(--warn, #d08a3a); }
    .nf-run-note-y { color:#e0b84a; }
    .nf-run-note-admin { color:var(--muted); }   /* push 13 F-47/F-48: an admin-only line on a run's one card */   /* push 13 F-42: a run's note on its one card — a note, not an alarm (yellow) */
    /* PUSH 14 L1 R-10 (§COLOURS) — the card's one colour rides a `tone-<tone>` class on the row (the model's `tone`; the ARCH's seam ruling): the edge
       (`--ls-spine`, which the hover outline reads too) and the state word. Purple is handed in as `--ls-purple` from its
       one home (LS_CATS.skills.text, 30-livestream.js). */
    .nf-row.tone-purple { --ls-spine:var(--ls-purple); --ls-word:var(--ls-purple); }
    .nf-row.tone-green  { --ls-spine:var(--ls-green);  --ls-word:var(--ls-green); }
    .nf-row.tone-amber  { --ls-spine:var(--ls-amber);  --ls-word:var(--ls-amber); }
    .nf-row.tone-red    { --ls-spine:var(--ls-red);    --ls-word:var(--ls-red); }
    .nf-row.tone-grey   { --ls-spine:var(--ls-grey);   --ls-word:var(--ls-grey-word); }
    .nf-row:is(.tone-purple, .tone-green, .tone-amber, .tone-red, .tone-grey) .nf-title .nf-lbl { color:var(--ls-word); }
    /* PUSH 15 ruling 12 (Joshua, push 14 test site, 2026-09-30): a toned run card's ICON takes the card's one colour too —
       the Studio pen glyph in the title's colour (`--ls-word`), on a tile of the edge colour (`--ls-spine`) at the
       category chips' 16%, read or unread. It overrides the category chip (`--ls-chip`/`--ls-text`, inline on the row)
       and the read dimming above: read/unread stays the WHOLE ROW's (its background, the title's weight), never the
       icon's hue alone. Same class on the tour's example card (tour-runner.js), so both carry it. */
    .nf-row:is(.tone-purple, .tone-green, .tone-amber, .tone-red, .tone-grey) .nf-cat-chip { background:color-mix(in srgb, var(--ls-spine) 16%, transparent); color:var(--ls-word); }
    /* PUSH 14 L1 R-1 — THE RUN CARD'S THREE ROWS on the Live Stream (the agreed mockup's `lsCard`, on prod's .nf-row):
       row 1 the state word in the card's one colour + the case in white (the icons stay .nf-acts, top right); row 2 the
       work product · scope summary, muted | the time, bold white; row 3 the status line, WHITE (7f.3) | the initials,
       muted. PUSH 15 MG-9 (Joshua's D-117, which replaces "the state word keeps its colour read or unread"): a READ run
       card greys out exactly as a read case activity card does (the read rules above): the icon chip goes to
       --surface-3 / --muted (over ruling 12's tone, for read cards only), and the state word, the case, the time, the
       status line and the narration go --muted, not bold. D-117 am. 1: the coloured spine and the hover outline keep
       the card's tone (both read --ls-spine, which no read rule touches). Unread cards, the opened body and the Studio
       rail (whose cards carry no .nf-row) are unchanged. */
    .nf-row:is(.tone-purple, .tone-green, .tone-amber, .tone-red, .tone-grey):not(.unread) .nf-cat-chip { background:var(--surface-3); color:var(--muted); }
    .nf-row:is(.tone-purple, .tone-green, .tone-amber, .tone-red, .tone-grey):not(.unread) .nf-title .nf-lbl { color:var(--muted); }
    .nf-row:not(.unread) .lsrc-r1 .lsrc-case, .nf-row:not(.unread) .lsrc-r3-l { color:var(--muted); font-weight:400; }
    /* PUSH 15 MG-2 (ruling 20; D-111 addendum 2 and the ARCH's clarification): the run card takes the Available Runs tile's
       type sizes, read from the tile's own rules (the three --ar-*-size tokens, studio.css): row 1 the tile's title size,
       rows 2-3 on the left the tile's sub-line size, the time and the initials the tile's right-column size, muted and
       not bold. Only the RUN card's rows (.lsrc-r*): the stream's other cards keep .nf-title / .nf-body. */
    .nf-title.lsrc-r1 { font-size:var(--ar-title-size); }
    .lsrc-r1 .lsrc-case { color:#f4f4f4; }
    .lsrc-r2, .lsrc-r3 { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:4px 0 0; font-size:var(--ar-sub-size); line-height:1.45; }
    .lsrc-wp { color:var(--muted); min-width:0; }
    .lsrc-when { color:var(--muted); white-space:nowrap; font-size:var(--ar-right-size); letter-spacing:.03em; font-weight:400; }   /* push 15 MG-2: the tile's right-column size, not bold */   /* push 15 ruling 19 (D-111 addendum, time line): the time is drawn as the initials under it are (.lsrc-ini: size, colour, weight), still right-aligned — was white and bold at the row's size */
    .lsrc-r3-l { color:#f4f4f4; min-width:0; }
    .lsrc-line.nf-ask-q { display:inline; font-size:inherit; line-height:inherit; margin:0; color:inherit; }   /* a question card's question IS its status line (the mockup's) */
    .lsrc-ini { color:var(--muted); white-space:nowrap; font-size:var(--ar-right-size); letter-spacing:.03em; font-weight:400; }   /* push 15 MG-2 */
    .lsrc-alert { color:var(--ls-amber); font-weight:600; }
    .lsrc-acted { color:var(--muted); }   /* push 15 ruling 7 (D-109 am. 1(5)): "Cancelled by <initials>" after the line */   /* §ADMIN 3 (C-3): a seated admin's card with an open admin alert */
    /* PUSH 14 L1 R-2 — THE ONE EXPAND, both surfaces (the mockup's `.body`): Scope (N); Delivered (N) in green and Not
       Delivered (N) in amber, side by side and stacked on a narrow screen; Notes; the admin box, dashed. On the Live
       Stream it sits under the card's text column (the 42px gutter .nf-run-acts uses); Studio's rail zeroes it. */
    .lsrc-body { margin:10px 0 0 42px; padding-top:10px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; font-size:.8rem; line-height:1.45; color:var(--text); cursor:default; }
    .lsrc-body[hidden] { display:none; }
    .lsrc-sec-h { font-weight:600; color:var(--muted); margin:0 0 4px; }
    /* PUSH 15 ruling 21 (D-113): the opened card's section headers keep their OWN colour whatever the card's tone —
       "Delivered (N)" green, "Not Delivered (N)" amber (7f.5) — the edge and state word carry the tone. ONE place:
       these two tokens (all-amber would be the first line's value). */
    .lsrc-body { --lsrc-delivered-h:var(--ls-green); --lsrc-missing-h:var(--ls-amber); }
    .lsrc-delivered .lsrc-sec-h { color:var(--lsrc-delivered-h); }
    .lsrc-missing .lsrc-sec-h { color:var(--lsrc-missing-h); }   /* 7f.5: always amber */
    .lsrc-missing .lsrc-ul { color:var(--ls-amber); }   /* ruling 21: each missing deliverable named in amber */
    .lsrc-grp-h { color:var(--muted); font-size:.74rem; margin:2px 0 2px; }   /* ruling 21: "Main Deliverables" */
    .lsrc-ul { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:2px; overflow-wrap:anywhere; }
    .lsrc-cols { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:18px; }
    @media (max-width:640px) { .lsrc-cols { grid-auto-flow:row; } }
    .lsrc-admin { padding:8px 10px; border:1px dashed #3a3a3a; border-radius:6px; color:var(--muted); }
    .lsrc-admin b { color:var(--text); margin-right:5px; }
    .lsrc-admin b + .nf-run-note-admin { display:inline; }   /* "Admin: <first line>", the rest one to a line */
    /* 🔴 NARRATION-ON-HEARTBEAT — the live "what it is doing right now" line on a skill-run card. Modelled on
       .nf-folder for the same reason that one is modelled on .nf-body: it is a subordinate status note, not a
       second description. The sentence is ITALIC because it is the assistant's own words rather than the
       dashboard's, and it is clamped to two lines so a long one cannot push the card's controls around. The age
       stamp sits at the end in the muted colour, un-italic, so "what it said" and "how long ago" read apart. */
    .nf-say { color:var(--muted); font-size:.72rem; margin:3px 0 0; line-height:1.4; display:flex; align-items:flex-start; gap:5px; }
    .nf-say svg { width:12px; height:12px; opacity:.75; flex:0 0 auto; margin-top:2px; }
    .nf-say .nf-say-text { font-style:italic; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
    .nf-say .nf-say-age { font-style:normal; opacity:.8; white-space:nowrap; }
    /* Stale is a fact worth showing, not a failure: a sentence nobody has replaced in a while is exactly the case
       a person is trying to spot, so it dims rather than shouting. */
    .nf-say.stale .nf-say-text { opacity:.7; }
    /* THE LIVING RUN CARD (bag Batch 2 item 2.8) - the run's own state line, its two verbs, and the answer box.
       The state line is modelled on .nf-folder for the same reason .nf-folder is modelled on .nf-body: it is a
       subordinate status note on a card, not a second description. `.rest` is the BEAT's verdict - no machine is
       advancing this run right now - and it DIMS rather than shouting, because a run at rest has lost nothing. */
    .nf-run { color:var(--muted); font-size:.72rem; margin:3px 0 0; line-height:1.4; display:flex; align-items:flex-start; gap:5px; }
    .nf-run svg { width:12px; height:12px; opacity:.75; flex:0 0 auto; margin-top:2px; }
    .nf-run.rest { opacity:.72; }
    /* The verbs sit outside the card's <a>, so they carry their own left inset: 42px = the card gutter (the 30px
       category chip plus the 12px flex gap), which lines them up under the card's text column. */
    .nf-run-acts { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0 0 42px; }
    .nf-run-btn { display:inline-flex; align-items:center; gap:5px; background:none; border:1px solid var(--border); border-radius:6px;
                  color:var(--muted); font-family:'DM Sans',sans-serif; font-size:.72rem; font-weight:700; padding:4px 9px; cursor:pointer;
                  transition:color .12s,border-color .12s,background .12s; }
    .nf-run-btn:hover { color:var(--text); border-color:var(--gold); background:var(--surface-3); }
    .nf-run-btn:disabled { opacity:.55; cursor:default; }
    .nf-run-btn .lu { width:12px; height:12px; }
    /* Every verb's answer lands here, in the sibling sections' own two states (pm-note's ok / err), so a failure
       is never only a toast that has already faded by the time somebody looks back at the card. */
    .nf-run-note { font-size:.7rem; color:var(--muted); }
    .nf-run-note.ok { color:#74d694; }
    .nf-run-note.err { color:#e06b6b; }
    /* A47.8: NO width:100% here. The panel is also a .nf-run-acts, whose 42px left inset is a MARGIN, and a margin is
       outside a percentage width — so 100% made the panel the card's whole width plus 42px, 42px past the card's right
       edge, and #nf-list scrolled sideways under every question card. As a block (width auto) it fills the text column
       exactly, and on Studio's rail, where the inset is 0, it is full width as before. */
    .nf-ask { margin-top:8px; }
    .nf-ask-q { color:var(--text); font-size:.76rem; line-height:1.45; margin-bottom:6px; white-space:pre-wrap; word-break:break-word; }
    /* POST-SMOKE2 W1 F1.2 — what the run said it will take the answer to mean. Subordinate to the question by
       design: it is context for the answer, never a second question. */
    .nf-ask-c { color:var(--muted); font-size:.72rem; line-height:1.4; margin-bottom:6px; white-space:pre-wrap; word-break:break-word; }
    .nf-ask-t { width:100%; box-sizing:border-box; background:var(--surface-2); border:1px solid var(--border); border-radius:6px;
                color:var(--text); font-family:'DM Sans',sans-serif; font-size:.78rem; padding:7px 9px; resize:vertical; }
    .nf-ask-t:focus { outline:none; border-color:var(--gold); }
    .nf-ask-acts { display:flex; gap:8px; margin-top:6px; }
    /* The run deep-link's landing flash (?view=runs&run=<id>): the card is outlined in the chrome gold for a
       couple of seconds, which is the "here it is" beat the sheet-row jump already gives. */
    .nf-row.nf-run-hit { border-color:var(--gold); }
    .nf-meta { color:var(--muted); font-size:.68rem; margin:5px 0 0; display:flex; justify-content:space-between; align-items:center; gap:14px; }
    .nf-meta .nf-deadline { color:var(--text); font-weight:700; text-transform:capitalize; }
    .nf-meta .nf-meta-r { color:var(--muted); white-space:nowrap; display:flex; flex-direction:row; align-items:center; gap:10px; }
    .nf-acts { position:absolute; top:10px; right:14px; display:inline-flex; gap:2px; }   /* top-right; line-3's right text aligns to this same right edge */
    .nf-acts button { background:none; border:none; color:var(--muted); cursor:pointer; padding:4px 5px; border-radius:5px; transition:color .12s,background .12s; }
    .nf-acts button:hover { color:var(--gold); background:var(--surface-3); }
    .nf-acts .lu { width:14px; height:14px; display:block; }
    /* The folder icon joins the card's action cluster, so it takes the cluster's metrics — .folder-ico's own
       defaults are tuned for sitting inline after a matter name, which is a different job. */
    .nf-acts .folder-ico { margin-left:0; padding:4px 5px; vertical-align:baseline; }
    .nf-acts .folder-ico .lu { width:14px; height:14px; }
    .nf-gone { color:var(--muted); font-style:italic; }
    .nf-gone button { background:none; border:none; color:var(--gold); font-family:'DM Sans',sans-serif; font-size:.76rem; font-weight:700; cursor:pointer; padding:0 4px; text-decoration:underline; }
    /* §E.C — the persistent Pinned band at the very top of the inbox (flat, never grouped) */
    /* (Joshua) the pinned area is a visibly FENCED zone: a 1px gold rounded box around the band. Radius 12 wraps
       the 8px-radius cards inside with the 10px padding; the border is the brand gold — global chrome, which the
       one-hue-per-card rule reserves gold for, so a gold FRAME (not a card colour) is exactly its lane.
       (Batch 1e, Joshua) the fence goes AROUND the card, never insets it: negative side margins equal to the
       side padding+border (10+1=11px) push the frame outward into the .ls-feed gutter, so a pinned card's
       edges align pixel-exact with the unpinned cards below. The ≤820px block caps the outdent to that
       breakpoint's 6px gutter so the band can never overflow-scroll. */
    .nf-band { display:flex; flex-direction:column; gap:8px; margin:0 -11px 12px; padding:10px; border:1px solid var(--gold); border-radius:12px; }
    .nf-band-h { display:flex; align-items:center; gap:6px; color:var(--gold); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; margin:0 2px 2px; padding-bottom:5px; border-bottom:1px solid var(--border); }
    .nf-band-h .lu { width:13px; height:13px; }
    /* §8 the two-level Filter — category rows with their types indented beneath */
    .nf-filter-cat { display:flex; align-items:center; gap:7px; padding:7px 4px 4px; font-weight:400; font-size:.76rem; }   /* (Joshua) unbold — the row's colour already carries the category identity */
    .nf-filter-cat { cursor:pointer; }   /* (Joshua, final) category-level only — the whole row is the checkbox's label */
    .nf-filter-cat .nf-cat-chip { width:20px; height:20px; }
    .nf-filter-cat .nf-cat-chip .lu { width:12px; height:12px; }
    .nf-filter-list label.nf-filter-type { padding-left:30px; font-size:.78rem; color:var(--muted); }
    .nf-filter-type:hover { color:var(--text); }
    /* §A card expander — the accordion + the Case-360-look read-only sub-cards */
    .nf-expander .lu { transition:transform .15s ease; }
    .nf-expander.open .lu { transform:rotate(180deg); }   /* down-chevron rotates to up when open */
    .nf-detail { margin:12px 0 2px; padding-top:12px; border-top:1px dashed var(--border); }
    .nf-detail-msg { color:var(--muted); font-size:.8rem; font-style:italic; padding:4px 2px; }
    .nf-detail .lsx-card { margin-bottom:12px; margin-left:15px; }   /* (Joshua) the expander sub-cards step in DOUBLE the card's own 15px content inset, so the hierarchy reads: row → sub-card → its fields (which carry their own doubled 36px step) */
    .nf-detail .lsx-card .d-it-body { margin-left:36px; }   /* (Joshua) DOUBLE the Case-360 indent (18px) in the expander — the field boxes and notes step clearly under their title line; Case-360 itself keeps 18px */
    .nf-detail .lsx-card:last-child { margin-bottom:0; }
    .nf-detail .lsx-card .d-card-hdr { cursor:default; }
    .nf-detail .lsx-card .d-field .dk { color:var(--muted); }   /* (Joshua) EVERY feed sub-card grid (case, intake, comms) drops the gold label for muted grey — the expander stays neutral; Case-360's own gold labels are untouched (they're outside .nf-detail) */
    /* the direction pill — the context Case-360 gets from its Outgoing/Incoming tab */
    /* (Joshua) the direction badge takes the card's CATEGORY colour (burgundy on Discovery) via the --ls-* vars the
       .nf-row sets, not a per-direction green/blue — the badge TEXT already carries the direction. */
    .lsx-dir, .lsx-dir-out, .lsx-dir-in { font-size:.66rem; font-weight:700; letter-spacing:.02em; padding:2px 8px; border-radius:999px; white-space:nowrap; background:var(--ls-chip, rgba(122,132,153,.16)); color:var(--ls-text, #A9B2C4); }
    /* the shared .notesbtn is absolutely positioned for GRID cells — reset it so the sub-card's » can sit
       flush right in the header (Joshua), where margin-left:auto actually applies. */
    .nf-detail .lsx-card .notesbtn { position:static; transform:none; left:auto; bottom:auto; margin-left:auto; display:inline-flex; align-items:center; color:var(--muted); }
    .nf-detail .lsx-card .notesbtn:hover { color:var(--gold); }
    .nf-detail .lsx-card .notesbtn .lu { width:16px; height:16px; }
    /* §7 ONE HUE PER CARD — the rule does not stop at the collapsed card. Inside the expander the Case-360
       palette is neutralized: its gold item titles/labels go white-or-muted, and a status Case-360 paints
       red/green (or a status badge) becomes BOLD WHITE. Emphasis by WEIGHT, never a second hue. The card's
       category color survives ONLY in the spine, the chip and the category label, all outside .nf-detail. */
    .nf-detail .d-it-title { color:var(--text); }
    .nf-detail .d-item-notes .nlbl { color:var(--muted); }
    .nf-detail .d-it-title span[style*="color"] { color:var(--text) !important; font-weight:700; }
    .nf-detail .d-it-tmuted, .nf-detail .d-it-dim, .nf-detail .d-it-sep { color:var(--muted); }
    /* WO 20260720-1226 GUI-1: the shared Recovery card is the first TABBED Live Stream sub-card — strip the
       Case-360 gold from its active Outcome/Offers tab so the .lsx-card variant stays in the neutral feed palette.
       Case-360's own gold subtabs live outside .nf-detail, so they are untouched (no regression to the case page). */
    .nf-detail .lsx-card .d-subtab.active { color:var(--text); border-color:var(--muted); }
    .nf-empty { color:var(--muted); font-size:.84rem; padding:26px 4px; }
    /* ── the Settings tab: type × channel matrix ── */
    /* (Joshua) the settings table spans the page: label | toggle | the helper text as a full-width 3rd column.
       AUTO layout so the table fits the pane with NO horizontal scroll: the label column sizes to its content
       and never wraps (nowrap), the toggle column is fixed, and the "what this covers" description column takes
       whatever is left and WRAPS. (Previously table-layout:fixed + min-width:1360px forced a horizontal scroll.) */
    /* (Order 1a) ONE indent variable drives the whole Settings ladder: category = 0 · direct items and sheet
       sub-headers = +1 step · items under a sub-header = +2 steps. Before this, the sub-header out-indented its
       own children (rows sat at the cell edge, LESS indented than their header). */
    .np-tbl { border-collapse:collapse; width:100%; max-width:none; table-layout:auto; --np-indent:22px; }
    .np-tbl tr[data-npchild] td:first-child .np-lbl { margin-left:var(--np-indent); }              /* +1: direct items */
    .np-tbl tr[data-npchild2] td:first-child .np-lbl { margin-left:calc(2*var(--np-indent)); }     /* +2: items under a sheet sub-header */
    .np-tbl th:first-child { white-space:nowrap; }   /* label column: one line, sized to content */
    /* (Joshua 2026-09-25) the label cells may WRAP — only when the window cannot hold the label on one line beside
       the Options column. That lets the table's own auto layout give Options its room, so every Firm Wide box stays
       inside the window (1280, 1024) with no horizontal scroll; on a wide window nothing wraps and nothing moves. */
    /* (Edits 9) the description column is retired — its text now lives in the row's ⓘ (label cell). The control
       column absorbs the freed width so the un-hidden option controls have room. */
    /* the Deadlines list is subgrouped by SHEET (Briefs / Hearings / …) */
    .np-sheet-sep { margin:0 0 0 var(--np-indent); font-size:.74rem; text-transform:none; letter-spacing:.01em; font-weight:700; display:flex; align-items:center; gap:6px; cursor:pointer; }   /* +1 step (the 1a ladder); no own vertical margins — the uniform cell padding carries the rhythm (Joshua) */
    .np-sheet-sep .lu, .np-group-sep .lu.np-caret { width:13px; height:13px; transition:transform .15s ease; }
    .np-sheet-sep.collapsed .lu.np-caret, .np-group-sep.collapsed .lu.np-caret { transform:rotate(-90deg); }
    .np-restore { float:right; display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--border); color:var(--muted);
      font-family:'DM Sans',sans-serif; font-size:.72rem; font-weight:700; padding:4px 11px; border-radius:6px; cursor:pointer; transition:color .12s,border-color .12s; }
    .np-restore:hover { color:var(--gold); border-color:var(--gold); }
    .np-restore .lu { width:13px; height:13px; }
    .np-allbtn { display:inline-flex; align-items:center; justify-content:center; background:none; border:none; padding:1px; margin:0; color:inherit; cursor:pointer; }
    .np-allbtn .lu { width:14px; height:14px; }
    .np-tbl tr[hidden] { display:none; }
    /* (Joshua) the header row stays visible while the (long) settings list scrolls */
    .np-tbl th { text-align:center; color:var(--text); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; padding:8px 12px; border-bottom:1px solid var(--border);
      position:sticky; top:0; z-index:20; background:var(--surface-2,#1c1c1c); box-shadow:0 1px 0 var(--border); }   /* (Joshua) column headers CENTERED and WHITE, not muted */
    .np-tbl th.np-ch { text-align:center; }   /* (Edits 9, Joshua) centre the OPTIONS header over its column */
    /* TOP-aligned, not middle: a row's height is set by its description, so middle-alignment floated the label and
       toggle down by half of it — 29px inside a 74px row. That made the gap under a sub-header (30px) nearly three
       times the gap above it (11px), and made every row sit differently depending on how long its blurb ran. Top
       alignment makes the gap equal the padding, so header → sub-header → item share one rhythm. */
    .np-tbl td { padding:10px 12px; border-bottom:1px solid var(--border); color:var(--text); font-size:.84rem; vertical-align:top; }
    .np-tbl td.np-ch { text-align:left; }   /* (Edits 9) the control column sizes to its content (the widest is the Events matrix) */
    .np-phase2 { display:inline-block; color:var(--muted); font-size:.64rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--border); border-radius:4px; padding:2px 7px; }
    /* (Edits 9) ONE toggle language across Settings, modelled on the feed's Inbox/Archive switch: a rounded track
       with the active choice as a filled, shadowed, rounded knob + a soft slide transition. Shared by the 3-state
       (.np-tri), the 2-state Off/On (.np-tri2 rides .np-tri), and the global Overdue pill (.np-freq). BLUE here —
       #profilemodal remaps --gold to blue for the whole Settings pane; the feed's own switch keeps real gold. */
    .np-tri, .np-freq { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:999px; background:var(--surface-3); height:28px; padding:2px; box-sizing:border-box; }
    .np-tri button, .np-freq button { position:relative; display:inline-flex; align-items:center; height:100%; border:none; background:none; color:var(--muted); font-family:'DM Sans',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.02em; padding:0 13px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:color .18s, background .18s, box-shadow .18s; }
    .np-tri button:not(.active):hover, .np-freq button:not(.active):hover { color:var(--text); }
    .np-tri button.active, .np-freq button.active { background:var(--gold); color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.45); }
    /* (2.1) the read-only schedule ⓘ lines */
    .np-opts-pop .np-inf-line { color:var(--text); font-size:.76rem; line-height:1.5; padding:3px 0; }
    .np-opts-pop .np-inf-line + .np-inf-line { border-top:1px solid var(--border); margin-top:3px; padding-top:6px; }
    /* (2.3) the inline firm-wide checkbox (manager-level rows); inert (greyed, disabled) while the row is Off */
    .np-fw { display:inline-flex; align-items:center; min-height:28px; gap:7px; color:var(--text); font-size:.78rem; cursor:pointer; }   /* (Edits 9 redline) standardized to match the checks; own column a matched gap after the middle; top-aligned, centered to the toggle height */
    .np-fw input { accent-color:var(--gold); width:14px; height:14px; margin:0; cursor:pointer; }
    .np-fw-inert { opacity:.38; }
    .np-fw-inert input { cursor:default; }
    .np-chcell { text-align:left; vertical-align:top; }
    .np-cellgrid { display:grid; grid-template-columns:220px minmax(0, 300px) max-content; align-items:start; column-gap:28px; }   /* (Edits 9 redline) toggle | middle (checks OR the Event-Types matrix) | Firm Wide — the middle sits to the RIGHT of the toggle and TOP-aligned (in line) with it; equal gaps; sizes to content, not stretched to full width. (2026-09-25) The middle track gives back its 300px as the Options column narrows, so Firm Wide stays in ONE column (every row's cell is the same width) and inside the window */
    .np-mid { display:flex; align-items:center; min-height:28px; }   /* short content (checks) centers to the toggle height; a tall matrix fills, its top in line with the toggle */
    /* (Joshua, measured) the two events sections use a 2-state Off/On pill, not the 3-state deadline pill — so their
       toggle column shrinks to content (~96px vs the fixed 220px), reclaiming ~124px for the Event-Types block so
       the widest chip row (Written Discovery's M&C Resp) stops wrapping. Firm Wide already rides ABOVE, so no col-3.
       The toggle stays at the same x (aligned); the matrix just starts closer to it. Events rows only. */
    .np-cellgrid-ev { grid-template-columns:max-content minmax(0, 478px); }   /* (2026-09-25) capped at the 3x150 matrix's width, and free to narrow with the Options column */
    /* (Edits 9 redline) the toggle sits in a fixed-width slot = the 3-state pill width, so the checks / Firm Wide
       always start at the SAME x whether the row's toggle is 2-state or 3-state — uniform columns. */
    .np-togslot { display:inline-flex; align-items:center; }   /* (Edits 9) the 220px grid column governs the slot width now */
    /* (Edits 9 redlines) the small event-kind checks ride INLINE on the toggle line — no wasted vertical space */
    .np-inlinechecks { display:inline-flex; align-items:center; gap:18px; }
    .np-inlinechecks .np-opt-row { display:inline-flex; align-items:center; gap:7px; color:var(--text); font-size:.78rem; cursor:pointer; white-space:nowrap; }
    /* the big Event-Types matrix drops BELOW the toggle line */
    .np-inlineopts { display:flex; flex-direction:column; gap:2px; text-align:left; }   /* (Edits 9 redline) the matrix now lives in the middle grid column beside the toggle — no top margin (it lines up with the toggle) */
    .np-inlineopts .np-opt-sec { color:var(--muted); font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; margin:0 0 5px; }
    .np-inlineopts .np-opt-row { display:flex; align-items:center; gap:8px; padding:3px 0; color:var(--text); font-size:.78rem; cursor:pointer; }
    .np-inlineopts input[type="checkbox"], .np-inlinechecks input[type="checkbox"] { accent-color:var(--gold); width:14px; height:14px; margin:0; cursor:pointer; flex:none; }
    .np-inlineopts .np-mrow { align-items:flex-start; gap:10px; }
    .np-inlineopts .np-mtype { min-width:118px; font-weight:600; flex:none; }
    .np-inlineopts .np-mfields { display:flex; flex-wrap:wrap; gap:4px 5px; }
    .np-inlineopts .np-chip { background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:5px; padding:1px 6px; font-size:.68rem; color:var(--muted); white-space:nowrap; }
    .np-inlineopts-matrix { max-width:960px; }
    /* (Edits 9, Joshua) Events Added is an ACTUAL (invisible) GRID so every checkbox lines up in tidy columns;
       the "Event Types" header spans the full width. */
    .np-inlineopts.np-mx-multicol { max-width:none; width:100%; display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px 14px; align-items:center; }   /* (2026-09-25) three 150px tracks at full width (the 478px track above), two when the Options column narrows; the 130px floor means a track can never collapse; width:100% gives auto-fill the track's definite width to count against */   /* (Edits 9, Joshua) a real FIXED grid — 3 tight 150px tracks (was 4x172: pushed past the screen and sat too airy); fixed tracks, never 1fr (minmax(0,1fr) collapsed the tracks) */
    .np-mx-multicol .np-opt-sec { grid-column:1 / -1; margin:0; }
    /* (Joshua) the events sections' Firm Wide — its own row ABOVE the Event Types header, with clear air below */
    .np-inlineopts .np-fwrow { display:flex; align-items:center; margin:0 0 12px; }
    .np-mx-multicol .np-fwrow { grid-column:1 / -1; margin:0 0 4px; }   /* + the grid's 10px row gap ⇒ ~14px total */
    .np-mx-multicol .np-mrow { margin:0; align-items:center; gap:8px; min-width:0; }
    .np-mx-multicol .np-mtype { min-width:0; }
    /* §E.D: the per-row category dot (its category's spine color) */
    .np-catdot { width:8px; height:8px; border-radius:50%; flex:none; }
    .np-phase2-tag { display:block; font-size:.56rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
    .np-opts-btn.gear-only { padding:5px 7px; }
    .np-lbl { display:inline-flex; align-items:center; gap:7px; }
    /* (Edits 9 holistic pass) the retired .np-opts inline-row rules are DELETED — zero markup uses; their 13px
       checkbox was the one off-size rule left. Every checkbox the Settings pane renders is now uniformly 14px
       (.np-inlineopts/.np-inlinechecks, .np-fw, .np-opts-pop). */
    /* the Options column is now a click-to-expand popover (too many controls to sit inline) */
    .np-opts-btn { display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--border); color:var(--muted); font-family:'DM Sans',sans-serif;
      font-size:.72rem; font-weight:600; padding:4px 10px; border-radius:6px; cursor:pointer; transition:color .12s,border-color .12s; }
    .np-opts-btn:hover, .np-opts-btn.open { color:var(--gold); border-color:var(--gold); }
    .np-opts-btn .lu { width:17px; height:17px; }   /* (Joshua) the gear was a speck next to the toggle — sized to read as its equal */
    .np-opts-wrap { position:relative; display:inline-block; }
    /* Options gets its own rightmost cell (no header word — Joshua); the button hugs the right edge */
    .np-tbl th.np-opts-h { width:1%; }
    .np-tbl td.np-opts-cell { text-align:right; white-space:nowrap; padding-left:18px; }
    .np-none { color:var(--muted); }
    .np-opts-pop { position:absolute; left:0; right:auto; top:calc(100% + 5px); z-index:30; min-width:210px; max-height:min(66vh,460px); overflow-y:auto; overflow-x:hidden; text-align:left; white-space:normal; background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.5); padding:10px 12px; }   /* (Edits 9 redline) the ⓘ opens to the RIGHT (left-anchored). white-space:normal RESETS the label column's inherited nowrap (`.np-tbl td:first-child`), so a long ⓘ description WRAPS within max-width instead of clipping at overflow-x:hidden */
    .np-opts-pop:not(.np-opts-pop-wide) { max-width:340px; }   /* cap the info/checks popover so a long ⓘ description wraps sensibly instead of running the full pane width (the wide Event-Types matrix keeps its own width) */
    .np-opts-pop.np-pop-up { top:auto; bottom:calc(100% + 5px); }   /* flip above the button when there's no room below (tall matrix) */
    .np-opts-pop[hidden] { display:none; }
    .np-opts-pop .np-opt-sec { color:var(--muted); font-size:.64rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; margin:2px 0 5px; }
    .np-opts-pop .np-opt-sec + .np-opt-sec, .np-opts-pop .np-opt-row + .np-opt-sec { margin-top:11px; }
    .np-opts-pop .np-opt-row { display:flex; align-items:center; gap:8px; padding:3px 0; color:var(--text); font-size:.8rem; cursor:pointer; }
    .np-opts-pop input[type="checkbox"] { accent-color:var(--gold); width:14px; height:14px; margin:0; cursor:pointer; }
    /* (Joshua) the Daily/Weekly picker is the ONE global overdue-cadence toggle in the settings header, beside
       Restore Defaults. (Edits 9) it shares the unified .np-tri/.np-freq knob-pill styling defined above. */
    .np-globalfreq { float:right; display:inline-flex; align-items:center; gap:8px; margin:1px 16px 0 0; color:var(--muted); font-size:.72rem; font-weight:700; }
    /* Event Updated: the display-only trigger matrix — functional per-type checkbox + reference field chips */
    .np-opts-pop-wide { width:min(94vw,880px); }   /* JS re-pins this fixed + viewport-clamped on open */
    .np-opts-pop .np-mnote { color:var(--muted); font-size:.68rem; line-height:1.45; margin:0 0 8px; }
    .np-opts-pop .np-mrow { align-items:flex-start; gap:10px; }
    .np-opts-pop .np-mtype { min-width:118px; font-weight:600; flex:none; }
    .np-opts-pop .np-mfields { display:flex; flex-wrap:wrap; gap:4px 5px; }
    .np-opts-pop .np-chip { background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:5px; padding:1px 6px; font-size:.68rem; color:var(--muted); white-space:nowrap; }
    /* §E.D: the settings group separator recolored per category — icon chip + Title-Case category label in the category color */
    .np-tbl tr.np-grouprow td { padding:10px 12px; border:none; }   /* SAME padding as data cells — one rhythm: header→sub, sub→item, item→item all ≈20px; only the group-sep margin adds the big category gap */
    /* (Joshua) ONE spacing rhythm: the uniform cell padding IS the gap everywhere (header→sub, sub→item,
       item→item all equal); the only extra space is the big margin ABOVE a category header, so categories
       read as separated blocks. No border-top — the preceding row's border-bottom is the single divider. */
    .np-group-sep { margin:30px 0 0; display:flex; align-items:center; gap:8px; font-size:.78rem; letter-spacing:.02em; font-weight:700; }
    .np-group-chip { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; flex:none; }
    .np-group-chip .lu { width:13px; height:13px; }
    .np-tbl tr.np-grouprow:first-child .np-group-sep { border-top:none; margin-top:0; }   /* the first category needs no block gap above */
    /* 🔴 F6 R-F6-4 / 🔴 F6c ITEM 1 — THE SETTINGS BAND, WHICH IS NOW THE GROUP HEADER ITSELF.
       One heading over one or more categories' rows (today: Announcements + Skills, read as "Notifications"),
       with those categories rendered BENEATH it as `np-sheet-sep` subsections — the arrangement the Appearances
       group already has and the one Joshua ruled for on 2026-08-25. So the band no longer needs a look of its
       own: it carries `np-group-sep` and inherits the whole chassis (chip, collapse-all control, weight, left
       rhythm, the uniform cell padding that carries the gap), and this rule is the ONE modifier — the larger
       block gap above it, because a band opens a section that itself contains subsections.
       RETIRED, and stated so it is not reinstated: the previous issue made a band muted and uppercase on the
       ground that "a band spans categories that each own a hue, so giving the band one of them would claim the
       section for that category". That held while the band was a thin rule over two PEER headers. It does not
       hold now the band IS the group and the categories are its subsections — the section is the band's, and the
       hue it wears is DECLARED on the band (`tone` in LS_SETTINGS_BANDS), not inherited from whichever category
       sorts first. */
    .np-band-sep { margin-top:34px; }
    .np-tbl tr.np-grouprow.np-bandrow:first-child .np-band-sep { margin-top:0; }
    /* A LOCKED row's control slot: the state, said plainly, where the toggle would be. Deliberately NOT a
       disabled-looking toggle — a greyed control reads as "you could change this and something is stopping you",
       and this is not that: the firm sends these to everyone, and the row exists to say so. */
    .np-locked { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:.72rem; font-weight:700;
      padding:4px 10px; border:1px solid var(--border); border-radius:6px; background:rgba(255,255,255,.02); white-space:nowrap; }
    .np-locked .lu { width:12px; height:12px; }
    /* the notifications "group by type" toggle + section headers */
    /* (Joshua) group headers are Title Case, in the group's OWN colour (not gold), and a touch larger */
    .nf-group-h { color:var(--ls-text,var(--text)); font-size:.86rem; text-transform:none; letter-spacing:.01em; font-weight:800; margin:14px 2px 6px; padding-bottom:5px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:7px; cursor:pointer; }
    .nf-group-h .lu { width:14px; height:14px; transition:transform .15s ease; }
    .nf-group-h.collapsed .lu.nf-gh-caret { transform:rotate(-90deg); }
    .nf-group-h:first-child { margin-top:0; }
    /* (Joshua 20260722) Sub-Category View: the type headers nest UNDER their category header — indented, lighter,
       no category chip (the parent above already carries it), so the hierarchy reads at a glance. */
    .nf-group-h.nf-group-sub { margin-left:18px; font-size:.78rem; font-weight:700; opacity:.86; margin-top:9px; border-bottom-style:dashed; }
    .nf-group-h.nf-group-sub .lu { width:12px; height:12px; }
    .np-info { display:inline-flex; background:none; border:none; padding:2px; color:var(--muted); cursor:pointer; border-radius:50%; transition:color .12s; }
    .np-info:hover, .np-info.open { color:var(--gold); }
    .np-info .lu { width:13px; height:13px; display:block; }
    .np-desc { color:var(--muted); font-size:.74rem; line-height:1.45; margin-top:6px; max-width:420px; padding-left:10px; border-left:2px solid var(--gold-soft, rgba(201,168,76,.35)); }
    #profilemodal .pm-sec-title { font-family:'DM Sans',sans-serif; font-weight:700; font-size:1.02rem; color:var(--text); margin:0 0 4px; }
    #profilemodal .pm-sec-sub { color:var(--muted); font-size:.82rem; margin:0 0 18px; line-height:1.4; }
    #profilemodal .pm-fld { display:block; margin-bottom:15px; }
    #profilemodal .pm-fld > span { display:block; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }
    #profilemodal .pm-fld input, #profilemodal .pm-fld textarea { width:100%; box-sizing:border-box; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
      font-family:'DM Sans',sans-serif; font-size:.85rem; padding:8px 11px; border-radius:6px; resize:vertical; }
    #profilemodal .pm-fld input:focus, #profilemodal .pm-fld textarea:focus { outline:none; border-color:var(--gold); }
    #profilemodal .pm-fld textarea { min-height:130px; line-height:1.45; }
    #profilemodal .pm-actions { display:flex; align-items:center; gap:12px; margin-top:4px; }
    #profilemodal .pm-submit { background:var(--gold); border:1px solid var(--gold); color:#1a1a1a; font-family:'DM Sans',sans-serif; font-weight:700; font-size:.82rem;
      padding:8px 18px; border-radius:6px; cursor:pointer; transition:filter .12s; }
    #profilemodal .pm-submit:hover { filter:brightness(1.08); }
    #profilemodal .pm-submit:disabled { opacity:.55; cursor:default; }
    #profilemodal .pm-note { font-size:.8rem; }
    #profilemodal .pm-note.ok { color:#74d694; }
    #profilemodal .pm-note.err { color:#e06b6b; }
    /* admin list of submissions (shown under the form for admins only) */
    #profilemodal .pm-list { margin-top:24px; border-top:1px solid var(--border); padding-top:16px; }
    #profilemodal .pm-list-h { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; }
    #profilemodal .pm-item { position:relative; padding:10px 36px 10px 13px; border:1px solid var(--border); border-radius:7px; background:var(--surface-2); margin-bottom:9px; }
    #profilemodal .pm-del { position:absolute; top:7px; right:8px; background:none; border:none; color:var(--muted); font-size:1.05rem; line-height:1; cursor:pointer; padding:2px 5px; border-radius:4px; transition:color .12s,background .12s; }
    #profilemodal .pm-del:hover { color:#e06b6b; background:var(--surface-3); }
    #profilemodal .pm-item-subj { font-weight:600; font-size:.85rem; color:var(--text); }
    #profilemodal .pm-item-desc { color:var(--muted); font-size:.8rem; margin-top:3px; line-height:1.4; white-space:pre-wrap; word-break:break-word; }
    #profilemodal .pm-item-meta { color:var(--muted); font-size:.67rem; margin-top:7px; text-transform:uppercase; letter-spacing:.03em; }
    #profilemodal .pm-list-empty { color:var(--muted); font-size:.82rem; font-style:italic; }
    /* Announcements list (User Account → Announcements) — modeled on the pm-item card list; whole row opens the deck. */
    #profilemodal .ann-list { display:flex; flex-direction:column; gap:11px; margin-top:6px; }
    #profilemodal .ann-item { position:relative; display:block; width:100%; text-align:left; cursor:pointer;
      padding:15px 44px 15px 17px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2);
      color:var(--text); font-family:'DM Sans',sans-serif; transition:border-color .12s, background .12s; }
    #profilemodal .ann-item:hover { border-color:var(--gold); background:var(--surface-3); }
    #profilemodal .ann-item::after { content:""; position:absolute; top:50%; right:18px; width:9px; height:9px; margin-top:-5px;
      border-right:2px solid var(--muted); border-top:2px solid var(--muted); transform:rotate(45deg); transition:border-color .12s; }
    #profilemodal .ann-item:hover::after { border-color:var(--gold); }
    #profilemodal .ann-title { font-weight:700; font-size:.95rem; color:var(--text); }
    #profilemodal .ann-date { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; margin-top:3px; }
    #profilemodal .ann-blurb { color:var(--muted); font-size:.83rem; line-height:1.45; margin-top:7px; }
    #profilemodal .ann-empty { color:var(--muted); font-size:.85rem; font-style:italic; }
    /* Announcements full-screen deck viewer — sits above the User Account modal (z 1260); the deck fills the viewport. */
    #annviewer { display:none; position:fixed; inset:0; z-index:1320; background:#0d0d0d; }
    #annviewer.on { display:block; }
    #annviewer #annviewer-frame { position:absolute; inset:0; width:100%; height:100%; border:0; background:#0d0d0d; }
    #annviewer .annviewer-close { position:absolute; top:14px; right:16px; z-index:2; display:inline-flex; align-items:center; justify-content:center;
      width:38px; height:38px; border-radius:9px; background:rgba(20,20,20,.72); border:1px solid rgba(255,255,255,.18); color:#e6e6e6;
      cursor:pointer; transition:background .12s, color .12s, border-color .12s; }
    #annviewer .annviewer-close:hover { background:rgba(40,40,40,.92); color:#fff; border-color:#fff; }
    #annviewer .annviewer-close .lu { width:20px; height:20px; }
    /* custom checkbox set-filter (Community — replaces typed text filter on A1–S1) */
    .setflt { background:var(--surface-2); color:var(--text); padding:7px; min-width:170px; font-size:.82rem; }
    .setflt-search { width:100%; box-sizing:border-box; background:var(--surface-3); border:1px solid var(--border); color:var(--text); border-radius:5px; padding:4px 7px; margin-bottom:6px; }
    .setflt-ctrls { display:flex; gap:12px; margin-bottom:6px; }
    .setflt-ctrls a { color:var(--gold); cursor:pointer; font-size:.74rem; font-weight:600; }
    .setflt-list { max-height:230px; overflow:auto; }
    .setflt-row { display:flex; align-items:center; gap:7px; padding:3px 4px; cursor:pointer; border-radius:4px; }
    .setflt-row:hover { background:var(--surface-3); }
    .setflt-row input { accent-color:var(--gold); }

    /* bottom: sub-tabs (the "sheets"), horizontal — Google-Sheets-style tab strip */
    #bottombar { display:flex; align-items:stretch; background:var(--surface-2); border-top:1px solid var(--border);
                 padding:0 8px; height:var(--bar-h); box-sizing:border-box; flex:none; overflow:hidden; }   /* push 13 F-15: --bar-h (was 38px) */
    #bottomtabs { display:flex; align-items:stretch; gap:2px; flex:1 1 auto; min-width:0; overflow-x:auto; justify-content:safe center; } /* center each group's sub-tabs; falls back to scrollable left-align when they overflow */
    #bottomright { display:flex; align-items:center; gap:10px; flex:none; padding-left:14px; }
    /* Sheet TABS match the Reports tabs (.rpt-tab), unified across Sheets + Reports (Joshua); since push 13 F-15 the
       active one is gold TEXT only, with no underline ("same on the bottom tab of sheets"). */
    .sheet-tab { display:inline-flex; align-items:center; background:none; border:none; color:var(--muted);
                 font-family:'DM Sans',sans-serif; font-size:0.78rem; font-weight:600; padding:4px var(--tabbar-tab-pad); border-radius:6px; align-self:center; cursor:pointer; white-space:nowrap; }   /* push 13 F-15: the parent tab's font and padding, no underline */
    /* the button→<a> nav sweep (WO §C.4) left these as display:inline-block, which does NOT vertically centre
       inside the align-items:stretch strip (each tab is stretched to #bottombar's 38px) — the labels rode high
       above the .sheet-sec section words. inline-flex + align-items:center restores gold's centred baseline. */
    a.sheet-tab { display:inline-flex; align-items:center; }
    .sheet-tab:hover { color:var(--text); background:var(--surface-3); }
    .sheet-tab.active { color:var(--gold); font-weight:700; }
    /* archival/historical tabs — muted slate, distinct from the gold active accent */
    .sheet-tab.archival { color:#6b7180; font-style:italic; }
    .sheet-tab.archival:hover { color:#9aa3b4; background:var(--surface-3); }
    .sheet-tab.archival.active { color:var(--gold); font-weight:700; }
    /* in-strip section label (e.g. Discovery ▸ Outgoing / Incoming clusters) */
    .sheet-sec { display:flex; align-items:center; padding:0 12px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:0.78rem; font-weight:500; white-space:nowrap; }   /* same as sub-tab words, in white */
    .sheet-sec:not(:first-child) { border-left:1px solid var(--gold); margin-left:6px; }   /* full-height gold divider between clusters */
    .sheet-div { flex:0 0 auto; align-self:stretch; border-left:1px solid var(--gold); margin:0 8px; }   /* label-less gold divider between active/inactive twins (Hearings, Notices) */
    #bottomtabs .bt-half { display:flex; align-items:stretch; gap:2px; flex:1 1 0; min-width:0; overflow-x:auto; }   /* two balanced halves so the gold divider sits at the bar centre */
    #bottomtabs .bt-l { justify-content:flex-end; }   /* left tabs hug the centre line */
    #bottomtabs .bt-r { justify-content:flex-start; }  /* right tabs hug the centre line */
    .sheet-tab.dev { color:#5fae6a; }                                  /* dev tables (Pleadings/Templates) sub-tabs */
    .sheet-tab.dev:hover { color:#84d68f; background:var(--surface-3); }
    .sheet-tab.dev.active { color:#84d68f; font-weight:700; border-bottom-color:#84d68f; }

    /* AG Grid quartz-dark, themed to the dashboard tokens + compact rows */
    /* ƒ-derived and joined/non-editable columns keep their ƒ / ↪ name prefixes but NO header tint (removed). */
    .ag-theme-quartz { --ag-cell-horizontal-padding:6px; }   /* denser columns (master + child); initials cells override to 0 inline */
    .ag-theme-quartz .ag-header-cell.hdr-tint-serve { background:rgba(120,176,255,0.08); }   /* CMC serve-notice group → muted blue (Sheet Edit 5) */
    .ag-theme-quartz .ag-header-cell.hdr-tint-cms   { background:rgba(255,205,165,0.08); }   /* CMC CMS-filing group → muted peach (Sheet Edit 5) */
    .ag-theme-quartz .ag-cell { user-select:none !important; -webkit-user-select:none !important; }            /* selection confined to one cell… */
    .ag-theme-quartz .ag-cell.selcell { user-select:text !important; -webkit-user-select:text !important; }    /* …only the pressed cell is selectable */
    /* themed date-picker popup (replaces the browser's grey native calendar) */
    .calpop { background:var(--surface); border:1px solid var(--gold); border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.6); padding:8px; width:228px; font-family:'DM Sans',sans-serif; color:var(--text); }
    .calpop .calhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
    .calpop .caltitle { font-size:.82rem; font-weight:700; color:var(--gold); }
    .calpop .calsels { display:flex; gap:6px; }
    .calpop .calsel { background:var(--surface-2); color:var(--gold); border:1px solid var(--border); border-radius:5px; font-family:'DM Sans',sans-serif; font-size:.78rem; font-weight:600; padding:2px 4px; cursor:pointer; }
    .calpop .calsel:focus { outline:none; border-color:var(--gold); }
    .calpop .calnav { background:none; border:none; color:var(--gold); font-size:1.15rem; line-height:1; cursor:pointer; padding:0 8px; }
    .calpop .calnav:hover { color:var(--text); }
    .calpop .calgrid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
    .calpop .caldow { text-align:center; font-size:.6rem; color:var(--muted); padding:2px 0; }
    .calpop .calday { background:none; border:none; color:var(--text); font-size:.76rem; padding:5px 0; border-radius:5px; cursor:pointer; }
    .calpop .calday:hover { background:var(--surface-3); }
    .calpop .calday.today { outline:1px solid var(--border); }
    .calpop .calday.sel { background:var(--gold); color:#1a1a1a; font-weight:700; }
    .calpop .calfoot { display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
    .calpop .calclear { background:#4a4b52; border:none; color:#e8ecf3; font-weight:700; font-size:.74rem; padding:3px 14px; border-radius:5px; cursor:pointer; }
    .calpop .calclear:hover { filter:brightness(1.12); }
    .calpop .calok { background:var(--gold); color:#1a1a1a; border:none; font-weight:700; font-size:.74rem; padding:3px 14px; border-radius:5px; cursor:pointer; }
    .calpop .calok:hover { filter:brightness(1.08); }
    /* free-form date/time editor: text input + side picker button + (calendar | time-list) body */
    .pickedit { position:relative; width:100%; height:100%; box-sizing:border-box; background:var(--surface); border:1px solid var(--gold); border-radius:4px; font-family:'DM Sans',sans-serif; }
    .pickedit .pickrow { display:flex; align-items:center; height:100%; width:100%; }
    .pickedit .pickinput { flex:1 1 0; min-width:0; background:transparent; border:none; color:var(--text); font-family:'DM Sans',sans-serif; font-size:12px; padding:0 2px 0 6px; outline:none; }
    .pickedit .pickinput.pi-center { text-align:center; }
    .pickedit .pickinput.pi-formula { color:var(--gold); font-family:ui-monospace,Menlo,Consolas,monospace; text-align:left; } /* date-formula mode (= …) */
    .pickedit .pickbtn { flex:none; align-self:stretch; background:var(--surface-2); border:none; border-left:1px solid var(--gold); border-radius:0 3px 3px 0; color:var(--gold); cursor:pointer; line-height:0; padding:0 8px; display:flex; align-items:center; }
    .pickedit .pickbtn:hover { background:var(--surface-3); color:#e8c66a; }
    .pickedit .pickbtn svg { display:block; }
    /* floating picker, appended to body (never clipped). The .calpop base rule supplies the calendar box. */
    .pickfly { position:fixed; z-index:3000; }
    /* numeric "ENTER TIME" picker (Hour / Minute fields + AM/PM toggle), themed black + gold */
    .pickfly.timepop { width:auto; background:var(--surface); border:1px solid var(--gold); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.6); padding:13px 14px 9px; }
    .timepop .tphead { font-size:.6rem; letter-spacing:.13em; font-weight:600; color:var(--muted); text-transform:uppercase; margin:0 1px 9px; }
    .timepop .tprow { display:flex; align-items:flex-start; justify-content:center; gap:13px; padding:0 4px; }
    .timepop .tpfield { display:flex; flex-direction:column; align-items:center; gap:3px; }
    .timepop .tpnum { width:52px; height:48px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:1.6rem; font-weight:600; text-align:center; outline:none; padding:0; }
    .timepop .tpnum:focus { border-color:var(--gold); background:var(--gold-soft); color:var(--gold); }
    .timepop .tplbl { font-size:.56rem; color:var(--muted); }
    .timepop .tpcolon { font-size:1.5rem; font-weight:600; color:var(--text); line-height:48px; }
    .timepop .tpmer { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:8px; overflow:hidden; height:48px; }
    .timepop .tpmerbtn { flex:1; width:100%; background:var(--surface-2); border:none; color:var(--muted); font-family:'DM Sans',sans-serif; font-size:.72rem; font-weight:700; padding:0 11px; cursor:pointer; min-width:40px; }
    .timepop .tpmerbtn + .tpmerbtn { border-top:1px solid var(--border); }
    .timepop .tpmerbtn:hover { color:var(--text); }
    .timepop .tpmerbtn.on { background:var(--gold); color:#1a1a1a; }
    .timepop .tpfoot { display:flex; align-items:center; gap:7px; margin-top:20px; }
    .timepop .tpclear { margin-right:auto; background:#4a4b52; border:none; color:#e8ecf3; font-weight:700; font-size:.74rem; padding:4px 16px; border-radius:5px; cursor:pointer; }
    .timepop .tpclear:hover { filter:brightness(1.12); }
    .timepop .tpcancel { background:#4a4b52; border:none; color:#e8ecf3; font-weight:700; font-size:.74rem; padding:4px 16px; border-radius:5px; cursor:pointer; }
    .timepop .tpcancel:hover { filter:brightness(1.12); }
    .timepop .tpok { background:var(--gold); color:#1a1a1a; border:none; font-weight:700; font-size:.74rem; padding:4px 16px; border-radius:5px; cursor:pointer; }
    .timepop .tpok:hover { filter:brightness(1.08); }
    /* green flash on the just-saved cell, matching the "Saved" toast (#1e8449) */
    .ag-theme-quartz .ag-cell-data-changed { background-color:rgba(30,132,73,0.6) !important; }
    /* sorted-column highlight: hide AG Grid's numeric sort badges; tint the sorted COLUMN HEADER(S) only, for any sort */
    .ag-theme-quartz .ag-sort-order { display:none !important; }                                               /* hide the 1/2/3 multi-sort order numbers */
    .ag-theme-quartz .ag-header-cell.sortcol-h { background:rgba(35,110,65,0.40); }   /* sorted column → dark green header */
    .staffedit { background:var(--surface-2); border:1px solid var(--gold); border-radius:6px; max-height:240px; overflow:auto; min-width:170px; box-shadow:0 6px 22px rgba(0,0,0,.55); padding:3px; }
    .staffopt { display:flex; align-items:center; gap:8px; padding:4px 7px; border-radius:4px; cursor:pointer; }
    .staffopt:hover { background:var(--surface-3); }
    .staffchip { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:18px; border-radius:4px; font-size:.72rem; font-weight:700; padding:0 5px; background:#2d2d31; color:#cfd3da; }
    .staffname { font-size:.78rem; color:var(--text); white-space:nowrap; }
    .ag-theme-quartz .cell-center { text-align:center; }
    .ag-theme-quartz .cell-right { text-align:right; }
    /* enum cells: a muted chevron on the right (background image — no positioning override, so it can't
       disturb AG's cell layout). Padding stays constant in display + edit so there's no shift on click. */
    .ag-theme-quartz .ag-cell.enumcell {
      background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="%238a93a6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');   /* Lucide chevron-down */
      background-repeat:no-repeat; background-position:right 10px center;
      padding-right:26px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* GLOBAL: reserve room for the ▾ so long values truncate (…) cleanly BEFORE the chevron, never clipping it */
    .ag-theme-quartz .ag-cell.enumcell.ag-cell-inline-editing { background-image:none; padding:0; } /* editor fills the cell; its own 6px padding + 1px border ≈ the display's 6px inset, so the value doesn't jump on click (do NOT add cell padding here — it stacks on the editor's own padding and shifts the value right) */
    .ag-theme-quartz .ag-cell.enumcell .ag-cell-editor.ag-select { padding-left:2px; } /* align the select editor's value with the display text (no left shift on click) */
    /* C2: the hearings "synced" column — calendar-check icon AS the header (centered), and centered icon cells */
    .ag-theme-quartz .ag-header-cell.synced-hdr { background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="%23e8ecf3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/><path d="m9 16 2 2 4-4"/></svg>'); background-repeat:no-repeat; background-position:center; }   /* Lucide calendar-check */
    .ag-theme-quartz .ag-cell.synced-cell { display:flex; align-items:center; justify-content:center; padding-left:0; padding-right:0; }
    /* SE20: Excel-style "type to add" pinned new-row on the admin dev sheets — GREEN to match the dev/admin accent (not gold) */
    .ag-theme-quartz .ag-floating-bottom { border-top:2px solid #5fae6a; }
    .ag-theme-quartz .ag-floating-bottom .ag-cell { background:rgba(95,174,106,0.10); font-style:italic; }
    /* free-form enum editor: input fills the cell (no shift), floating filterable list anchored below the cell */
    .enuminput { width:100%; height:100%; box-sizing:border-box; background:var(--surface-2); border:1px solid var(--gold); color:var(--text); font-family:'DM Sans',sans-serif; font-size:12px; padding:0 6px; outline:none; }
    .enuminput::selection { background:rgba(201,168,76,.40); color:var(--text); }   /* gold-tint the type-to-replace selection — not the jarring OS blue */
    .enumfly { position:fixed; z-index:1200; background:var(--surface-2); border:1px solid var(--gold); border-radius:6px; box-shadow:0 6px 22px rgba(0,0,0,.55); overflow-y:auto; padding:3px; }
    .enumfly .enumopt { padding:4px 9px; font-size:.8rem; color:var(--text); cursor:pointer; white-space:nowrap; border-radius:4px; }
    .enumfly .enumopt:hover { background:var(--surface-3); }   /* muted hover — matches the defendant-name combo (.comboopt), the firm-wide standard */
    /* (Joshua 20260722) the grid editors get the SAME treatment as goldSelect: the highlighted row is what
       Tab/Enter takes, so it reads as a commitment (gold), and the matched run is marked — reusing .gs-mk so
       there is ONE marker style app-wide rather than a second one that drifts. */
    .enumfly .enumopt.hi { background:var(--surface-3); color:var(--gold); }
    .enumfly .enumopt.hi .gs-mk { text-decoration:underline; text-underline-offset:2px; }
    .enumfly .enumblank { color:var(--muted); font-style:italic; }
    .enumfly .enumempty { padding:6px 9px; font-size:.76rem; color:var(--muted); white-space:nowrap; }
    /* The venue picker's list is body-appended like the grid's, but it also opens INSIDE the wizard/stepper modals —
       so it carries the same z-index the parity order gave .gs-menu (B-1), not the grid's 1200. */
    .enumfly.venuefly { z-index:6200; }
    /* The confirm row (R4). Deliberately reads differently from an existing option — it CREATES an option everyone
       will see, so it must never be mistaken for just another pick. */
    .enumfly .enumadd { border-top:1px solid var(--border); margin-top:3px; padding-top:6px; color:var(--muted); white-space:nowrap; }
    .enumfly .enumadd b { color:var(--gold); font-weight:700; }
    .enumfly .enumadd .lu { width:13px; height:13px; vertical-align:-2px; }
    .enumfly .enumadd.hi { background:var(--surface-3); color:var(--text); }
    /* case-group separator line — drawn as an overlay so the row-hover background can't hide it */
    .ag-theme-quartz .ag-row.mtc-leader::after { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(255,255,255,0.2875); z-index:2; pointer-events:none; }
    .ag-theme-quartz .ag-header-cell-label { justify-content:center; }   /* all column headers centered */
    /* hdr-center: force the label (and its wrapper) to fill the header cell so justify-content:center actually
       centers. Needed for BARE headers — columns with suppressHeaderMenuButton + no sort/filter (Jump, the note
       badges, the people chips) don't stretch their label, so the global center rule above has nothing to center
       within and they render left. (Joshua 2026-07-10 — the real fix behind the 'headers won't center' issue.) */
    .ag-theme-quartz .hdr-center .ag-header-cell-comp-wrapper { flex:1 1 auto; width:100%; }
    .ag-theme-quartz .hdr-center .ag-header-cell-label { flex:1 1 auto; width:100%; justify-content:center; }
    .ag-theme-quartz .ag-cell.boolcell { display:flex; align-items:center; justify-content:center; }   /* boolean checkbox centered both ways */
    .ag-theme-quartz .hdr-init { padding-left:2px !important; padding-right:2px !important; } /* tiny header padding so A1/A2/P1/S1 labels fit the narrow column */
    .ag-theme-quartz .hdr-init .ag-header-cell-comp-wrapper { overflow:visible; }
    .ag-theme-quartz {
      --ag-background-color:var(--surface); --ag-foreground-color:var(--text);
      --ag-header-background-color:var(--surface-2); --ag-header-foreground-color:var(--text);
      --ag-border-color:var(--border); --ag-row-border-color:var(--border);
      --ag-odd-row-background-color:#1c1c1c; --ag-row-hover-color:var(--surface-3);
      --ag-selected-row-background-color:var(--gold-soft);
      --ag-control-panel-background-color:var(--surface-2);
      --ag-font-family:'DM Sans',sans-serif; --ag-font-size:12px;
      --ag-row-height:26px; --ag-header-height:30px; --ag-accent-color:var(--gold);
      --ag-input-focus-border-color:var(--gold); --ag-borders:solid 1px;
      /* more prominent column dividers / resize grips so it's clear where to grab to widen (master + child) */
      --ag-header-column-resize-handle-display:block; --ag-header-column-resize-handle-width:1px; --ag-header-column-resize-handle-height:100%; --ag-header-column-resize-handle-color:rgba(255,255,255,0.18);
      --ag-header-column-separator-display:block; --ag-header-column-separator-width:1px; --ag-header-column-separator-height:100%; --ag-header-column-separator-color:rgba(255,255,255,0.06);
    }
    /* PUSH 18 A-2 (ANALYST M-1): the header band between the mobile breakpoint and 960px. The 820px breakpoint does NOT
       move (its block re-lays the whole Home surface). Measured on the shell header (hand-back, push 18 lane A): at 821px
       the right row (Studio, Templates, Reports, Sheets, the signed-in email, account, Home) runs into the wordmark on
       the production header once Studio and the email both show. Header-only, in the order's sequence: the "DASHBOARD"
       sub-mark goes first (it is already hidden at 820px or below), then the row's gap and the section buttons' side
       padding come in. The A-10 pair rule moves WITH the gap, so the account button and Home stay 6px apart (gap 6px +
       margin 0). (PUSH 18 I1-1, D-160: the silver header's probe badge, which crowded this band, is gone; the test
       site's header is now the production header under the TEST SITE banner.) */
    @media (min-width:821px) and (max-width:960px){
      .shell-dash { display:none; }
      .shell-right { gap:6px; }
      .shell-btn { padding:3px 6px; }
      #profile-btn + #home-btn { margin-left:0; }
    }
    /* edit 11: mobile (read-only case lookup) — at the END so these win over later-defined base rules */
    @media (max-width:820px){
      .nav-burger { display:inline-flex; align-items:center; }
      .shell-right { display:none; }
      .shell-dash { display:none; }
      #shellhdr { padding:0 8px; }
      .side-collapse, .side-expand { display:none !important; }
      /* PUSH 18 A-1 (D-156): the drawer's nav block is at shell level (index.html), so it opens on EVERY screen. It is the
         drawer's top block, two buttons per row: Home | Account, Sheets | Reports, Templates | Studio. Each button has a
         fixed basis (half the row less half the 6px gap) and does not grow, so with no Studio seat Templates stays at half
         width, left-aligned, and the block is three rows either way. Its height is fixed (--drawer-nav-h: 8px padding,
         three 33px rows, the buttons' natural height, two 6px gaps, 8px padding, the 1px rule), so the rows never jump and
         #dash-side, the case list that opens beneath it on Home, starts exactly where it ends. The clip keeps its shadow
         on the right edge only.
         PUSH 18 I1-2 (P-6): the nav block, the case list and the backdrop hang from --shell-top, the header's bottom edge,
         never a literal 34px. On the real site the header is the page's first box, so its bottom edge is its own 34px
         (border-box) and the default (:root, above) is exact. On the test site the TEST SITE banner sits above it, so 90-boot.js
         sets --shell-top from the header's measured bottom (banner + 34px), again whenever the banner's height changes:
         the drawer and its backdrop open below the whole header there too, and the burger stays reachable. */
      :root { --drawer-nav-h:128px; }
      .drawer-nav { position:fixed; top:var(--shell-top); left:0; width:86vw; max-width:330px; height:var(--drawer-nav-h); z-index:61; gap:6px; padding:8px; flex-wrap:wrap; align-content:flex-start; background:var(--surface); border-right:1px solid var(--border); border-bottom:1px solid var(--border); box-shadow:2px 0 18px rgba(0,0,0,.5); clip-path:inset(0 -24px 0 0); }
      .drawer-nav.drawer-shown { display:flex; }
      .drawer-nav button { flex:0 0 calc(50% - 3px); height:33px; background:none; border:1px solid rgba(201,168,76,0.45); color:var(--gold); font-family:'DM Sans',sans-serif; font-weight:600; font-size:.74rem; padding:7px 6px; border-radius:5px; cursor:pointer; }
      #dash-side { position:fixed; top:calc(var(--shell-top) + var(--drawer-nav-h)); left:0; bottom:0; width:86vw; max-width:330px; z-index:60; box-shadow:2px 0 18px rgba(0,0,0,.5); display:none; }
      #dash-side.drawer-shown { display:flex; }
      #drawer-backdrop { position:fixed; inset:var(--shell-top) 0 0 0; background:rgba(0,0,0,.5); z-index:55; }
      #drawer-backdrop.show { display:block; }
      #dash-main { padding:12px 13px; }
      .ls-feed { padding-left:6px; padding-right:6px; margin-right:0; }   /* (Joshua) mobile: trim the gutter; drop the desktop negative right margin (mobile dash-main padding is only 13px) */
      .nf-band { margin-left:-6px; margin-right:-6px; }   /* (1e) cap the fence outdent to this breakpoint's 6px gutter — never overflow-scroll */
      .nf-viewas-banner { margin-left:-6px; margin-right:-6px; }   /* keep the View-as banner matched to .nf-band at this breakpoint */
      .d-grid { grid-template-columns:repeat(2,1fr); gap:14px 16px; padding:13px; }
      .d-field.full { grid-column:1/-1; }
      .d-it-body { gap:10px; margin-left:8px; }
      .d-it-info, .d-it-notebox { max-width:100%; }
      .d-it-info { overflow-x:auto; }
      .d-it-notebox { flex:1 1 100%; min-width:0; max-width:100%; }
      .dash-case { padding:11px 12px; }
      .case-tabs { gap:8px; }
      .d-tblwrap { -webkit-overflow-scrolling:touch; }
    }
    @media (max-width:430px){ .d-grid { grid-template-columns:1fr; } }
  
    /* ===== v0.6a folder spine - the Open-folder affordance (spec 10) ===== */
    /* The icon sits INLINE, immediately right of the matter-name text. Muted at rest, matching the hearings C2
       glyph's treatment. The transition animates COLOUR and SHADOW only: animating transform/size/position makes
       a box that never settles, which is unclickable to every automation harness and nudges layout every frame
       (2.4 #60). vertical-align keeps it on the text baseline without changing the row's height. */
    .mattername { }
    /* FIX D (ARCH 2026-08-10): `opacity .25s ease` is MERGED into this ONE transition for the settled-flash fade —
       the existing .12s colour/filter hover fade is preserved untouched (ANALYST — CSS merge; a second conflicting
       transition rule, or overwriting the .12s, would kill the hover animation). */
    .folder-ico { display:inline-flex; align-items:center; vertical-align:-2px; margin-left:6px; cursor:pointer;
                  color:#7d8590; transition:color .12s ease, filter .12s ease, opacity .25s ease; }
    .folder-ico .lu { width:15px; height:15px; }
    .folder-ico:hover, .folder-ico:focus-visible { color:#d4af37; filter:drop-shadow(0 0 3px rgba(212,175,55,.45)); outline:none; }
    /* 🔴 6e R5 addendum 1 (D-20) — the Case-360 globe beside the folder icon: the folder icon's metrics, colour and
       hover, on a real link (so no underline). The folder icon's own rules above are unchanged. */
    .c360-ico { display:inline-flex; align-items:center; vertical-align:-2px; margin-right:6px; cursor:pointer;
                color:#7d8590; text-decoration:none; transition:color .12s ease, filter .12s ease; }
    .c360-ico .lu { width:15px; height:15px; }
    .c360-ico:hover, .c360-ico:focus-visible { color:#d4af37; filter:drop-shadow(0 0 3px rgba(212,175,55,.45)); outline:none; }
    /* FIX D — the "settled" success flash. When a heal completes (folder-sync → folder-check → folder) the icon
       briefly brightens to var(--text) — the same bright confirm as the hearings synced checkmark — then fades back
       to the muted folder rest. Brightness/opacity only, never transform/size/position (2.4 #60). This state selector
       carries its own 250ms colour fade so the brighten eases in with the opacity, without slowing the base hover. */
    .folder-ico.is-settled { color:var(--text); transition:color .25s ease, filter .12s ease, opacity .25s ease; }
    /* Busy while a click is in flight / a code-4 move is being waited out (ARCH 2026-08-08 FIX 2). Colour, opacity
       and cursor ONLY — never a transform or a spinner that shifts layout (2.4 #60). pointer-events off so a second
       click can't re-enter the flow while it runs; the gold toast carries the state if a grid repaint drops this. */
    .folder-ico.is-busy { opacity:.5; cursor:progress; pointer-events:none; }
    /* FOUR-STATE ICON (ARCH 2026-08-09 post-gate): being-fixed (folder-sync) and broken (folder+slash) are
       MONOCHROME and MUTED — NO red — differentiated by their glyph, not colour. They inherit .folder-ico's own
       muted rest colour and gold hover, so the whole set reads as one family. The classes stay as stable
       state hooks (tests, tutorials); no per-state colour is applied by design. */
    /* The icon's right-click menu — Copy path lives here (Joshua, 2026-08-06), not on the setup dialog. Same
       shell as #navmenu's right-click quick-jump, which is the app's existing context-menu language (DEV-3). */
    /* Z-PIN (cure order §2.8; VAL §6 = ANALYST F1). These two overlays are the ONLY things in the app above
       #tut-layer (7000), and that inversion is what fails tutorial-litigation.spec.mjs:232-253 — the tutorial
       spotlight is supposed to sit above every app surface, and a folder menu left at 12100 would paint over the
       tour. They drop into the app band, above #confirmmodal (6300) so the folder dialog still wins against the
       app's own blocking modal, and below #tut-layer so the tour wins against both. */
    .folder-ctx { position:fixed; z-index:6500; background:var(--surface-2); border:1px solid var(--border);
                  border-radius:8px; box-shadow:0 8px 28px rgba(0,0,0,.6); min-width:170px; padding:5px;
                  font-size:.82rem; font-family:'DM Sans',sans-serif; }
    .folder-ctx-i { padding:7px 12px; border-radius:6px; cursor:pointer; color:var(--text); white-space:nowrap; }
    .folder-ctx-i:hover { background:var(--surface-3); }
    .folder-ctx-i:focus-visible { background:var(--surface-3); outline:none; }
    /* PUSH 15 ruling 2: a row that opens a submenu (its label, then a muted chevron at the right), lit while its submenu is open. */
    .folder-ctx-sub { display:flex; align-items:center; justify-content:space-between; gap:18px; }
    .folder-ctx-sub .lu { width:14px; height:14px; color:var(--muted); }
    .folder-ctx-sub[aria-expanded="true"] { background:var(--surface-3); }
    /* the one-time install dialog */
    .folder-setup-back { position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:6400;
                         display:flex; align-items:center; justify-content:center; }
    /* MODELLED ON #confirmmodal (DEV-3), which is the app's own blocking-dialog language: gold top rule, plain
       white title, muted body, and a separated footer bar with the actions pushed RIGHT. These panels previously
       used their own hardcoded hexes (#161b22 / #30363d / #adbac7) instead of the shared variables, which is why
       they read as a foreign window dropped into the dashboard. Same structure as the confirm, gold where it
       uses red — this family is never destructive, so it takes the accent colour, not the danger colour. */
    .folder-setup { background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--gold);
                    border-radius:10px; width:min(560px,92vw); color:var(--text); overflow:hidden;
                    box-shadow:0 12px 40px rgba(0,0,0,.55); }
    /* Roomier than the confirm modal it is modelled on, deliberately: that one asks a one-line question, this one
       walks through a three-step procedure and inherited padding that left it cramped. */
    .folder-setup h3 { font-family:'DM Sans',sans-serif; margin:0; font-weight:700; font-size:1rem;
                       color:var(--text); padding:22px 26px 10px; }
    .folder-setup p { margin:0; color:var(--muted); font-size:.85rem; line-height:1.55; padding:0 26px 6px; }
    .folder-setup ol, .folder-setup .fsu-list { margin:0; padding:8px 26px 18px 46px; color:var(--muted);
                                                font-size:.85rem; line-height:1.6; }
    .folder-setup ol li, .folder-setup .fsu-list li { margin:0 0 10px; padding-left:4px; }
    .folder-setup ol li:last-child, .folder-setup .fsu-list li:last-child { margin-bottom:0; }
    .folder-setup ol b, .folder-setup p b { color:var(--text); font-weight:700; }
    .folder-setup .fsu-dest { font-family:ui-monospace,Consolas,monospace; font-size:.78rem; color:var(--text); }
    /* The running status line ("Opening the folder…", or why it did not work). */
    .folder-setup .fsu-note { color:var(--gold); font-size:.8rem; padding:0 26px 16px; }
    /* Cancel LEFT, the sequence RIGHT — the spacer does the split, so no button needs its own margin rule and
       they all stay the same shape. No wrap: three buttons on one line or the panel widens, never a second row. */
    .folder-setup-btns { display:flex; align-items:center; gap:10px; padding:14px 26px;
                         border-top:1px solid var(--border); background:var(--surface-2); }
    .folder-setup-btns .fsu-spacer { flex:1 1 auto; }
    .folder-setup-btns button { font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:700;
                                min-width:104px; padding:8px 18px; border-radius:6px; cursor:pointer;
                                border:1px solid var(--border); background:var(--surface); color:var(--text);
                                transition:background .12s ease, border-color .12s ease; }
    .folder-setup-btns button:hover:not(:disabled) { background:var(--surface-3); border-color:var(--muted); }
    /* A DARKER gold on hover, not a brighter one: brightness() on an already-light fill washes the label out,
       which is what made the Download button read as broken on hover. */
    .folder-setup-btns .btn-gold { background:var(--gold); border-color:var(--gold); color:#161b22; }
    .folder-setup-btns .btn-gold:hover:not(:disabled) { background:#9c7c2c; border-color:#9c7c2c; color:#fff; }
    /* Disabled = not yet its turn. Still legible, obviously inert, and it keeps its footprint so the row does not
       shift when it becomes available. */
    .folder-setup-btns button:disabled { opacity:.4; cursor:not-allowed; }
    .folder-setup-path { font-family:ui-monospace,Consolas,monospace; font-size:11.5px; color:var(--muted);
                         word-break:break-all; margin:0; padding:10px 20px 14px; }
    /* ── ACCOUNT SETUP (F4 R-F4-5/6, conformed by 🔴 F6c ITEM 4) ──────────────────────────────────────────────
       The `.folder-setup*` rules above are now ORPHANED: their dialog was retired with the seat installer
       (10-folder.js). They are left in place rather than swept out in this commit — a large CSS deletion is not
       something this order can visually verify, and dead rules harm nothing — and are flagged for a cleanup pass.
       V F4-7: that cleanup is now UNBLOCKED. `folder-icon.spec.mjs` asserted these two rules must ship, on the
       ground that the dialog would otherwise render unstyled; the assertion has been conformed to the surface
       that replaced the dialog, so sweeping these out no longer reds a test.

       🔴 F6c ITEM 4 — MOST OF THIS BLOCK IS GONE, AND THAT IS THE POINT. Account Setup is a section of the User
       Account modal now, so it takes that surface's visual language whole (`pm-sec`, `pm-sec-head`, `pm-actions`,
       `pm-submit`, `pm-note`, `pm-list`, `pm-item`) instead of carrying its own page chrome, its own card
       chassis, its own gold button and its own note colours. Every rule removed here had a `pm-` counterpart
       doing the same job three hundred lines above, which is exactly the duplication that made the page read as
       a different product from the sections beside it. The rules that REMAIN are the ones with no counterpart:
       a lead paragraph, a numbered step list, fine print, and the machine-status colour dot and its wording.
       REMOVED, each because a `pm-` rule now does its job: `#account-setup` / `#acct-setup-top` /
       `.acct-setup-title` / `.acct-setup-body` (the page chrome — there is no page), `.acct-setup-card` + its
       `h2` (→ `.pm-sec` and `.pm-sec-title` / `.pm-list-h`), `.acct-setup-actions` + its standalone `.btn-gold`
       (→ `.pm-actions` + `.pm-submit`), `.acct-setup-note` / `-note-err` (→ `.pm-note` with its `.ok` / `.err`
       states), and `.acct-m` / `-main` / `-name` / `-why` / `-meta` (→ `.pm-item` and its subject / description /
       meta lines).

       🔴 F6d — `.acct-setup-lead` IS RETIRED WITH THE PARAGRAPHS IT STYLED. Joshua's authored page has ONE lead
       line and it is the section's descriptive line, so it wears `.pm-sec-sub` inside `.pm-sec-head` — which is
       also what keeps it inside the frozen header block (F6c item 8). With no lead paragraphs left there is
       nothing for this rule to style, and a rule with no markup is the dead weight this block was pruned to
       remove; the bold-run styling it shared moves onto the two lists that still emit `<b>`.
       `.acct-setup-fine` STAYS, as a LIST. It is still the notes treatment with no `pm-` counterpart — what
       changed is that Joshua's NOTES are bullets rather than paragraphs, so it gains list padding and per-item
       spacing.

       🔴 F6g (Joshua's spot-check, 2026-08-25) — ITS SIZE NOW MATCHES THE INSTRUCTIONS. It had kept the .75rem
       fine-print size it wore when the notes were a trailing paragraph, so on Joshua's authored page the Notes
       bullets rendered visibly smaller than the Instructions bullets directly above them — two bullet lists in
       the same section, at two sizes, reading as a hierarchy nobody intended. It takes `.acct-setup-steps`' own
       .85rem, so the two lists are one size by construction; no new rule and no new variable. Its `opacity:.85`
       and its own line-height are DELIBERATELY untouched — the ruling was about size, and the slight de-emphasis
       is what still distinguishes notes from instructions once they are the same size. */
    #profilemodal .acct-setup-steps b, #profilemodal .acct-setup-fine b { color:var(--text); font-weight:700; }
    #profilemodal .acct-setup-steps { margin:0 0 16px; padding-left:22px; color:var(--muted); font-size:.85rem;
                        line-height:1.55; }
    #profilemodal .acct-setup-steps li { margin:0 0 10px; padding-left:4px; }
    #profilemodal .acct-setup-steps li:last-child { margin-bottom:0; }
    #profilemodal .acct-setup-fine { margin:0; padding-left:22px; font-size:.85rem; line-height:1.5; color:var(--muted); opacity:.85; }   /* F6g: .85rem == .acct-setup-steps, so Notes and Instructions read at one size */
    #profilemodal .acct-setup-fine li { margin:0 0 8px; padding-left:4px; }
    #profilemodal .acct-setup-fine li:last-child { margin-bottom:0; }
    /* ORDER ONECLICK — the two additions this order makes to the stylesheet, and the reason each one could not
       be a class this section already emits.
       · `.acct-setup-hint` is `.pm-sec-sub` with a gap ABOVE it. Both hints sit directly under a `.pm-actions`
         row, and `.pm-sec-sub`'s own box is `margin:0 0 18px` — no top margin at all, because everywhere else it
         is a lead line under a heading. Used bare, the sentence explaining the file name would touch the button
         it explains. Nothing is redeclared but the margin, so the two stay one type style.
       · `.pm-submit.pm-submit-alt` is the SECONDARY button. `.pm-submit` is the section's only button style and
         it is the gold primary; with two buttons stacked and one of them a fallback, two identical gold buttons
         would put the retiring path and the one-click path at the same weight — which is the opposite of what
         this order is for. Outline rather than fill, muted rather than gold, same size and same metrics, so the
         hierarchy is carried by weight alone and nothing has to move when R6 removes the fallback. */
    #profilemodal .acct-setup-hint { margin-top:8px; }
    #profilemodal .pm-submit.pm-submit-alt { background:none; color:var(--muted); border-color:var(--border); font-weight:600; }
    #profilemodal .pm-submit.pm-submit-alt:hover { color:var(--text); border-color:var(--muted); filter:none; }
    /* Computer status — the status dot rides INSIDE the status line, so it reads as punctuation on a sentence
       rather than as a second column; the card around it is `.pm-item`, the sibling sections' own. */
    #profilemodal .acct-m-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; flex:none; }
    #profilemodal .acct-m-green { background:#3fb950; }
    /* 6e R5 (ARCH ruling, amber cure): this modal re-points `--gold` to its blue accent (#profilemodal, above), so an
       amber light reading `--gold` painted BLUE, the same as the setup-file light. Amber reads the root gold. */
    #profilemodal .acct-m-amber { background:var(--gold-root); }
    #profilemodal .acct-m-red { background:#e06c75; }
    #profilemodal .acct-m-head { font-size:.8rem; color:var(--text); margin-top:4px; }
    #profilemodal .acct-m-who { font-size:.72rem; color:var(--gold); width:100%; margin-bottom:2px; }
    #profilemodal .acct-m-empty { font-size:.8rem; color:var(--muted); padding:6px 0; }
    /* THE ADMIN STRIP (bag Batch 2 item 2.9). Four additions, and each one is a fact the existing three dots
       could not carry:
       - 🔴 6e (design v13 §3.3): the lights are the design's five colours. `acct-m-blue` is a SETUP FILE
         DOWNLOADED and not yet installed (there is no computer yet). `acct-m-grey` is RETIRED: a computer switched
         off on purpose is not a fault, so it takes neither a fault colour nor a working one.
       - `acct-m-alt` is the name a renamed machine now answers to, beside the name the register knows it by.
       - `acct-m-act` / `acct-m-retire` are the control itself: outlined and muted like the section's secondary
         button, turning red only on hover, because retiring is deliberate and ends runs. */
    #profilemodal .acct-m-blue { background:#5b8dd6; }
    #profilemodal .acct-m-grey { background:var(--muted); }
    #profilemodal .acct-m-alt { color:var(--muted); font-weight:400; font-size:.78rem; }
    #profilemodal .acct-m-act { margin-top:9px; }
    #profilemodal .acct-m-retire { background:none; border:1px solid var(--border); border-radius:6px; color:var(--muted);
                                   font-family:'DM Sans',sans-serif; font-size:.74rem; font-weight:700; padding:4px 10px; cursor:pointer;
                                   transition:color .12s,border-color .12s,background .12s; }
    #profilemodal .acct-m-retire:hover { color:#e06b6b; border-color:#e06b6b; background:var(--surface-3); }
    #profilemodal .acct-m-retire:disabled { opacity:.55; cursor:default; }

    /* the collision notice - advisory, inline under the name field */
    .folder-collide { margin-top:5px; font-size:11.5px; color:#e3b341; line-height:1.5; }
    /* The grid seam's post-commit advisory. Same language as the inline note above (DEV-3) — a grid cell edit has
       no input element to hang a note beneath that survives the grid's re-render, so this floats. It sits in the
       app band beside the other folder overlays, below #tut-layer. No transform/size animation (2.4 #60): a box
       that never settles is unclickable to an automation harness and nudges layout every frame. */
    .folder-collide-float { position:fixed; right:18px; bottom:18px; z-index:6500; max-width:460px; margin-top:0;
                            background:var(--surface-2); border:1px solid #d4af37; border-radius:8px;
                            padding:11px 14px; box-shadow:0 8px 28px rgba(0,0,0,.6); }
    .folder-collide-use { margin-left:4px; background:#21262d; color:#d4af37; border:1px solid #d4af37;
                          border-radius:4px; padding:2px 7px; cursor:pointer; font-size:11.5px; }
    .folder-collide-use:hover { background:#2d333b; }
    /* the pending folder line on a Live Stream card (spec 8c) */
    .ls-folder-line { font-size:11.5px; color:#7d8590; margin-top:4px; display:flex; align-items:center; gap:5px; }
    .ls-folder-line .lu { width:13px; height:13px; }
    .ls-folder-line b { color:#adbac7; font-weight:500; }
    .ls-folder-line .fl-state { color:#e3b341; }